Microsoft ASP.NET 2.0 Member/Role Management with IIS, Part 3: AJAX Enhancements with Microsoft Atlas

Peter Kellner
http://PeterKellner.net

June 2006

Applies to:
   Microsoft ASP.NET 2.0
   Microsoft Visual Studio 2005
   Microsoft Internet Information Services (IIS)

Summary: Extends one of the Web pages developed in Part 2 of this four-part series, using the Microsoft implementation of AJAX called Atlas. It describes two techniques for reducing Web server traffic to the browser to enhance the user's Web experience. (9 printed pages)

Download the code sample for this article, MembershipEditorAtlas.msi.

Contents

Introduction
What Is AJAX and Atlas
Background
The AJAX Enhanced Version
Technologies Used in AJAX Enhanced Version
Steps Involved in Building (or Upgrading) to AJAX Using Atlas
Using UpdatePanel ASP.NET Tag
What Is Really Happening
Enhancing the TextBox for User Search
Conclusions

Introduction

This article extends one of the Web pages developed in Part II of this series (Microsoft ASP.NET 2.0 Member/Role Management with IIS, Part 2: Implementation) using the Microsoft implementation of AJAX called Atlas. It utilizes two techniques for reducing Web server traffic to the browser to enhance the user's Web experience. The first technique uses the UpdatePanel tags to limit the refreshed area of the Web page to limited areas, and the second implements some JavaScript using Atlas techniques so that the Web page is updated on every key stroke in a textbox. A user list is displayed based on what is actively typed into this textbox. After reading this article developers will be able to implement AJAX (Microsoft's implementation of Atlas) in their own applications.

What Is AJAX and Atlas

AJAX is an acronym for Asynchronous JavaScript And XML. It is a technique for making interactive Web applications more responsive. It does this by exchanging small amounts of information between the Web server and the Web client, thereby reducing the amount of traffic to the Web client and making the application more responsive. Without AJAX, each time a page is refreshed (or a postback in generated) the complete page must be retransmitted to the user's Web browser. This is somewhat mitigated by the local cache on the Web browser, but it is still overkill since most of the information on a postback to a Web page does not change.

Atlas is Microsoft's implantation of AJAX. It is designed to make it relatively easy for software engineers, already skilled in ASP.NET 2.0, to take advantage of AJAX. Though Atlas has huge capabilities (which, by the way, come with a huge learning curve), it is very easy to implement the basics of AJAX and significantly improve the user experience of a Web site designed with ASP.NET 2.0. I will show how to do this in this article.

Background

Managing membership and roles for ASP.NET 2.0 using ObjectDataSource technology was developed in my previous MSDN article, Microsoft ASP.NET 2.0 Member/Role Management with IIS, Part 2: Implementation. This article steps through the inner workings of an ObjectDataSource that allows for the easy creation of gridviews, dataviews, or any other databound control. It also presents a best practices solution in the form of a ASP.NET 2.0 Web page (.aspx file). The solution allowed for adding, modifying, and deleting members, adding and deleting roles, as well as assigning users to roles. The solution is functionally similar to what is included in Visual Studio 2005 under the menu item Website / ASP.NET Configuration. The major benefit is that this solution is 100-percent compatible with Internet Information Services 5.1 and 6.0 and gives the software engineer complete customization control of what is presented to the user. It would normally be set to administrator access only. Below is a screen shot of this previously developed application.

Figure 1. Application has no AJAX technology

The application shown contains no AJAX technology. This means that every interaction you have with the Web form requires a full page refresh of HTML from the Web server. In this case, a picture is not worth very many words, but a URL will certainly make the point. Go to http://livedemos.peterkellner.net/AJAXDemo/Default.aspx and play with the Web site. Feel completely free to search on this data, add new users, add roles, and assign and unassign roles as you please, taking note of how the page reacts to changes. In particular, note the Search button on top for finding users. This search is a little different than you would normally expect. Instead of looking for exact matches, it effectively finds usernames that begin with what you have typed in the textbox when you press the search button. In the next section, the AJAX-enhanced version, the search button is gone and as the username is typed into the textbox, the list of usernames will be automatically updated. This could have been done here also; however, it would have caused a complete refresh of the page on every keystroke. Not only would the performance have been unacceptable, it would also have been unusable with all the flashing while typing. This is why in non-AJAX applications, there is almost always a button to press when data is finished being entered.

While you are running the demonstration program, notice at the top of the page there is a link that takes you to the same application without AJAX. Notice that in this application, there is a button for search. Notice also when you check and uncheck the check boxes to display Manage Roles or Create New Users, those sections turn on and off with a lot of screen refreshing. Also notice the difference when you edit users and assign or unassign roles.

The AJAX Enhanced Version

Without actually running the Web application, the only visual change the user can see in the AJAX-enhanced version of this application is that there is no search button above the user list. This is because with AJAX, as the user types in the search criteria, the list of users is automatically restricted to the search criteria defined by user names that begin with the characters typed. Notice in the screen shot below, "ch" is entered into the username textbox and only the usernames beginning with "ch" automatically appear.

Figure 2. Application enhanced with AJAX technology

Technologies Used in AJAX Enhanced Version

Obviously, Microsoft Atlas is the primary technology used to implement AJAX. Atlas has lots of functionality and capability, but in this article (and the code associated with the AJAX-enhanced Membership Editor), we are using only a portion of Atlas functionality. Actually, we use only two technologies here. One has to do with the updates on the screen not requiring complete HTML refreshes between postbacks, and the other has to do with extending the functionality of the TextBox control into which the user enters the search text. Because the default TextBox has no event associated with characters changing (it only has an event that generates a postback for TextChanged) the TextBox has to be enhanced to deal with the JavaScript function OnTextChanged.

Steps Involved in Building (or Upgrading) to AJAX Using Atlas

In order to Atlas-enable an application you need to make several changes to your project. I won't go through all the details, but here are the basics: you need to copy in the Atlas script library, modify your web.config, add the atlas dll to your project and, finally, add some initializing tags in your aspx pages. The other way to begin working with Atlas (and I did this to convert the project associated with this article) is, first, download the new Atlas template from Microsoft's Atlas Web site. Then, create a new Web project using the newly installed Atlas template. Next, rename the default.aspx file in case you have your own, then copy in all your existing libraries and pages. Finally, add your sections to the Atlas-enabled web.config file and make sure everything works as before with no Atlas functionality. The final step is to look at the original default.aspx file and copy the Atlas constructs into the headers of an existing page to which you want to add AJAX capabilities.

It is recommended not to put Atlas in your master page because there are undoubtedly pages that do not need AJAX capability. It is better to put that capability in only the pages you need to keep things simple.

Using UpdatePanel ASP.NET Tag

Below is the actual UpdatePanel ASP.NET control surrounding the check boxes that enable you to turn on and off the Role Management and to create the Create New Users section. It's the two check boxes half-way down the Web screen.

  <atlas:UpdatePanel ID="UpdatePanelCheckBoxes" runat="server">
 <ContentTemplate>
  <table>
   <tr>
   <td align="left">
      <asp:CheckBox ID="CheckBoxManageRoles" Text="Manage Roles"
        runat="server" AutoPostBack="True" Checked="True" />
   </td>
   <td align="right">
      <asp:CheckBox ID="CheckBoxAddUser" Text="Create New Users"
       runat="server" AutoPostBack="True" Checked="True" />
   </td>
   </tr>
  </table>
 </ContentTemplate>
</atlas:UpdatePanel>

The UpdatePanel control is the control that will most likely be used the most. By surrounding parts of the Web page that will change on the postback, this enables this section to update without actually a screen refresh. Essentially, on a page that is Atlas-enabled, Atlas lets all the normal ASP.NET page lifecycle events process normally (including the Page_Init method) but instead of redisplaying all the HTML in the Page_Render method, it knows to update code only inside the UpdatePanels defined on the Web page. Atlas is simulating a postback instead of doing a real one.

For this to actually work, in the ScriptManager tag the EnablePartialRendering must be set to true as shown below. If it is not set, then the page behaves as if the UpdatePanel tags are not there.

  <atlas:ScriptManager ID="ScripManager" runat="server" 
   EnablePartialRendering="true"> 
</atlas:ScriptManager>

The final step is to surround all the areas on the aspx page with these UpdatePanel tags. Once this is done, Visual Studio 2005 does a nice job of showing the UpdatePanel areas. The screen shot below shows the actual screen shot of the page used to manage members. Notice all the UpdatePanel tags displayed above the regions. Clicking on the image will display a large one where you can more easily see the details.

Figure 3. Update panels (click image to enlarge)

Trigger tags go hand-in-hand with the UpdatePanel control. Essentially, you can nest trigger controls in the UpdatePanel control and that will specify when the UpdatePanel will actually be posted back. You can specify triggers in two ways. The first way is on some control event such as the EventName "Click" on the button control. The other way is on some control value changing. With that, you would specify the controlID and the property name. There are no examples of triggers in the article download. The code below is just an example of typical code.

  <atlas:UpdatePanel ID="Panel1? runat="server">
 <ContentTemplate> 
  <asp:TextBox ID="TextBox1? runat="server"></asp:TextBox>
  <asp:Button ID="Button1? runat="server"></asp:Button>
 </ContentTemplate>     
 <Triggers> 
  <atlas:ControlEventTrigger ControlID="Button1? EventName="Click" />
  <atlas:ControlValueTrigger ControlID="TextBox1? PropertyName="Text"   />
 </Triggers>
</atlas:UpdatePanel>

What Is Really Happening

To understand what is really happening with these UpdatePanel tags, it is helpful to look at the source generated for the Web page. Essentially, for every control on your Web page that is surrounded by the UpdatePanel tags, JavaScript is created that forces a postback on every click. For example, if we look at the CheckBoxAddUser control, the following is generated:

  <td align="right">
 <label for="CheckBoxAddUser">Create New Users</label>
   <input id="CheckBoxAddUser" 
   type="checkbox" name="CheckBoxAddUser" 
   checked="checked" onclick=
   "javascript:setTimeout
   ('__doPostBack(\'CheckBoxAddUser\',\'\')', 0)" />
</td>

This is in addition to all the JavaScript references that include lots of other javascripts. The bottom line here is that if you include Atlas in your Web pages, the actual payload size delivered to your Web page in bytes will be significantly larger on the first download than it would be without Atlas. Subsequent requests are of course much smaller because, depending on how you design your page, only small amounts of data need to be returned on each future postback.

Enhancing the TextBox for User Search

The textbox search functionality is a little more tricky. It involves adding JavaScript that reacts to keystroke changes. This is necessary because there is no event in the TextBox control that responds to keyboard clicks. There is only an event that reacts to text changes, which is not good enough for our needs. In this application, I am using JavaScript from The Atlas Notes Blog by Garbin.

The steps necessary to make this work are as follows:

1. Add the TextChangedBehavior.js to the ScriptLibrary folder.

2. Add just below the <form> tag of your aspx page a line that includes the new JavaScript:

   <atlas:ScriptManager ID="sm" runat="server"
   EnablePartialRendering="true">
   <Scripts>
   <atlas:ScriptReference
   Path="ScriptLibrary/TextChangedBehavior.js" />
   </Scripts>
   </atlas:ScriptManager>
   
   

3. Add a small piece of JavaScript code to your Web page that your TextBox control will reference:

   <script type="text/javascript">
   function onTextChange() {
   __doPostBack('GridViewMemberUser','') ;
   }
   </script>
   
   

4. Finally, add another xml-script to the bottom of your Web page that declaratively tells the Atlas processor to add this new JavaScript capability to the TextBoxSearchUser control. This essentially maps the onclick event of the TextBoxSearchUser to the onTextChange JavaScript. The timeout is very nice because it allows for typing without causing postbacks until the typer stops typing for that many milliseconds.

  <script type="text/xml-script">
 <page>
  <components>
   <textBox id="TextBoxSearchUser">
    <behaviors>
     <textChangedBehavior timeout="100?
        changed="onTextChange" /> 
    </behaviors>
   </textBox>
  </components>
 </page>
</script>

Conclusions

AJAX, though not new in concept, is one of the most exciting new technologies to hit the Web for quite some time. The tool kits now available, such as Microsoft Atlas as described here and included with the demonstration download, makes adding AJAX functionality to existing ASP.NET 2.0 applications very straightforward. In this article, I've discussed the mechanics of adding AJAX functionality but have not addressed the impact to Web servers, cross-browser functionality, or Web design. Those things must all be considered before including AJAX technology in an existing Web application.

About the author

Peter Kellner founded 73rd Street Associates in 1990, where he successfully delivered systems for university clinic scheduling, insurance company management, and turnkey physician office management to more than 500 customers nationwide. Ten years later, in 2000, 73rd Street Associates was purchased by a large insurance company, and Peter started a new career as an independent software consultant. Among the technologies he currently is involved with are ASP.NET, Oracle, Java, VOiP, and soon, SQL Server. When not working, Peter spends most his free time biking. He has ridden his bike across the globe. Most recently he and his wife, Tammy, rode across the U.S., from California to Georgia, in just 27 days.

His blog site is http://peterkellner.net. You will find this article and the code posted in the download section.

© Microsoft Corporation. All rights reserved.