Total votes: 1
Print: Print Article
Please login to rate or to leave a comment.
Published: 07 May 2008
Download Sample Code
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
health monitoring), server controls (
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
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.
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.
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.
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
Listing 3: Code Behind
Figure 1: Screenshot of Greybox with server controls
Check out the demo for the code in action.
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
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).
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.
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
True, and set the property
visible to either
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
In the code behind page, you can define your
q1_SelectedIndexChanged function as such:
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
For example, we can always rewrite the above server code as follows:
In the code behind page, we can do the
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.
Listing 9: The web form with a RadioButtonList and a CheckBoxList
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
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.
The result is the following:
Figure 2: Screenshot of information popup with a GridView
Here is how:
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);
attribute.add() to add a note to
Listing 11: Code for the OnRowCreated event
To the GridView pop up in action, check out the demo here.
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
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:
- The custom function must always have the same two parameters:
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 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
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.
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
Web developer, Data Analyst, GIS Programmer
This author has published 12 articles on DotNetSlackers. View other articles or the complete profile here.
You might also be interested in the following related blog posts
ASP.NET 4 Beta 2 - New Version, New Docs, New MSDN Site !
How to render the same template on the server and client with minimal redundancy
Adding users to a TFS project when youre not on the domain
Assembly-Free jQuery in SharePoint Sites Using the SmartTools jQueryLoader
IIS Media Services 3.0
Using Seadragon with ASP.NET MVC
Ajax Control Toolkit: new controls, bug fixes
NEW VERSION Ajax Control Toolkit
Please login to rate or to leave a comment.