Using the Ajax.NET Framework : Page 5

Update the TaskCollection Class
The GetTaskById method shown below takes a string of the GUID value of the task ID as its only argument.

   public Task GetTaskById(string strTaskId)
   {
      Task returnValue = null;
      Guid taskId;
      taskId = new Guid(strTaskId);
      foreach(Task task in this)
      {
         if(task.Id == taskId)
         {
            returnValue = task;
            break;
         }
      }
      return returnValue;
   }

The method loops through the collection until it finds a match. If it finds a match it returns the task object, otherwise it returns null.

Update default.aspx Code Behind
Now you must update the default.aspx page to use the new method in TaskCollection. The GetTaskById shown below simply passes the task ID into the method of the same name in the TaskCollection class. The result is then returned to the browser.

   [Ajax.AjaxMethod()]
   public Task GetTaskById(string taskId)
   {
      return WebAppConfig.Tasks.GetTaskById(taskId);
   }
   
   [Ajax.AjaxMethod()]
   public TaskCollection DeleteTask(string taskId)
   {
      Task removeTask;
      removeTask = 
        WebAppConfig.Tasks.GetTaskById(taskId);
      if(removeTask != null)
      {
         WebAppConfig.Tasks.Remove(removeTask);
      }
      return WebAppConfig.Tasks;
   }

The DeleteTask method in the preceding code uses the TaskCollection's GetTaskById method to find the task to be removed and then pass that task object into the collection's Remove method. Finally the DeleteTask method returns the update collection to tasks to the client.

Update default.aspx HTML
The next block of HTML will build the task editor and status message the user will see when they click the Add or Edit links.

Add the following HTML to the page directly after the <div id="divTasks"></div> element on the page.

   <div id="divTaskInput">
   <h3>Task Editor</h3>
   <input type="hidden" id="hdnId" 
        name="hdnId" />
   <h4>Title</h4>
   <asp:textbox id="txtTitle" 
        runat="server" />
   <h4>Description</h4>
   <asp:textbox id="txtDescription" 
        textmode="MultiLine" 
        runat="server" />
   <div class="submit">
   <input id="btnSave" 
          name="btnSave" 
          onclick="btnSave_Click();" 
          type="button" value="Save" />
   <input type="button" 
          id="btnClose" name="btnClose"
          value="Close" 
          onclick="btnClose_Click();"/>
   </div>
   </div>
   <div id="divStatus">Saving...</div>

The first part of this listing shows opening a DIV tag identified as divTaskInput. This will act as a container for the section.

The hidden input field holds the task's ID. The value of the ID is not necessary to display to the user, so it's placed in a hidden input control.

The rest of the markup defines the input controls needed to allow the user to edit the title and description of the task. This code wires-up the HTML to JavaScript that you will add in coming sections.

Finally, the DIV identified as divStatus is a container for a status message that gets displayed to the user during server-side latency. The container is hidden by default in the referenced CSS file and only shown to the user when the browser is waiting for a response from the server.

Update JavaScript
There is a function that implements some common operations the application will often use. The IsValidResponse function, implemented in Listing 5, will interrogate a response from the server and decide if the response is useable by a callback function.

This function will make sure the response and its contained value are valid. If it finds a valid state, the function will return true. If the response is invalid somehow, or there was an exception thrown on the server, the function will return false. In the case of an exception, the response includes an error object and the exception information may be displayed to the user.

Previous Page

Next Page