ASP.NET AJAX Web Form Generation at Run time
ASP.NET AJAX consists of client-script
libraries and server components that are integrated to provide a robust
development framework, which allow us to build rich client applications quickly
and easily.
Whenever a postback happens in a normal ASP.NET page the whole ASP.NET page will be refreshed.
But AJAX Enabled ASP.NET web page will enable partial rendering of a web page as the result of an
asynchronous postback.
Creating a Basic AJAX Web Form declaratively is very easy and looks like code bellow:
<%@
Page Language="C#"
%>
<html
xmlns="http://www.w3.org/1999/xhtml">
<body>
<form
id="form2"
runat="server">
<div>
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
<Scripts>
<asp:ScriptReference
Path="clientscript.js"
/>
</Scripts>
<Services>
<asp:ServiceReference
Path="WebService.asmx"
/>
</Services>
</asp:ScriptManager>
</div>
<asp:UpdatePanel
ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Label
ID="Label1"
runat="server"
Text="Label"></asp:Label>
<asp:Button
ID="Button1"
runat="server"
onclick="Button1_Click"
Text="Button"
/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="Button2"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
<asp:Button
ID="Button2"
runat="server"
Text="Button"
/>
</form>
</body>
</html>
But, in Some situations we need to create some of
the Web Controls which make the AJAX Web Form dynamically at runtime. in
these scenario's we need to follow some basic steps.
Dynamically generating a htmlForm and adding Controls
HtmlForm class is used to generate a Web Form
dynamically as below. Any control which needs to be generated dynamically at
runtime is needs to be created in the PreInit event of the Page class.
Don't initiate any values for controls here, because if the request is a postback, the values
of the controls have not yet been restored from view state. If you set a control
property at this stage, its value might be overwritten in the next event.
protected
void Page_PreInit(object
sender, EventArgs e)
{
HtmlForm form = new
HtmlForm();
Label label = new
Label();
form.Controls.Add(label);
this.Controls.Add(form);
}
How to dynamically generate a ScriptManager Control
A ScriptManager control is needed on every page that would support partial-page rendering.
Instead of adding it to every page we can create it in a Base class and derive
all of the web pages from it which needs to support asynchronous postback's.
The ScriptManager control keeps track of all the update panels on the page and of their
triggers. It coordinates partial-page rendering behavior on the server, and
determines which sections of the page to render as a result of an
asynchronous postback. It makes script resources available to the browser
including ASP.NET AJAX library.
We need to ensure whether the page is
currently having any ScriptManager before generating a new one. You should not add a control directly to a Web Form because
the code generated for the control will be inserted at the end of the HTML stream or just after the
</html> closing tag. Either we need to add the control to a PlaceHolder
control which is already defined or add it to the HtmlForm control of the page.
ScriptManager control needs to be the first control of the HtmlForm. We need to
set the EnablePatialRendering to true then only it will enable partial
rendering.
protected
void Page_PreInit(object
sender, EventArgs e)
{
if (ScriptManager.GetCurrent(this.Page)
== null)
{
ScriptManager SManager =
new ScriptManager();
SManager.EnablePartialRendering = true;
foreach (Control
c in this.Controls)
{
if (c is
HtmlForm)
{
c.Controls.AddAt(0, SManager);
}
}
}
}
Creating UpdatePanel Control Programmatically
An UpdatePanel control is used to refresh selected parts of the page instead of refreshing
the whole page, with an asynchronous postback. A Web page that contains a ScriptManager control and one or more UpdatePanel
controls can automatically participate in partial-page updates, without custom client script.
To add an UpdatePanel control to a page at runtime, create a new instance of the UpdatePanel control. Then
add controls to it by using the ContentTemplateContainer property and the AddControl() method.
When an UpdatePanel control is added programmatically, only postbacks from
controls in the same naming container as the UpdatePanel control can be used as
triggers for the panel.
If the updatepanel's are not nested we can update each panel independently by setting the UpdateMode property to
Conditional. The default value of the UpdateMode property is Always. This causes
the panel to refresh in response to any asynchronous postback occured on the whole page.
UpdatePanel
UPanel = new
UpdatePanel();
UPanel.ContentTemplateContainer.Controls.Add(label);
UPanel.ContentTemplateContainer.Controls.Add(button);
UPanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
How to Create AsyncPostBackTrigger's and Register them with the UpdatePanel
Controls that trigger an UpdatePanel control to refresh are registered with
the ScriptManager control on the page. This occurs automatically for the child
controls that are part of an UpdatePanel control's ContentTemplate. But if any Control which
is out side of the UpdatePanel and wants to trigger the UpdatePanel, we
need to use the RegisterAsyncPostBackControl(Control) method of the ScriptManager control to
programmatically register a postback control and then call the Update() method
of the UpdatePanel when the control posts back. Programmatically adding AsyncPostBackTrigger
controls is not supported.
protected
void Page_Load(object
sender, EventArgs e)
{
SManager.RegisterAsyncPostBackControl(linkButton);
}
private
void lb_Click(object
sender, EventArgs e)
{
label.Text =
label.Text + System.Environment.NewLine +
"-->Link Button Clicked";
UPanel.Update();
}
Registering Web Services
Microsoft ASP.NET AJAX enables you to call ASP.NET Web services (.asmx files) from the browser by using client
script. This enhances the user experience for the Web application. The ASP.NET AJAX framework generates a client proxy
object for each ServiceReference object in the Services collection. The proxy classes and
their strongly typed members simplify using Web services from client script. Proxy classes are derived from the
Sys.Net.WebServiceProxy class.
Keeping web service url's in web.config file makes it easier to change the web services dynamically without recompile.
The ScriptManager control's Services collection contains a ServiceReference object for each Web service that is registered
with the ScriptManager control. We can programmatically add ServiceReference objects to the Services collection
to register Web services at run time so that we can change the web services dynamically with out recompiling.
WS =
new ServiceReference(@"~/WebService.asmx");
SManager.Services.Add(WS);
Registering Custom Script
ScriptManager control is used to manage resources for
controls that participate in partial-page updates. Resources include scripts,
styles, hidden fields, and arrays. The Scripts collection of the ScriptManager
control contains a ScriptReference object for each script that is available to
the browser. You can specify the scripts declaratively or programmatically as
following.
ScriptReference
SR = new
ScriptReference();
SR.Path =
@"~/ClientScript.js";
SManager.Scripts.Add(SR);
This tutorial is written by
RELIANCE CONSULTING. |
