ASP.NET AJAX – Overview Of The Popular JavaScript Framework

Microsoft’s ASP .NET AJAX was designed to help developers for prompt creation of interactive and efficient Web apps development, as SproutCore. In many respects, ASP .NET AJAX denotes a logical evolution of the old Visual Basic Rapid Application Development model. The AJAX Framework is integrated into ASP.NET 3.5 and is available as well as a separate download for ASP.NET 2.0. Because there are great number of ASP.NET users, Microsoft succeeded to strengthen the popular Web language into the domain of client-side. The core advantages of deploying ASP.NET AJAX to create Web applications involve:

• The Microsoft AJAX Library expands JavaScript objects to add extra functionality as for instance inheritance, enumerations, interfaces, reflection and helpers for arrays and strings, namespace.
• It involves tracing and debugging capabilities.
• Majority of the ASP.NET controls possess AJAX built-in, so the callbacks are not necessary for updating their contents, while reducing JavaScript code.
• The XmlHttpExecutor class facilitates a lot making of server calls deploying AJAX. It performs plentiful functions for implementing GET/POST calls and can manage plain text, XML. JSON, HTML and any other data type that you may wish to send to the page.

Server Controls

The ASP.NET AJAX Framework includes 4 controls in the box: UpdatePanel, Timer, ScriptManager and UpdateProgress.

The ScriptManager Control

The ScriptManager Control represets a non-visual control for handling client scripts in pages of Microsoft ASP.NET AJAX. As well the ScriptManager control adds automatically the Type Extensions that are demanded by client scripts so that to employ the library. They also play a part in features as for example Web service calls and partial-page rendering. Further we overview how the ASP.NET AJAX Library’s client-side script expansions provide extra functionality to JavaScript and produce more consistent language with ASP.NET coding standards. The next example records a Web service and a client script deploying the ScriptManager.

The ScriptManager Control

<form id=”aForm” runat=”server”>
<asp:ScriptManager ID=”ScriptMgr” runat=”server”>
<Scripts>
<asp:ScriptReference path=”MyScript.js” />
</Scripts>
<Services>
<asp:ServiceReference path=”SimpleWebService.asmx” />
</Services>
</asp:ScriptManager>
…
</form>

Notice that the scripts which are registered with the ScriptManager control have to reside between tags <FORM>.

The UpdatePanel Control

The ScriptManager may be added to the UpdatePanel control to execute partial-page updates without the necessity for JavaScript AJAX calls. The regions for dynamic update may be established programmatically or by employing special tags in JavaScript. Whether page participates or not in partial-page updates is defined by the EnablePartialRendering property of the ScriptManager control. The EnablePartialRendering property, by default, is set to true, so for easy adding the control to a page to enable partial-page rendering is enough. You have the choice to deploy a specific trigger to fulfil a refresh – like a button – or update the UpdatePanel control’s content on each callback which arises within the page. To deploy the trigger it is necessary to settle the attribute of UpdatePanel’s UpdateMode to “Conditional”. A concerned attribute that is called ChildrenAsTriggers determines if to trigger or not the callbacks from immediate child the UpdatePanel controls and renew the content of the panel.

The tag <ContentTemplate> specifies the visual content which is to appear within the UpdatePanel control when returned. In the next instance, the Button control will act as a trigger of an asynchronous callback. The attribute of ChildrenAsTriggers isn’t involved as it is true by default:

<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager”
runat=”server” />
<asp:UpdatePanel ID=”UpdatePanel1″
UpdateMode=”Conditional”
runat=”server”>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!– Other content in the panel. –>
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID=”Button1″
Text=”Refresh Panel”
runat=”server” />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

The trigger control is not necessary to be inside the UpdatePanel to result a refresh to the content of the panel. You may choose any control at the page deploying the tag <asp:asynccallbacktrigge> within the <triggers> element. Actually, the tag <trigger> may include a number of controls to perform as triggers. The <asp:asynccallbacktrigger> tag’s parameter of ContolID determines the trigger control’s ID. This example is the same above but this time the button resides out of the UpdatePanel:

<form id=”form1″ runat=”server”>
<div>
<asp:Button ID=”Button1″
Text=”Refresh Panel”
runat=”server” />
<asp:ScriptManager ID=”ScriptManager1″
runat=”server” />
<asp:UpdatePanel ID=”UpdatePanel1″
UpdateMode=”Conditional”
runat=”server”>
<Triggers>
<asp:AsynccallbackTrigger ControlID=”Button1″ />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

The trigger can also be set programmatically through the ContentTemplateContatiner property that demonstrates the tag <ContentTemplate>. The next Visual Basic server script represents its deployment

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()

Dim button1 As Button
button1 = New Button()

up1.ContentTemplateContainer.Controls.Add(button1)
Page.Form.Controls.Add(up1)
End Sub

The UpdateProgress Control

According to the name, the UpdateProgress control ensures status information on partial-page updates in the UpdatePanel control. The UpdateProgress control layout is totally customizable and may be displayed after interruption to stave off flashing with prompt partial-page updates. The UpdateProgress control gives a <DIV> element that become visible in case an associated UpdatePanel control renders an asynchronous server call. It is not displayed if the page loads initially or for synchronous callbacks.

You may bind an UpdateProgress control with a specific UpdatePanel control through setting the AssociatedUpdatePanelID property of the UpdateProgress control. That is also probable to get the UpdateProgress control show the progress for any asynchronous callback at the page.

The element <progresstemplate> includes the message that is displayed by UpdateProgress control that may present HTML, a simple string or any other markup. The next elements demonstrate the way to define a string message for particular UpdateProgress control:

<asp:UpdateProgress ID=”UpdateProgress1″  AssociatedUpdatePanelID=”UpdatePanel1″ runat=”server”>
<ProgressTemplate>
An update is in progress…
</ProgressTemplate>
</asp:UpdateProgress>

Via involving the ScriptManager control, you may deploy JavaScript to operate with UpdateProgress control attributes and events. In the example below, the UpdateProgress control’s message is settled in the InitializeRequest event if the ButtonTrigger discharges the callback:

<script type=”text/javascript”>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);

var callbackElement;

function InitializeRequest(sender, args)
{
callbackElement = args.get_callbackElement();
if (callbackElement.id == ‘ButtonTrigger’)
{
$get(‘UpdateProgress1’).style.innerText = “Updating in progress…”;
}
}

</script>

The Timer Control

The Timer control delivers server calls at appointed intervals. You may deploy the Timer control together with UpdatePanel to periodically trigger partial-page updates or post or refresh the whole page.

The ASP.NET AJAX Control Toolkit

This toolkit presents a project for developing ASP.NET AJAX controls. The Control Toolkit is built on top of the Microsoft ASP.NET AJAX Framework, it renders you a large selection of controls and provides you with the ability to create your own controls from scratch. Many companies are specialized in the ASP.NET controls. According to the next example to add a custom control to the page is easy. Custom Control is registered together with Control Toolkit. The first line records the toolkit and renders a TagPrefix for the control. The following line involves the ScriptManager. Then our control may be utilized in the page through including our TagPrefix, together with the control name:

<%@ Register
Assembly=”AjaxControlToolkit”
Namespace=”AjaxControlToolkit”
TagPrefix=”ajaxToolkit”%>

<!– Add AJAX Script Manager to the page:  –>
<asp:ScriptManager ID=”ScriptManager1″runat=”server”/>

<!– Add our custom control to the page: –>

<ajaxToolkit:ElementPopulater
ID=”dp” BehaviorID=”dp1″ runat=”server”
TargetControlID=”form1$Label1″
ClearContentsDuringUpdate=”true”
ServiceMethod=”GetHtml” />

• Share: