Add Element Methods
method. Using element methods will clean up your code and help you avoid redundancy. Listing 6
shows an example of how to use these functions.
Create an element method for each of the controls you will access on the page. Notice, just as in the standard .NET code behind variables, you'll name your element methods the same as the element ID defined in the HTML.
Add Behavior Methods
The next set of functions you will add perform the work of finding the tasks and either updating or deleting the objects from the collection. These functions are responsible for using the functions I created in the code behind in Listing 6
function shown below passes in the task ID to the server-side method of the same name. Once the client recognizes a response, it calls the GetTaskById_CallBack
task = response.value;
hdnId().value = task.Id;
txtTitle().value = task.Title;
txtDescription().value = task.Description;
alert("Task not found.");
function first uses the IsValidResponse
method takes the Task ID as the only argument. This method will then contact the server and run the implementation for DeleteTask
server-side. Remember that the server will return the updated collection when an item is deleted from the list. With the collection returned from the server, you do not need to write any additional code to finish this process-all you need to do is to display the task information to the user. The GetTasks_CallBack
method works perfectly in this instance. GetTasks_CallBack
will pass the response to the LoadTasks
method, which will apply the template to each task item and display the update list to the user.
divTaskInput().style.display = "none";
calls the GetTaskById
method you already implemented. This will find the task and display the values in the input controls on the page. Next the input box is displayed to the user by setting the DIV
's display property off the style object equal to block, thus showing the box to the user. Finally, the method sets focus to the title control to make editing the task easy for the user.
Implement the Task Editor Controls
Now you must implement the behavior that will send changes to the server to update the collection store.
The following instructions will direct you to implement the Save and Close buttons in the task editor. The last feature you'll add to the application is the ability to add a task. The following code will implement some of this logic as the Save
method is concerned with saving task data whether or not it is a new task or an update to a task.
Update TaskCollection Class
Adding the UpdateTask
method as shown below requires the task ID, the update title value, and the updated description value as arguments.
public bool UpdateTask(Guid id, string title, string
bool success = false;
foreach(Task task in this)
if(task.Id == id)
task.Title = title;
task.Description = description;
success = true;
Once the desired task is located in the collection the updates are made to the title and description.
If the task is found the method returns true
, if the task is not in the list the method returns false
Update _default Class
Adding the EditTask
method requires the task ID, title, and description as arguments. Please notice that I put the call to System.Threading.Thread.Sleep(5000)
in this method simply for demonstration purposes. Calling the Sleep
method will force the application to wait for five seconds before continuing on with its processing. This simulates a long server-side transaction and shows how the browser can deal with that type of latency. Finally, the data received by the page is passed to the Task object to update the task.
public bool EditTask(string id, string
title, string description)
// The following line is for
// demo purposes only
gId = new Guid(id);
method creates a new task object from the passed in title and description and then adds the new object to the task collection.
public bool AddTask(string title,
// The following line is for demo
// purposes only
task = new
Remember that the Save button persists task information on the server whether or not a task is new or recently edited. The order of business is to decide if the task is new or if the user clicked the edit link.
When the edit link is clicked the task information is queried on the server and the values are filled in the input controls.
method shown below handles the logic to save task information on the server.
if(hdnId().value != "")
divTaskInput().style.display = "none";
divStatus().style.display = "block";
If the task ID hidden control has a value, then the application knows that it's dealing with an existing task. The EditTask
method on the server is then called, passing in the task ID and the updated title and description. The final argument directs the browser to call EditTask_CallBack
when it recognizes a response from the server.
method checks for a valid response, hides the status message, and then loads the updated task collection on to the page.
If the page determines the task is new, it calls the AddTask
method on the server. Once the client receives a response from the server the EditTask_CallBack
method is also called for this operation.
Finally, the btnSave_Click
method updates the user interface to hide the task editor and show the status message on the screen. The callback methods hide the status message when the server operation is complete.
method will look for a valid response. If everything went as planned, the status message is hidden and the browser is directed to display the updated task collection to the user.
method simply hides the task editor from the user.
Now when users click the Edit button the task editor will appear. When they click the Save button, a status message appears at the bottom of the browser window that persists until the client hears back from the server indicating the process is complete. Figure 5
shows how the status message will appear at the bottom of the browser window.
|Figure 5: The task system shows a status message at the bottom of the screen during long server-side operations.|
The application can now display the tasks to the user and allow the user to edit and delete tasks. The system is missing one last feature. The next section will grant the user the ability to add a new task to the list.
Implement Add Task
At this point you've written most of the code necessary to make the application work. Adding the "add task" feature from here is easy.
First you want to update the HTML document. Return to default.aspx
, switch to the HTML view, and make the following changes to the file.
The HTML requires adding a link to the page that will tell the application you are creating a new task and then display the task editor to the user.
Locate the point in the file where the H1
and the DIV
identified as divTasks
meet. Place the new line of code shown in the below snippet between these two lines.
The addition of this anchor tag will display an Add Task button to the page and direct the browser to call lnkAdd_Click
when anyone clicks the link.
method will clear the controls in the task editor, priming the system for a new task.
hdnId().value = "";
txtTitle().value = "";
txtDescription().value = "";
method will clear the task editor of any previous values, display the task editor to the user, and set focus to the title control.
divTaskInput().style.display = "block";
You now have a fully functioning task system using the Ajax.NET Framework.
Now that you have had an opportunity to use the Ajax.NET Framework you'll notice that there are a few steps in traditional Ajax development that are unnecessary. When a response is returned from the server you have a response object filled with the returned data. At no time did you have to parse through XML markup or manually poll the server for ready states. The Ajax.NET Framework saves developers time and simplifies the process of creating Ajax applications.