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 control in an ASP.NET Web Form. On control selection / focus, jQuery loads an HTML Content from a remote file, then it applies the filter based on the control id and injects the filtered content into a predefined placeholder within 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 the below 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 retrieve the content.
Below is the HTML Content which is being read as help content for the controls.
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, the 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 at how things happen in the backend. The below diagram is the overall representation of the whole process.
Let me explain the steps by considering “Email” text box has been selected by end user.
- On Selection of “Email” Text Box,
Control.focus() event will fire, as this has already been associated with the text box. - Below statement gets the “
id” for corresponding selected textbox control.
var id = $(this).attr('id');
- Now Current Value of
id=”textEmail” [As we considered “Email” text box is selected] $(control).load() will actually do the job for reading the content from server. Please read more about .load() function.
The 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 filter the content based on the id.
On run time, below is the constructed statement which has been used to load the Help Text content for Email Text Box.
$("#helpviewer").load('Help/Help.htm #textEmail ')
- 6. 7. Content filtered based on the id and rendered with the
div element.
I have added few animated events like showup() and showdown() to make things look a bit fancy.
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 tooltip, etc.
Hope this will help.
Cheers!
AJ
Submit an article or tip
