JavaScript with ASP .NET server controls ~ .Net programming

Introduction

Before ASP .NET, there was ASP; before ASP, there was JavaScript. While ASP has been gradually marginalized by the rapid succession of ASP .NET 1.x, 2.x and now 3.x, JavaScript remains the sole source and foundation of snappy client-side user experience.
If the time of existence is of any indication, the already gigantic and still rapidly growing repertoire of JavaScript is a force we cannot afford to ignore. The successes of various Google applications offer the best testimony (a testimony for Ajax too).
On the other hand, ASP .NET, especially the vastly improved ASP .NET 2.0 is undeniably a powerful and flexible development environment. The suite of systems (such as membership, role and profile, health monitoring), server controls (GridView, DataList, etc.) and master page, skin and theme relieve programmers much of the burden of doing the same plumbing over and over again, and allow them to concentrate on individual site-based business logic instead.
However the flip side of the coin is the server-centric-ness of ASP .NET. It relies almost exclusively on the server to deal with user interactions. With a slow network connection, ASP .NET applications would seem to be slow responding or not responding at all; if you have a deep-colored background, you get very unpleasant fits of white-flashes. Yes, ASP .NET has taken great effort to address the issues, introduced methods and properties to handle common tasks such as popping up alert or confirmation boxes, setting focus on server controls; created ClientScript class to allow JavaScript to be included with a page or server controls. You may refer to JavaScript with ASP .NET Pages for more details. However, its highly encapsulated declarative-based syntax still poses great challenges for programmers to go beyond the pre-cut patterns and practices and inject into server controls individualized client side responses.
So how do we leverage the power of ASP .NET and the nimbleness of JavaScript to create a powerful website with rich UI experience?
You may say: ASP .NET AJAX.
Yes. And No.

ASP .NET AJAX, or AJAX, is the hotly pursued technology. I, like everyone else, has jumped on this train of Mr. popular. However, like any other technology, ASP .NET technology can be misused and abused.
In a blog article entitled "Past the AJAX Hype - Some things to think about" in 2005 (while outdated it still has a grain of truth), Rick Stahl writes about the reasons why AJAX should not be the answer to every prayer.

"Grafting AJAX onto existing applications adds another layer of complexity to your application”
"With AJAX, the client code gets large very quickly".
"You should also consider what impact AJAX has on your application’s scalability. AJAX tends to increase the number of requests on a back end application considerably."

ASP .NET AJAX does not offer a fix in every situation for everyone either. ASP.NET AJAX, formerly code-named Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality, including both client-side and server-side components.
There are scenarios where AJAX offers the only acceptable solution. That is when server data retrieval is needed and a whole-page refreshing to be avoided. However in other common-place scenarios, such as show and hide a page section based on user input, zoom in and out of an image in responding to a user's mouse movement, AJAX should not be rushed in an ASP .NET page as the rescue. Client-side only reactions should be left to client-side only scripts.
And there is a whole world of JavaScript for us to take advantage of.
So let's jam with ASP .NET and JavaScript code with examples. To demonstrate how we can take advantage of the tons of snappy JavaScript that is out there, I downloaded most of the script for my examples (JavaScript source for this article is mostly from Dynamic Drive DHTML).
Check out the live demo for this article here.

Greybox with ASP .NET server controls

One rule of thumbs of website design is to try to keep the number of pop up windows to a minimum (normal pop-up windows using window.open() call may not work anyway because of the prevalence of popup blockers), another one is try not to have (too many) links away, i.e., links to external websites channeling away traffic.
There have been some work-around scripts for creating non-intrusive and within-site navigation popup. ASP .NET AJAX ModalPopup is one way to do it in ASP .NET Ajax. However, I much prefer the Greybox created by Orangoo Labs. Greybox can have wide use ranging from login, small gallery and external-web page links, etc.
The installation is very easy and business-as-usual; you can simply download and stick the JavaScript references in the head section of a page.
Turns out that installing a Greybox for use with an ASP .NET page is very simple.
The following example, slightly modified from the original example, attaches to GreyBox to a server-side button and a hyperlink.
Step 1: Reference the Greybox JavaScript source in your header section, as instructed in the original JavaScript.

Listing 1: Step 1: Reference the Greybox JavaScript

<head id="Head2" runat="server">
<title>GreyBox with ASP .NET Examples</title>
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css"
media="all" />
<script type="text/javascript" src="static_files/help.js"></script>
<link href="static_files/help.css" rel="stylesheet" type="text/css"
media="all" />
</head>

Step 2: Invoke the GreyBox with a server control, such as a button, a hyperlink, an image, etc. The slight difference is that instead of directly calling the JavaScript function as we would with an HTML input control; we attach it to a server control in the Page_load event by using attributes.add in the code behind page. Please note that GreyBox heavily utilizes the rel attribute of a link tag.
The following example launches a small image gallery on button click and then launches the DotNetSlackers website upon a click of the hyperlink.

Listing 2: The Web Form with a button and a hyperlink

<form id="form2" runat="server">
<script type="text/javascript">
var image_set = [{'caption': 'Flower', 'url': 
'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
{'caption': 'Nice waterfall', 'url': 
'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>
<asp:Button ID="button1" runat="server" text="Click me!" /><br /><br />
<asp:HyperLink runat=server ID="link1" Text="Click me"
NavigateUrl="http://www.dotnetslackers.com"></asp:HyperLink>
</form>

Listing 3: Code Behind

protected void Page_Load(object sender, EventArgs e)
{
button1.Attributes.Add("onClick", "return GB_showImageSet(image_set, 1)");
link1.Attributes.Add("rel", "gb_page_center[640, 480]");
}

Figure 1: Screenshot of Greybox with server controls

Check out the demo for the code in action.

JavaScript with List controls and how to show/hide a layer

ASP .NET list controls include RadioButtonList, CheckBoxList, DropDownList and ListBox. In the ASP .NET 1.x times, it was a known bug that the regular attributes.add (key, function) didn’t work for list controls. For example, you cannot apply special CSS styles to a particular checkbox if it is checked; and you cannot attach a JavaScript function to a RadioButtoList’s OnClick event. To make your list controls have individual ListItem specific reactions or behaviors, you have to write custom Web Controls inheriting from ListControl. It is not exactly a trivial task (To read more, please see List Control Items and Attributes).
Luckily, we have ASP .NET 2.0 which has swept away bugs like this. However, how do we style different list items? How do we set up JavaScript functions in response to client-side actions, for example, in a common scenario where you want to display a set of questions only if a user has answered "Yes" to a screening question?
We can dress individual List Items in the code-behind page, since it is not possible to set the style declaratively. For example, the following code sets the background color of each list item of a DropdownList of colors.

foreach (ListItem li in
 
dropdownlist1.Items)
li.Attributes.Add("style", "background-color:" + li.Text); 

To toggle the visibility of a specific set, we can do it server-centric way or client-centric way. For the former, you can put the set in a server-side panel, set the list control's autopostback to True, and set the property visible to either False or True. To avoid the annoying whole-page refreshing and unpleasant post back flash, you can also use an UpdatePanel.
The following example is directly plucked out of a survey. It displays the Government-related question if a user indicates that she/he works for Government or Civic agency, or the "other" textbox to allow user to specify the type of work he/she works on.

Listing 4: Using UpdatePanel to show/hide a specific set of questions based on users’ response

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<p>Which best describes your work?  
<asp:RadioButtonList ID="q1" runat="server" AutoPostBack="true"
repeatDirection="vertical" OnSelectedIndexChanged="q1_SelectedIndexChanged">
<asp:ListItem value="1">Not-for-profit</asp:ListItem>
<asp:ListItem value="2">Foundation/corporate philanthropy</asp:ListItem>
<asp:ListItem value="3">Private sector</asp:ListItem>
<asp:ListItem value="4">Government/civic agency</asp:ListItem>
<asp:ListItem value="5">Educational institution/agency</asp:ListItem>
<asp:ListItem value="6">Faith-based organization</asp:ListItem>
<asp:ListItem value="7">Independent consultant</asp:ListItem>
<asp:ListItem value="8">Student</asp:ListItem>
<asp:ListItem value="9">Other
</asp:ListItem>
</asp:RadioButtonList>
</p>
<div id="divQlgov" runat="server" visible="false">
<b>Government/civic agency?
</b>
<asp:RadioButtonList ID="q1gov" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1">Local</asp:ListItem>
<asp:ListItem Value="2">State</asp:ListItem>
<asp:ListItem Value="3">Federal</asp:ListItem>
</asp:RadioButtonList>
</div>
<div id="divQ1other" visible="false" runat="server">
<b> Other (Specify)</b>
<asp:TextBox id="q1oth" runat="server" />   
</div>
</ContentTemplate>
</asp:UpdatePanel>

In the code behind page, you can define your q1_SelectedIndexChanged function as such:

protected void q1_SelectedIndexChanged(object sender, EventArgs e)
{
divQ1other.Visible = (q1.SelectedIndex == q1.Items.Count - 1);
divQlgov.Visible = (q1.SelectedIndex == 3);
}

The above would work.
However, we can do it in a simpler, client-centric way, instead of posting back every user mouse movement to server. First, to each ListItem we add an OnClick attribute; then, rather than wrap the selective set of questions in a server-side control and further wrap it up in UpdatePanel/ContentTemplate tags, we use a client-side layer and adjust its style.display property to either block or none.
For example, we can always rewrite the above server code as follows:

Listing 5: Add JavaScript to server list controls to turn off/on a set of specific questions based on user’s response

<p>Which best describes your work?  
<asp:RadioButtonList ID="q1" runat="server" repeatDirection="vertical">
<asp:ListItem value="1">Not-for-profit</asp:ListItem>
<asp:ListItem value="2">Foundation/corporate philanthropy</asp:ListItem>
<asp:ListItem value="3">Private sector</asp:ListItem>
<asp:ListItem value="4">Government/civic agency</asp:ListItem>
<asp:ListItem value="5">Educational institution/agency</asp:ListItem>
<asp:ListItem value="6">Faith-based organization</asp:ListItem>
<asp:ListItem value="7">Independent consultant</asp:ListItem>
<asp:ListItem value="8">Student</asp:ListItem>
<asp:ListItem value="9">Other
</asp:ListItem>
</asp:RadioButtonList>
</p>
<div id="divGov" style="display:none">
<b>Government/civic agency?
</b>
<asp:RadioButtonList ID="q1gov" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1">Local</asp:ListItem>
<asp:ListItem Value="2">State</asp:ListItem>
<asp:ListItem Value="3">Federal</asp:ListItem>
</asp:RadioButtonList>
</div>
<div id="divOther" style="display:none">
<b> Other (Specify)</b>
<asp:TextBox id="q1oth" runat="server" />   
</div>

Listing 6: JavaScript function to show/hide a layer

function ShowHide(divName, OnOff){
var ele = document.getElementById(divName);
if(ele != null){
if(OnOff == "on")
ele.style.display = "block";
else
ele.style.display = "none";
}
}

In the code behind page, we can do the attributes.add(). Since there are two layers involved in the example, we call the same JavaScript function twice with different parameters.

Listing 7: Add JavaScript function calls to individual ListItem

foreach (ListItem li in q1.Items) {
//if government selected, show government questions
if (li.Value == "4")
li.Attributes.Add("Onclick", 
"ShowHide('divGov','on');ShowHide('divOther','off')");
//if other selected, show the other textbox
else if(li.Value == "9")
li.Attributes.Add("Onclick", 
"ShowHide('divGov','off');ShowHide('divOther','on')");
else
li.Attributes.Add("Onclick", 
"ShowHide('divGov','off');ShowHide('divOther','off')");
}

In the before-mentioned article, Scott Mitchell presents an example of a custom CheckboxList control which contains two sets of exclusive checkboxes. For example, a checkbox that says "None of the above" would cause all of the others be unchecked. That was in the pre-2.0 days.
Now let's try to change the logic a little bit. Let’s use a RadioButtonList to check or uncheck all of the checkbox items in a CheckBoxList, which is also a very common scenario.
Insert the following JavaScript function in the web form.

Listing 8: JavaScript: Check or uncheck all of the items in the checkboxList

function Check(sender, checklistName, total)
{
if(sender.value == "1")
for (var i = 0; i < total;i++)
document.getElementById(checklistName + "_" + i).checked = true;
else
for (var i = 0; i < total;i++)
document.getElementById(checklistName + "_" + i).checked = false;
}

Listing 9: The web form with a RadioButtonList and a CheckBoxList

From where did you hear about us?
<asp:RadioButtonList ID="raioList1" runat="server">
<asp:ListItem Value="1">All the Following</asp:ListItem>
<asp:ListItem Value="2">None of the Following</asp:ListItem>
</asp:RadioButtonList>
<asp:CheckBoxList ID="checkList1" runat="server">
<asp:ListItem Value="1">TV/Radio</asp:ListItem>
<asp:ListItem Value="2">Newspaper</asp:ListItem>
<asp:ListItem Value="3">Friends</asp:ListItem>
<asp:ListItem Value="4">Internet</asp:ListItem>
</asp:CheckBoxList>

Listing 10: Call the JavaScript from code-behind

foreach (ListItem li in raioList1.Items)        
{
li.Attributes.Add("Onclick", "Check(this,'" + checkList1.ClientID + "'," + 
checkList1.Items.Count+ ")");
}

Please note that the client function for check/uncheck all the items in a CheckBoxList takes three parameters: sender, the object that evokes the function; checklistName, the collective name or the prefix of the array of checkboxes in concern; total: the total number of checkboxes in the list.
On the server side, we pass the this keyword to refer to the sender itself; the ClientID of the CheckboxList as ChecklistName; and items.count for the total number of checkboxes.

Popup in a GridView

Popup is the darling of web programmers; we always try to outsmart popup-blockers. Good popup are non-intrusive, informative, nimble and visually appealing. Popup are as popular as GridView is powerful. How then to allow a little popup bubbling up while you mouse over each data item of a GridView? I have seen examples using AJAX for GridView popup. However, I doubt it is absolutely necessary.
How about using one of the pop up JavaScript out there and combine it with our powerful and data-rich GridView?
The result is the following:

Figure 2: Screenshot of information popup with a GridView

Here is how:
First, download the JavaScript file (tooltip.js in the sample code) and reference it in your ASP .NET page;
Second, set up your Gridview. In my example, I created a dummy DataTable as the Gridview's DataSource (I’ve stripped out the database part to make it simpler);

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id"
OnRowCreated="GridView1_RowCreated" CellPadding="4" ForeColor="#333333" 
GridLines="None">

Third, use attribute.add() to add a note to OnRowCreated event the of Gridview to call the JavaScript function whenever a mouse is detected hovering over the magnifier image, to pop up a small information box.

Listing 11: Code for the OnRowCreated event

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Programmatically reference the Image control
Image image1 = (Image)e.Row.Cells[1].FindControl("Image1");
HyperLink link1 = (HyperLink)e.Row.Cells[1].FindControl("link1");
link1.Attributes.Add("onmouseover", "doTooltip(event," + 
e.Row.RowIndex.ToString() + ")");
link1.Attributes.Add("onmouseout", "hideTip()");
}
}

To the GridView pop up in action, check out the demo here.

Custom Validation with JavaScript

All the ASP .NET built-in validators - RequiredFieldValidator, CompareValidator, RangeValidator and RegularExpressionValidator are provided with JavaScript as default. You have to set the EnableClientScript property of the validator or ValidationSummary control to False to disable client script validation.
For validations that require special logic - for example, a control's input that needs to check against the input of multiple other controls - the CustomValidator class comes into play. CustomValidator allows us to do validation both on the server and client side, and it is a common practice to place identical validation functions on both sides (I do not know why). Here, we will only focus on the side of client script, since it involves some basics of using the mini-client-side validation API and accessing server controls locally.

Listing 12: A custom validator to validate a group of textboxes to ensure their percentage values add up to 100

<asp:CustomValidator id="CustomValidator1" runat="server"
ErrorMessage="Total Percentages must add up to 100!"
ClientValidationFunction="CheckTotal" Display="Dynamic" /><br>
Please indicate the percentage of your daily expenditure:<br />
Grocery: <asp:TextBox id="txtGrocery" runat="server" Text="0" /><br />
Entertainment: <asp:TextBox id="txtEntertainment" runat="server"  Text="0"/><br />
Other:<asp:TextBox id="txtOther" runat="server"  Text="0" /><br />
<script language="javascript">
<!--
function CheckTotal(source, args) {
var ele1 =document.getElementById("<%=txtGrocery.ClientID%>"); 
var ele2 =document.getElementById("<%=txtEntertainment.ClientID%>");
var ele3 =document.getElementById("<%=txtOther.ClientID%>");
var val1 = ele1.value;
var val2 = ele2.value;
var val3 = ele3.value;
if (isNaN(val1) ||isNaN(val2) || isNaN(val3) ) {
args.IsValid = false;
}
else {
args.IsValid = ((val1/1 + val2/1 + val3/1) == 100);
}
}
// -->
</script> 

Here are some points to note about using CustomValidator:

To perform client-side custom validation, we must indicate the name of function in the ClientValidationFunction property. As in the above: ClientValidationFunction="CheckTotal".
The custom function must always have the same two parameters: source and arguments (translated on the server-side: customValidate (object sender, EventArgs e)). Source is the client-side CustomValidator object, and arguments is an object with two properties, Value and IsValid. The Value property is the value to be validated and the IsValid property is a Boolean used to set the return result of the validation.
In the case where we need to access the value of other server controls, we use document.getElementById ("<%=server control ID.ClientID% >") to access the server control using its ClientID.
The IsValid property is false by default. Always explicitly set IsValid property to true if the values are validated.
You can leave out the ControlToValidate property. One CustomValidator can be used for a whole web form, in which case, the custom validation function will be fired only once.

Take a look at the Ajax Control Toolkit

"The ASP.NET AJAX Control Toolkit is a joint project between the community and Microsoft that provides a rich array of controls for building interactive Web experiences easily." As of now, the sample website showcases about thirty-four samples of web control extenders, such as Accordion, Animation, AutoComplete.
Extenders are server controls that allow a server control to imitate client-side behaviors. For example, the Accordion allows you to provide multiple panes that can expand or collapse depending on user's mouse click; only one pane will be visible at one time.
If you are not using Visual Studio 2008, or ASP .NET 3.5; to enable extenders to work with web controls, you must first configure your web site to be AJAX enabled, and then you must install the AjaxControlToolkit assembly. Finally, you add the controls to your Toolbox. Then you can drag and drop Toolkit's extenders in your page. It is not very difficult to do, and you do not need to write any JavaScript code to have the benefit of JavaScript, which could be a plus for programmers that do not have any JavaScript skills.
However, in what planet can you develop a rich and fast- responding website with only spoon-fed canned formulas and no JavaScript at all?
To me, the problem with Ajax extenders is that, it is not at all easy to plow through the obtuse process of creating extenders of your own. Given the meager number of extenders available on the sample website and the vast and varied requirement for rich client capabilities, you will soon be out of luck. And think of the world of JavaScript (text effects, image effects, links and menus, mouse and cursors) that are available to download!
Among the extenders in the Ajax Control Toolkit, the auto-complete extender is a good and necessary one, because to provide a list of suggested words to aid users filling their content box, it involves retrieving data (sometimes a heavy amount of data) from server upon every keystroke, which client script could not do. However, others, in my view, are not quite so necessary. It is easier still to cherry-pick from the available JavaScript and directly apply to a web control.
Take the CollapsiblePanel for example. Collapse and expand a layer has been a long-standing JavaScript function. A search will quickly turn up many JavaScript for this purpose. So I downloaded one and added the reference in the web form head section - and with a few lines, I got a nice working collapsible panel. No Toolkit’s .dll plug in, no AJAX configuration.

Listing 13: The accordion web form

<div style="background-color:navy; width:400px">
<asp:Label Font-Bold="true" Text="What is ASP .NET AJAX (hide details...)"
ForeColor="white" ID="label1" runat="server"></asp:Label>
<asp:HyperLink ImageUrl="expand_blue.jpg" runat="server"
ID="linkCollapse"></asp:HyperLink><br /><br />
</div>
<div id="DivContent" style="width: 300px; background-color: #99E0FB;">
<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside 
a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
ASP.NET AJAX is a free framework for building a new generation of richer, .....
</div>
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, 
enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("DivContent", 800, true)
</script>

Code in the code-behind, using attribute.add to call the JavaScript function:

1.linkCollapse.Attributes.Add("Onclick", "javascript:collapse2.slideit()");

Summary

ASP .NET is no doubt a powerful web development tool. However, transitioning from ASP to the ever more sophisticated ASP .NET does not mean we have to throw away everything we learned - especially not JavaScript. The article showed how we can easily harvest both the power of the ASP .NET and the rich and fast capacity of the vast repertoire of existing JavaScript; and how we can do it without necessarily fall back on Ajax.

.Net programming

Saturday, October 1, 2011

JavaScript with ASP .NET server controls