AJAX in practice

AJAX allows web applications to retrieve information and update parts of pages rather than reloading an entire page.

This results in a better user experience and a more efficient application. Applications requiring client functionality utilize two libraries:

  1. MicrosoftAjax.js
  2. MicrosoftMvcAjax.js

ADDING AJAX

Add references to the libraries to an application's views in order to access them in a client script. In the Solution Explorer of Visual Studio, expand the Views folder, and then the Shared folder. Then double-click the Site.Master file. At the end of the head element, add the markup which follows: 

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"
		type="text/javascript"></script>
	<script src="<%=
Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>"
		type="text/javascript"></script>

Another way to add libraries is to simply drag the files from the Solution Explorer to the window after opening the Site.Master view.

Placing AJAX in an application can be achieved by utilizing ASP.NET markup: 

<asp:ScriptManager ID="YourScriptMgr" runat="server">
	<Scripts>
		<asp:ScriptReference Path="./YourScripts.js" />
	</Scripts>
</asp:ScriptManager>

The code above provides access to the control's methods within the application. This style of incorporating AJAX proves useful when an application requires the specificity a toolkit control does not offer. Review the code below to see how this control might be utilized within an application: 

<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Index.aspx.cs" Inherits="The.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>Hi, universe!</title>
</head>
<body>
	<form id="FirstForm" runat="server">
		<asp:ScriptManager ID="PrimaryScriptManager"
runat="server" />
		<asp:UpdatePanel ID="panelHiUniverse" runat="server">
			<ContentTemplate>
				<asp:Label runat="server" ID="labelHiUniverse"
Text="Click the button below." />
				<br /><br />
				<asp:Button runat="server" ID="buttonHiUniverse"
OnClick="buttonHiUniverse_OnClick" Text="The label should update." />
			</ContentTemplate>
		</asp:UpdatePanel>
	</form>
</body>
</html>

The event below must be added to achieve functionality. 

protected void buttonHiUniverse_OnClick(object sender, EventArgs e)
{
	labelHiUniverse.Text = "Hi, universe. It's AJAX via ASP.NET.
Earth Time: " + DateTime.Now.ToLongTimeString();
}

THE AJAX TOOLKIT

The AJAX Control Toolkit provides a number of controls (over 30) covering nearly every critical functionality. Some of the most used of these tools include the following controls:

  1. Slide Show Extender – This control simplifies the creation of a slide show. It only requires providing images using WebMethod.
  2. ScriptManager – This popular control manages script resources related to components of clients, partial rendering of pages, localization, and custom scripts. If the UpdatePanel, Timer, and UpdateProgress controls are used; the ScriptManager control must be used. Client-only applications do not require ScriptManager.
  3. UpdatePanel – This control allows for the updating of specific portions of a page rather than refreshing the entire page through synchronous postbacks.
  4. UpdateProgress – This control delivers information about page portion update status within UpdatePanel controls.
  5. Timer – This control executes postbacks at specified intervals. It can be used to update an entire page, or to partner with UpdatePanel and execute a partial update of a page at specified intervals.
  6. AutoComplete Extender – This control provides autocomplete functionality (in a text box) for the end user.
  7. Modalpopup Extender – This control provides a smooth, clean popup to provide a better user experience for popup events/elements.
  8. Animation Extender – This control simplifies the creation of animations. It provides a number of effects such as fading, resizing, and coloring. All effects can be tied to events.
  9. CollapsiblePanel Extender – This control provides collapsibility for management of screen real estate through hiding unused elements from the user.
  10. Colorpicker Extender – This control simplifies providing a color palette option popup for the end user.
  11. HTML Editor Control – This control provides HTML text editing for end users.
  12. Dynamic Populate Extender – This control simplifies managing pages with substantial dynamic content. It makes loading, hiding, and showing elements unnecessary because it grabs dynamic content when necessary.
  13. Tabs Control – This control simplifies creating tab grouping within pages. It allows simple, logical grouping rather than using HTML and Javascript.
  14. The ListSearch Extender – This control provides list box or dropdown list search functionality for end users. The users enter a few characters to search contents.

Adding a control from the toolkit only requires adding the controls to the toolbox, and then dragging and dropping. Download the ASP.NET AJAX Control Toolkit. In Visual Studio, right-click below the Toolkit tab, select Choose Items, browse to the location of your AjaxControlToolkit.dll file (library file), and simply select the file. The controls will then appear in the toolbox.

« Previous
Next »