Using the Ajax.NET Framework : Page 4

What developer wants to spend hours manually writing Ajax plumbing when the Ajax.NET framework does this for free?

by Craig Shoemaker

Apr 14, 2006

Page 4 of 6

Create the Application Configuration Class
Add a new item in the Components folder and name the file WebAppConfig.cs. Fill out the class as shown in Listing 2.

The WebAppConfig class will provide a holder for the TaskCollection. When the application first accesses the Tasks property, if a collection of tasks does not exist, the property will call a method to create the collection the first time it's needed. As described previously, to keep this demonstration simple, this class will use the Application state object as a mock persistence medium for the application.

Update default.aspx
Next you need to update the default.aspx page and register the page class for the Ajax.NET Framework. To register the page, add the following code to your Page_Load event.

   private void Page_Load(object sender, 
      System.EventArgs e)
   {
      Ajax.Utility.RegisterTypeForAjax
      (typeof(_default));
   }

Author's Note: In C# the word default is a reserved keyword. Visual Studio .NET side-steps any possible confusions of whether your code intends to use your page named default or the reserved keyword by prefixing the type name with an underscore.

Implement the GetTasks Method
The GetTasks method will simply return the value of the Tasks property in the WebAppConfig class. Remember that the implementation of Tasks in WebAppConfig will build the task collection if it does not exist.

Be sure to add the using statement at the top of the code behind page so the compiler will know where the WebAppConfig class resides.

   using AjaxNET.Components;

Add the GetTasks method and include the AjaxMethod attribute.





   [Ajax.AjaxMethod()]
   public TaskCollection GetTasks()
   {
      return WebAppConfig.Tasks;
   }

Edit the HTML
When you created the default.aspx page, Visual Studio generated some HTML from a template to create a stub for your page. You will need to add references in the HEAD section of the documents to the following items:

Style Sheet:

Author's Note: As stated earlier, this article will not detail the styles used in this application, but you may download the default.aspx.css file.

You'll need to create the JavaScript file referenced in this listing. This file will contain all the custom JavaScript for this page.

   <html>
   <head>
   <link rel="stylesheet" 
      type="text/css" 
      href="default.aspx.css" >
   <script src="default.aspx.js" 
      type="text/javascript"></script>
   </head>
   <body>
   <form id="Form1" method="post" 
      runat="server">
   <h1>Tasks</h1>
   <div id="divTasks"></div>
   </form>
   </body>
   </html>

There are two other elements added to the page. The H1 tag marks up the page heading, making the page's purpose obvious to the user. The DIV identified as divTasks is a placeholder for the markup dynamically generated by the application.

To create the JavaScript, add a file named default.aspx.js in the same location as the default.aspx file and add the code in Listing 3.

Let's take a look at this code block piece by piece. The first line assigns the Window_Load method to the onload event of the browser window. Often developers will choose to wire-up this event with the onload attribute of the BODY tag in the HTML. The method you see here is preferable as now all the control of the behavior of the page is controlled within this JavaScript file. Please note the assignment of the method to the event does not include the open and close parenthesis you would normally use with a method call.

The GetTasks method calls the proxy generated by the Ajax.NET Framework calling the server-side method of GetTasks. The implementation seen here will also direct the browser to call the GetTasks_CallBack method when it recognizes a response from the server.


Figure 4: Displaying the tasks to user.

The GetTasks_CallBack method simply calls a function that will do all the work to take the collection of tasks returned from the server and wrap the data with presentation markup to display to the user.

The LoadTasks method looks a bit convoluted at first glance, but the operation is quite simple. This method has a template defined of how to display the task. This template is used in the loop to inject the task information from each item in the task collection.

The last step is to identify the container on the page and set the innerHTML property equal to the string of HTML just built up to display the tasks.

Now when you run the page, you should have a page that displays the tasks on the screen. Your page should look something like Figure 4.

Implement Edit and Delete Buttons
If you recall from Figure 2 (the screen shot of the finished product), each task has two buttons associated with its region. The next steps will guide you through adding the edit and delete buttons in each task section.

First you'll need to update the template in the LoadTasks method. To update the template you will change two areas of the function: you'll update the template itself and you'll update the loop that places the task information into the template. Listing 4 shows the changes in the LoadTasks method.

If you look carefully at the change in the for loop, you will notice what may appear to be a mistake. The function executes the exact same line of code in direct succession. This is not a mistake and necessary to get the desired result.

The replace method of the JavaScript string object will replace the first match of its search pattern and then cease execution. The template contains two TASK_ID tokens, one for the edit button and the other for the delete button. Running this line of code twice will replace the token for the desired value in all needed spots.

Implement Control Behavior
The last section directed you to update the template used to load the tasks. In this template the edit and delete buttons call methods that do not yet exist in your application. The next steps will guide you to fill in the blanks.

When the user clicks the edit button, the system will present a task editor "dialog box" granting the ability for the user to change the title and description of the task. The save and close command buttons will appear at the bottom of this box.

The edit task feature must identify on the server which task the user is updating. The client-side knows the task's Id value so it needs a method that locates a task by its Id value.

« Previous Page 1 2 345 6 Next Page »

0 Comments (click to add your comment)

Comment and Contribute