Making your ASP.net applications AJAX enabled
Asynchronous JavaScript And XML(AJAX),
is an integrated framework for providing incremental page
updates via cross-platform JavaScript, composed of server-side
code comprising the Microsoft AJAX Framework, and a script
component called the Microsoft AJAX Script Library. The ASP.NET
AJAX extensions also provide cross-platform support for
accessing ASP.NET Web Services via JavaScript.
Before we can get started in this tutorial, please make sure that you have installed Ajax extensions. ASP.NET AJAX is built-into ASP.NET 3.5. It is also available as a separate download for ASP.NET 2.0. The extensions can be downloaded from:
http://www.asp.net/ajax/downloads/
In this tutorial we will learn how to make a GridView from scratch and then AJAX enable it using the powerful tools provided in Microsoft Visual Studio.
1. Launch Visual Studio. Go to File -> New website. Select AJAX enabled site from the new windows.
2. Go to the Source View of your file. It should look something like this:
Before we can get started in this tutorial, please make sure that you have installed Ajax extensions. ASP.NET AJAX is built-into ASP.NET 3.5. It is also available as a separate download for ASP.NET 2.0. The extensions can be downloaded from:
http://www.asp.net/ajax/downloads/
In this tutorial we will learn how to make a GridView from scratch and then AJAX enable it using the powerful tools provided in Microsoft Visual Studio.
1. Launch Visual Studio. Go to File -> New website. Select AJAX enabled site from the new windows.
2. Go to the Source View of your file. It should look something like this:
<%@ Page Language="VB" AutoEventWireup="true"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
</form>
</body>
</html>
The highlighted tag you see above is the script manager.
It must be added on all AJAX enabled pages.
3. We need a table in our database which we can use in our tutorial. Go to your database and create a table. In this example we use a table called 'employees' which looks like this:
3. We need a table in our database which we can use in our tutorial. Go to your database and create a table. In this example we use a table called 'employees' which looks like this:
4. In the design view of your page add a
DropDownList into your page and from
the edit items add two item which should be
"Yes" and "No"
5. Go back to the design view of your page and add a GridView Control from the Data as shown below:
5. Go back to the design view of your page and add a GridView Control from the Data as shown below:
6. Now click on the small square arrow button on the right side of your GridView.
From the Choose Data Source drop down
list select <New Data Source>...
Select the Datasource, make a new connection string and add a
query which in the end should look like this:
SELECT * FROM [employees] WHERE ([active] = @active)
Now you can test the page if it is working.
At this point please make sure that
DropDownList is set to Enable
AutoPostBack
7. Now for the main part of enabling AJAX on our application. From the AJAX Extensions Pane add Update Panel contol into your page.
8. Now you have to move your GridView control to this newly added Update Panel so that your code looks like this:
7. Now for the main part of enabling AJAX on our application. From the AJAX Extensions Pane add Update Panel contol into your page.
8. Now you have to move your GridView control to this newly added Update Panel so that your code looks like this:
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" ReadOnly="True"
SortExpression="id" />
<asp:BoundField DataField="employee_name" HeaderText="employee_name"
SortExpression="employee_name" />
<asp:BoundField DataField="position" HeaderText="position"
SortExpression="position" />
<asp:BoundField DataField="active" HeaderText="active"
SortExpression="active" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" ReadOnly="True"
SortExpression="id" />
<asp:BoundField DataField="employee_name" HeaderText="employee_name"
SortExpression="employee_name" />
<asp:BoundField DataField="position" HeaderText="position"
SortExpression="position" />
<asp:BoundField DataField="active" HeaderText="active"
SortExpression="active" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
In the above code we added the GridView control inside the <contenttemplate>
tag.
DropdownList1 is added inside the <triggers> tag of this update panel.
This tutorial examines the Triggers functionality of the ASP.NET AJAX UpdatePanel component. XML Triggers give granular control over the components that can cause partial rendering for specific UpdatePanel controls.
DropdownList1 is added inside the <triggers> tag of this update panel.
These extensions enable many new rich client features, including partial rendering of pages without requiring a full page refresh, the ability to access Web Services via client script (including the ASP.NET profiling API), and an extensive client-side API designed to mirror many of the control schemes seen in the ASP.NET server-side control set.
This tutorial examines the Triggers functionality of the ASP.NET AJAX UpdatePanel component. XML Triggers give granular control over the components that can cause partial rendering for specific UpdatePanel controls.
