In this blog post I am going to explain how we can create a simple  Context Sensitive Help for ASP.NET Controls using jQuery. This has been done based on the selection of a controls in a ASP.NET Web Form. On control selection / focus  jQuery Loads a  HTML Content from a remote file, then it’s apply the filter based on the control id and inject the filtered content into a predefined placeholder  with in the DOM Hierarchy.

To make it very simple let’s consider we have a contact form with Name, Email, Web Site and Comments Field. Our objective is to load and show the help content based on the control selection as shown in below image.

image

Content for the help file is being retrieved from one static HTML file which is kept in the server. On the selection of the ASP.NET control, based on the Control Id we have to retrieved the content.

Below is the HTML Content which is being read as help content for the controls.

image

One selection of  any Text Box in web form, jQuery will send a call to sever to load the Help content for Text box. Now question is how the content is getting matched with the control ? . This is simply done using Control Id. You may have noticed that I have given an  id for every  div element which is actually the same id of the ASP.NET Control in our web forms. On  every jQuery.Load() after loading the file form server, first filter will apply then content will be rendered.

Below is the sample code for the same

 <script type="text/javascript">
        $(document).ready(function () {
            var textboxes = $(":text");
            var textareas = $("textarea");
            $(":text").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                textareas.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");
                var id = $(this).attr('id');
                $("#helpviewer").slideUp();
                $("#helpviewer").slideDown("slow");
                $("#helpviewer").load('Help/Help.htm ' + "#" + id);
            });

            $("textarea").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");
                var id = $(this).attr('id');
                $("#helpviewer").slideUp();
                $("#helpviewer").slideDown("slow");
                $("#helpviewer").load('Help/Help.htm ' + "#" + id);
            });
        });
    </script>

How it works ?

Let’s have a quick look how the things happens in back end. Below diagram is the over all representation of the whole process.

image

Let me explain the steps by considering  “Email” text box has been selected by end user

1. On Selection of “Email” Text Box,  Control.focus() event will fire, as this has already been associated with the text box.

2. Below statement gets the “id” for corresponding selected textbox control.

var id = $(this).attr('id');

3. Now Current Value of id=”textEmail” [ As we considered “Email” text box is selected ]

4. $(control).load() will actually do the job for reading the content from server. Please read more about .load() function

below code block will load all the content and render the value with  “helpviewer” placeholder.

$("#helpviewer").load('Help/Help.htm ')

But, as we need the filtered content, we need to pass the ID of the control to  filtered the content based on the id.

On run time, below is the constructed statement which is been used to load the Help Text  content for Email Text Box.

$("#helpviewer").load('Help/Help.htm #textEmail ')

5/ 6 / 7 . Content filtered based on the id and rendered with the div element.

I have added few animated event like showup() and showdown() to looks the things bit fancy.

image

Quick Demo: On original blog post.

Below is the complete code block .

 <%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="Contacts.aspx.cs" Inherits="Contacts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        td
        {
            font-weight: 100;
            color: brown;
        }
        table
        {
            border: 1px solid gray;
        }

        .textboxClass
        {
            border: 1px;
            border-color: #6E6E6E;
            border-style: solid;
            background-color: #ffffff;
        }

        .textboxstyleClass
        {
            border: 1px;
            border-color: #C73E2C;
            border-style: solid;
            background-color: #D9D9D9;
        }

        #btnsubmit
        {
            border: 1px;
            border-color: #C73E2C;
            border-style: solid;
            background-color: #D9D9D9;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textboxes = $(":text");
            var textareas = $("textarea");
            $(":text").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                textareas.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");
                var id = $(this).attr('id');
                $("#helpviewer").slideUp();
                $("#helpviewer").slideDown("slow");
                $("#helpviewer").load('Help/Help.htm ' + "#" + id);
            });

            $("textarea").focus(function () {
                textboxes.removeClass("textboxstyleClass");
                $(this).addClass("textboxstyleClass");
                var id = $(this).attr('id');
                $("#helpviewer").slideUp();
                $("#helpviewer").slideDown("slow");
                $("#helpviewer").load('Help/Help.htm ' + "#" + id);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="2" cellspacing="2">
            <tr>
                <td colspan="2">
                    <div style="border-bottom-style: 1px;">
                        Contact Form
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" 
                        ID="textName" Width="348px" />
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" ID="textEmail" 
                        Width="348px" />
                </td>
            </tr>
            <tr>
                <td>
                    Web Site
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" 
                        ID="textWebSite" Width="348px" />
                </td>
            </tr>
            <tr>
                <td>
                    Comments
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" runat="server" 
                        TextMode="MultiLine" ID="textComments"
                        Height="72px" Width="425px" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <asp:Button ID="btnsubmit" Text="Submit" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="helpviewer" style="border: 1px solid gray; display: none">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

This is a simple demonstration, you can use this approach to make some good stuff  like for every control you can Append some image and show some tool tip, use some nice javascript tool tip etc.

Hope this will help.

Cheers !

AJ

关键字 creating,simple,context,sensitive,help,for,asp.net,controls,using,jquery
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架