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.
BackgroundManaging 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 technologyThe 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 VersionWithout 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
Steps Involved in Building (or Upgrading) to AJAX Using AtlasIn 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 TagBelow 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.
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.
<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>
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.
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.
<atlas:ScriptManager ID="ScripManager" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager>
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>
The steps necessary to make this work are as follows:
- Add the TextChangedBehavior.js to the ScriptLibrary folder.
<atlas:ScriptManager ID="sm" runat="server" EnablePartialRendering="true"> <Scripts> <atlas:ScriptReference Path="ScriptLibrary/TextChangedBehavior.js" /> </Scripts> </atlas:ScriptManager>
<script type="text/xml-script"> <page> <components> <textBox id="TextBoxSearchUser"> <behaviors> <textChangedBehavior timeout="100? changed="onTextChange" /> </behaviors> </textBox> </components> </page> </script>