Beruflich Dokumente
Kultur Dokumente
NET
AJAX
• 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.
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.