Beginning Ajax with ASP.NET- P17 doc

This allows the page to time out before the server is done processing, and you see how the framework will notify the user of a timeout.. Example 4: PanelUpdater Control Periodic Refresh

Switch back to the design view and double-click the btnLongRequestbutton This action will switch you to the code window and wire up a button click event method

Update the Managerclass by inheriting from the ComfortASP.ComfortASP_Pageclass The only other changes required for this demonstration are to add a short delay when the button is clicked and to print

a message on the label when the request is completed

Notice that you are not setting the page’s HiddenFormPostBackproperty The ComfortASP.NET

Managercontrol is responsible for notifying the application that this page is Ajax-enabled.

public partial class Manager : ComfortASP.ComfortASP_Page

{

protected void Page_Load(object sender, EventArgs e) {

}

protected void btnLongRequest_Click(object sender, EventArgs e) {

System.Threading.Thread.Sleep(5000);

this.lblResult.Text = “Done”;

} }

Now run the page to demonstrate its behavior

Experiment with the manager settings by changing the HiddenRequestTimeoutproperty to 3 in the ASPX file This allows the page to time out before the server is done processing, and you see how the framework will notify the user of a timeout Change the DisableFormWhilePostBackproperty, and note how the controls on the page are no longer disabled when you make a call to the server Finally, you can see the effect of the TransferDifferenceproperty by setting it to falseand clicking on the button The ComfortASP.NET demo version includes a bar graph that represents the amount of information sent across the wire When TransferDifferenceis turned off, you can see by the graph how much more data is transported to the client

Example 4: PanelUpdater Control (Periodic Refresh)

The ComfortASP.NET PanelUpdateris a control that allows you to target specific areas of a page to update You may decide that you want to change the contents of a section of your page, but the rest of the page should remain unchanged The PanelUpdaterwraps up many of the implementation details, allowing you to easily access page segments

The PanelUpdaterworks by being nested within an ASP.NET Panelcontrol The panel acts as the overall container and the PanelUpdater, simply by being placed inside the panel, will expose the con-tainer to ComfortASP.NET The control exists on the page to service interaction between the browser and the server and will not render anything visible to the user

The ComfortASP.NET PanelUpdateris associated to its parent panel, so you may have multiple Panel/PanelUpdatercombinations on a single page

Imagine for a moment that you want to create a page that will continually engage with the server to see

if there are new messages available for the user The PanelUpdateris a perfect choice for a requirement like this for two reasons:

❑ Reason one is that the control will allow you to target a portion of the page and allow the system

to update only that region of the page you have specified

❑ Reason two is that the PanelUpdaterfeatures a timer interval that, once set, will instruct the

control to send requests to the server at every n number of seconds This pattern is known as the

Periodic Refresh pattern, and you will also implement this same behavior in the next section, using MagicAjax

The following example implements a page with the requirements just described Figure 9-5 is an example

of how the finished product will look

Figure 9-5

The ComfortASP.NET demo version will automatically print the bar graph at the top of the page, indicat-ing the amount of data transferred with a link back to the ComfortASP.NET web site The full version does not have this feature.

The page includes a panel that will contact the server every 3 seconds to update the page with the new message count

Try It Out Using PanelUpdater Control

Begin by adding a new web form to the solution, naming it PanelUpdater.aspx Make sure that you are

in source view, and add the following line after the Page directive line found at the top of the ASPX page

<%@ Register Assembly=”ComfortASP” Namespace=”ComfortASP” TagPrefix=”cc1” %>

The Register tag will make the ComfortASP.NET framework available to the page

Continue by adding the following markup between the <div>tags:

<asp:Panel ID=”pnlContent” runat=”server”>

<cc1:ComfortASP_PanelUpdater ID=”ComfortASP_PanelUpdater1”

TimerIntervalUpdate=”3”

Active=”True”

runat=”server” />

Message Count:

<asp:Label ID=”lblMessageCount”

runat=”server” />

</asp:Panel>

The ASP.NET panel is the container for the section of the page to update The ComfortASP.NET

PanelUpdatercontrol will handle generating the client-side code to create the timeout behavior Be sure

to activate the PanelUpdaterby setting the Activeproperty equal to true The TimerIntervalUpdate property will take a value for the number of seconds you want the browser to wait before contacting the server Finally, the label at the end of the listing will take the latest information from the server and print the message count back to the user

Now switch to the code window to update the PanelUpdaterclass

public partial class PanelUpdater : ComfortASP.ComfortASP_Page

{

private int MessageCount {

get {

if (this.ViewState[“messageCount”] == null) {

return 0;

} else { return Convert.ToInt32(this.ViewState[“messageCount”]);

} } set { this.ViewState.Add(“messageCount”, value);

} }

protected void Page_Load(object sender, EventArgs e) {

this.HiddenFormPostBack = true;

this.UpdateMessageCount();

}

private void UpdateMessageCount() {

this.MessageCount++;

this.lblMessageCount.Text = this.MessageCount.ToString();

} }

As always, the class will inherit from ComfortASP.ComfortASP_Page instead of System.Web.UI.Page You will Ajax-enable the page by turning on HiddenFormPostBackproperty in the load method The MessageCountproperty is a strongly typed wrapper to a ViewStateentry that persists the message count If the ViewStateentry does not exist, the wrapper will initialize the value to 0 Finally, the UpdateMessageCountmethod will simply increment the MessageCountproperty and report the new count to the label on the page

You can now run the page to demonstrate its behavior

What You Have Learned

The ComfortASP.NET framework is an Ajax library that is unobtrusive for a NET developer The frame-work allows you to implement Ajax functionality in your ASP.NET pages without having to manually code JavaScript or deal with XML ComfortASP.NET also features a number of useful controls that allow you to administer the framework’s settings and behaviors from a centralized location

MagicAjax

URL: www.magicajax.net MagicAjax is a panel-based, changed-HTML framework that makes it easy for you to add Ajax function-ality to your ASP.NET applications The architects of MagicAjax created a framework that integrates into your application with a light touch Once the site is configured to communicate with MagicAjax, most Ajax functionality can be achieved by adding a MagicAjax Panel to the page You do not have to inherit from a base class, nor are there any custom controls to declare Other than adding the MagicAjax Panel

to your page, the ASPX and code-behind code is unchanged from how you would write your pages in the traditional postback model

Setup

Before you begin using MagicAjax, you must first download the files and then reference them in a web pro-ject The following steps help you build a solution that houses all the samples you create for the MagicAjax

Downloading Files

1. If you haven’t already done so, download the zip file containing the MagicAjax DLL from http://beginningajax.com/downloads/chapter9/Chapter9-Framework DLLs.zip

2. Extract the files and place them in a convenient location

Creating the Solution

1. Open Visual Studio 2005

2. Click File➪New➪Website

3. Select the ASP.NET Website template.

4. Choose File System under location

5. Set the path to c:\BeginningAJAX\Chapter9\MagicAjaxDemo

6. Choose C# as the language

7. Click OK.

Referencing ComfortASP.NET

1. In the Solution Explorer, right-click on the project name and select Add ASP.NET Folder.

2. Choose App_LocalResourcesto create the ASP.NET folder

3. Copy MagicAjax.dll(from the zip file you extracted) to the App_LocalResourcefolder

4. Create a reference to the MagicAjax.dll

Updating Web.Config

Open the Web.Configfile and add the following code just after the open <system.web>tag:

<pages>

<controls>

<add namespace=”MagicAjax.UI.Controls”

assembly=”MagicAjax” tagPrefix=”ajax”/>

</controls>

</pages>

<httpModules>

<add name=”MagicAjaxModule”

type=”MagicAjax.MagicAjaxModule, MagicAjax”/>

</httpModules>

Your application is now configured to use MagicAjax

Using MagicAjax

Now that you have MagicAjax set up on your machine, you may begin implementing the examples Each example will expose a new layer of the MagicAjax framework giving you a taste of the library’s

features and strengths The coming examples will demonstrate some of MagicAjax stock capabilities as well as a providing few more involved examples to show you how you might use these techniques in the real world

Example 1: Hello World Your MagicAjax examples begin with a Hello World page With no base class to inherit from and the Web.Configsettings exposing the framework to each page, the page-level configuration is minimal To give a MagicAjax page asynchronous functionality, you simply must declare some ASP.NET controls inside

a MagicAjax Panel This exercise is much like the page you implemented for the ComfortASP.NET frame-work in that a button click will initiate a request to the server, which in turn will return fresh data to the client, all without a postback

Figure 9-6 is a screenshot of what the page will look like

Figure 9-6

When you click the Test button, the text “Hello World” plus the current date and time is returned to the browser

Try It Out Implementing “Hello World”

Begin by adding a new web form to the solution and name it HelloWorld.aspx Switch to source view, and add the following markup between the <div>tags:

<ajax:ajaxpanel ID=”Ajaxpanel1” runat=”server”>

<asp:Button ID=”Button1”

OnClick=”Button1_Click”

Text=”Test”

runat=”server” />

<asp:Label ID=”Label1”

runat=”server” />

</ajax:ajaxpanel>

The reason you do not have access to IntelliSense for the ajaxpanelis that you used a configuration option that added the MagicAjax functionality to each page in Web.Config If you were to change the configuration to use a Registerdirective, then you would see the IntelliSense listings.

Now switch to the code view, and update the HelloWorldclass

public partial class HelloWorld : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e) {

} protected void Button1_Click(object sender, EventArgs e) {

this.Label1.Text = “Hello World “ + DateTime.Now.ToString();

} }

Notice that there is no change to the code-behind as compared to a normal ASP.NET implantation with

postbacks MagicAjax.NET does all the work by adding the controls into an ajaxpanel

You can now launch the page in a browser to test its behavior

Example 2: Delay

Every Ajax framework must deal with the likely event that the server will take a few (or perhaps more) seconds to complete a given command When your application experiences such a delay, you must pro-vide feedback to the user to give them a clue of what is happening MagicAjax propro-vides a “Loading ” message out of the box to help you keep your users informed of what is happening on the page This next example will force the server to wait 5 seconds before returning data to the server This delay will give you an opportunity to see how MagicAjax responds to such a hesitation

Figure 9-7 is a screenshot showing what the “Loading ” message looks like

Figure 9-7

Try It Out Demonstrating the Delay Message

Add a new web form to the solution, and name it Delay.aspx Open the source view of the page and update the markup between the <div>tags with the following code:

<ajax:AjaxPanel ID=”AjaxPanel1” runat=”server”>

<asp:Button ID=”btnDelay”

Text=”Delay”

OnClick=”btnDelay_Click”

runat=”server” />

<asp:Label ID=”lblDelay”

runat=”server” />

</ajax:AjaxPanel>

Now switch to the code view to update the Delayclass

public partial class Delay : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e) {

} protected void btnDelay_Click(object sender, EventArgs e) {

System.Threading.Thread.Sleep(5000);

this.lblDelay.Text = “Done”;

} }

When you click the Delay button, the server will hesitate for 5 seconds displaying the MagicAjax

“Loading ” message at the top right of the screen

You can now launch the page in the web browser to test its behavior

Example 3: Ajax Call Helper (Periodic Refresh)

If you recall from the examples in the ComfortASP.NET section, you created a page that implemented the Periodic Refresh pattern The next example will teach you how to implement the same behavior using MagicAjax

The design goals are the same; create a page that will check the server for changes in data at a regular interval without requiring the user to initiate the request The page in this example will use MagicAjax’s AjaxCallHelperclass This class has utilities that help automate your Ajax development For this example, you will use the SetAjaxCallTimerIntervalmethod, which will register a timeout on the

browser and create a request to the server every n seconds.

Figure 9-8 is a screenshot showing what the page will look like when you are done

Try It Out Using the Ajax Call Helper

Begin by adding a new web form to the solution, and name it AjaxCallHelper.aspx Switch to source view, and update the page with the following markup between the <div>tags:

<ajax:AjaxPanel ID=”AjaxPanel1” runat=”server”>

Message Count:

<asp:Label ID=”lblMessageCount”

runat=”server” />

</ajax:AjaxPanel>

The ASPX code in this example is straightforward You create a label to hold the current count and place

it inside a MagicAjax Panel

Figure 9-8

Now switch to the code window to update the AjaxCallHelperclass

public partial class AjaxCallHelper : System.Web.UI.Page {

private int MessageCount {

get {

if (this.ViewState[“messageCount”] == null) {

return 0;

} else { return Convert.ToInt32(this.ViewState[“messageCount”]);

} } set { this.ViewState.Add(“messageCount”, value);

} }

protected void Page_Load(object sender, EventArgs e) {

if (!this.Page.IsPostBack) {

MagicAjax.AjaxCallHelper.SetAjaxCallTimerInterval(5000);

} this.UpdateMessageCount();

}

private void UpdateMessageCount() {

this.MessageCount++;

this.lblMessageCount.Text = this.MessageCount.ToString();

} }

If you implemented the ComfortASP.NET demo, this code is familiar to you The MessageCount prop-erty encapsulates the ViewStatecontainer for the number of messages for this series of requests Upon the first request to the page, you register a timeout on the browser by using the SetAjaxCall TimerIntervalmethod This command will take care of rendering all the appropriate JavaScript to the page to fire a request to the server every 5 seconds

When the page is in “postback” mode, the message count increments and the label is updated

Now launch the page in a browser to test its behavior

Example 4: Direct Scripting (Micro-content)

In previous examples, you saw how the ASP.NET page event lifecycle is preserved by MagicAjax, allow-ing you to make drastic changes to a page’s contents usallow-ing Ajax and doallow-ing it all from code-behind This model is powerful and will probably aid you in most of your Ajax development, but what if you need to create interaction on the page that is not native to the ASP.NET architecture? What if you want to update

an element on the page when the user clicks away from the control?

The following steps walk you through the process of creating a page that allows a user to directly edit text on the page For example, when the user encounters the page title, he or she may click on the title text, edit its contents, and continue browsing In the background, the page recognizes the change and

is responsible for contacting the server to persist the latest data

The Ajax design pattern being implemented in this example is called micro-content The micro-content

pattern states that certain areas of a page may be editable by the user without having to manually switch the page into an “edit mode” by clicking on buttons or changing page locations Small or “micro” areas

of the content on the page are open for the user to edit simply by clicking on the text You will often see this pattern implemented in wikis that are Ajax-powered

This exercise will make use of not only MagicAjax but also some custom Cascading Style Sheet definitions

to power the change in the user interface to give clues as to what is happening

Figure 9-9 is a screenshot of how the user will first encounter the page

The page will provide initial clues that parts of the page are editable by drawing a border over the text when the cursor hovers over the editable area Figure 9-10 shows how the control will look when the mouse is hovering over the control