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.
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,
Implement the GetTasks Method
|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.
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.
Add the GetTasks
method and include the AjaxMethod attribute.
Edit the HTML
public TaskCollection GetTasks()
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:
<form id="Form1" method="post"
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.
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
include the open and close parenthesis you would normally use with a method call.
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.
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.
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
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.
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.