AJAX enabled web page design and beginner’s concept

The ASP.NET AJAX framework enables developers to create rich, interactive, highly personalized web applications that are cross-browser compliant


The ASP.NET AJAX framework enables developers to create rich, interactive, highly personalized web applications that are cross-browser compliant. Framework is an Ajax library. The truth is, it’s primarily an Ajax library, but it offers many other features that can increase the productivity and quality of your web applications.

The library consists of a set of JavaScript files that can be used independently from the server features. In previous versions of ASP.NET AJAX, when it had the codename Atlas,

ASP.NET AJAX-enabled web pages are written in HTML, JavaScript, and a new XMLbased, declarative syntax called XML Script.


ASP.NET AJAX server controls:

The first of these controls is the ScriptManager, which is considered the brains of an Ajax-enabled page. The second control, named the UpdatePanel, is used to define the regions on the page that are designated for partial updates. These two controls work together to greatly enhance the user experience by replacing traditional postbacks with asynchronous postbacks. This results in regions of the page being updated incrementally rather than all at once with a full page refresh.


The first step in every ASP.NET web development endeavor is creating the initial website. To get started, launch Visual Studio 2005 (or the free Visual Web Developer 2005), and select the ASP.NET AJAX-Enabled Web Site template from the New Web Site dialog .This creates a site that references the ASP.NET AJAX assembly System.Web.Extensions.dll from the Global Assembly Cache (GAC). It also generates a complex web.config file that includes additional settings for integration with the ASP.NET AJAX framework.

The initial site created from the template is all you need for this example and for a majority of ASP.NET AJAX applications that you’ll build.

You can download the ASP.NET AJAX Extensions installer from the official website at http://ajax.asp.net.

Once you’ve downloaded the ASP.NET AJAX Extensions installer, you can launch it by double-clicking the executable file.

The installer copies the necessary files to the default installation directory, which is the following:

C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025

The installation folder has the same name as the current version number.

If you browse to the installation folder, you’ll find the following

The Microsoft Ajax Library files, stored in the MicrosoftAjaxLibrary
The System.Web.Extensions and System.Web.Extensions. assemblies, which contain the ASP.NET AJAX server framework
A web.config file already configured for ASP.NET AJAX



After installation, the System.Web.Extensions assembly is automatically added to the Global
Assembly Cache (GAC) by the installer.

For this reason, there’s no need to reference it in a website’s bin folder. The Microsoft Ajax Library files are also embedded as web resources in the System.Web.Extensions assembly

To configure an ASP.NET AJAX-enabled website, the only thing you have to do is use the web.config file found in the installation directory. If you’re upgrading an existing website, you have to copy all the settings of the web.config file found in the installation directory (C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025) to the web.config file of the website to upgrade.

Now I have created this AJAX enable web page to see the difference after using AJAX:

AjaxPage1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPage1.aspx.cs" Inherits="AjaxPage1" %>

<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptLocalization="true">
        </asp:ScriptManager>
        <div style="border: 1">
            First panel will be refresh(Partial-page updates):
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="NewsTimer" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <div>
                        Music List:
                        <asp:DropDownList ID="Genres" runat="server" AutoPostBack="True">
                            <asp:ListItem Text="Rock" />
                            <asp:ListItem Text="Jazz" />
                            <asp:ListItem Text="Blues" />
                        </asp:DropDownList>
                    </div>
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                            <%--<img src="images/indicator.gif" alt="" />&nbsp;--%>
                            Loading ...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    Last Updated:
                    <%= DateTime.Now.ToLongTimeString() %>
                    <asp:Timer ID="NewsTimer" runat="server" Interval="5000" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <hr />
        <div style="border: 1">
            Second panel will be refresh(Partial-page updates):
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div>
                        Music List:
                        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
                            <asp:ListItem Text="Rock" />
                            <asp:ListItem Text="Jazz" />
                            <asp:ListItem Text="Blues" />
                        </asp:DropDownList>
                    </div>
                    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
                        <ProgressTemplate>
                            <%--<img src="images/indicator.gif" alt="" />&nbsp;--%>
                            Loading ...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    Last Updated:
                    <%= DateTime.Now.ToLongTimeString() %>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnClick1" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:Button ID="btnClick1" Text="Click1" runat="server" />
        </div>
        <hr />
        Page will be refresh:
        <asp:Button ID="btnClick2" Text="Click2" runat="server" />
    </form>
</body>
</html>

No comments:

Post a Comment

Flipkart