Ajax ASP

Ajax in ASP.
NET
AJAX
• Asynchronous JavaScript and XML
AJAX script is usually written in javascript

using calls on an XML object called
XMLHttpRequest (part of XML DOM)
data is requested from the server

and loaded in the background
without interfering with the display
and behavior of the existing page
ASP.NET AJAX
• ASP.NET AJAX is Microsoft’s implementation of
AJAX framework.
• ASP.NET AJAX enables partial page updates
through partial page post back operations.
• Consists of two parts
• client-script libraries
• server components
• ASP.NET AJAX Control Toolkit
• ASP.NET AJAX is built-into ASP.NET 3.5. It is
also available as a separate download for
ASP.NET 2.0.
Installation for VS 2005 (.NET 2.0)
• Download and install ASP.NET AJAX 1.0 
ASPAJAXExtSetup.msi
• Core
• AJAX extensions
• System.Web.Extensions.dll
• AJAX libraries
• System.Web.Extensions.Design.dll
Creating AJAX enabled web site
• Create a new web site and select ASP.NET
AJAX enabled web site.
AJAX server components
Default page is AJAX enabled!
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default" %>
…
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
…
•ScriptManager is required for ASP AJAX functionality.
•Maintains client side references to the AJAX JavaScript files
(which is produced by ASP.NET AJAX assembly)
•Every page that uses AJAX must have this tag
AJAX in action
• We will create a page which has
• Partial update part
• a textbox that will accept a string
• A label
• A button, on clicking which label will display
‘hello <string entered in the text box>
• Non partial update part
• Displaying date and time when the page is
loaded.
Creating a page without ajax
• Remove the ScriptManager tag from the current
page or create a new ASP page.
• First drag and drop controls and make sure that every
time you click button, the page loads the data and time
is updated.
protected void Page_Load(object sender,
EventArgs e {
Label2.Text = DateTime.Now.ToString();
}
protected void Button1_Click(object
sender, EventArgs e) {
Label1.Text = "hello " +
TextBox1.Text;
}
Page without AJAX in execution
AJAX enabling the page
• Make sure that you have
<asp:ScriptManager
ID="ScriptManager1" runat="server"
/> in the page.
• If it is not there drag and drop it.
• Drag and drop the Update Panel and move the
‘Partial update part’ into the Update Panel.
• Execute and Test.

Still the same!
Behind the screen
• The UpdatePanel control is a way by
which a section of the page can be
marked so that it can be updated
independently.
• Any controls that causes post backs will
not cause a full page post back. It will
update only those contents within the
UpdatePanel.
What happened to our code?
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1"
runat="server“/>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox><asp:Button
ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
<br/>
<asp:Label ID="Label1" runat="server"
Text="hello" Width="135px"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server"
Text="Label“
Width="144px"></asp:Label> </div>
</form>
Triggers
• If the partial page section need to be
refreshed and the control that triggers the
partial page refresh is not inside the
UpdatePanel, then the whole page will
refresh when the event of the control
triggers.
• This is solved using a trigger.
• Let us understand this with an example…
We will create a page that has
GridView and DetailsView both
of them linked to same data
source
GridView shows data based on
query and Details view is used
for insert.
When Grid View is updated the
Details View part of the page
should not be refreshed.
The Query paramters for the
Grid view will be outside the
UpdatePanel. Here is where we
will use the Trigger.
Triggers example
• Drag and drop a DataSource control that
contains any table. (For the demo we will use
Dict table that contains words and meanings
fields with some data).
• Drag and drop a textbox and a button.
• In the select statement provide the query as
shown below
• Drag a GridView and link it to the DataSource.
• Set the insertQuery property of DataSource as

shown below.
• Drag a DetailedView and configure it with the
DataSource.
• Enable insert and set the DefaultMode property
of to ‘Insert’
Execute and make sure that the page updates

completely when any one of the control is
required to be refreshed.
Put this view on the
top so that you
notice the change
Now drag and drop the

UpdatePanel and copy paste the
Grid into it.
Set the Triggers by
Right clicking the
UpdatePanel and
setting the Buttons
click event.
With ajax
What happens behind the scenes
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="word"
DataSourceID="SqlDataSource1">
…
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="Button1" EventName="Click"
/>
</Triggers> </asp:UpdatePanel>
Execute, Test and make sure that the page updates only
partially.

Ajax ASP

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ajax ASP

Загружено:

Авторское право:

Доступные форматы

Ajax in ASP.

• Asynchronous JavaScript and XML

AJAX script is usually written in javascript

data is requested from the server

• Execute and Test.

• Set the insertQuery property of DataSource as

Execute and make sure that the page updates

Now drag and drop the

Вам также может понравиться