There are many options within the Microsoft stack of products for AJAX type functionality. The following article covers the primary mechanisms that utilize the Microsoft out of the box Ajax functionality. Ajax must be one of the technologies used in all current web applications. The primary benefit is the improved user experience by providing quick, responsive feedback. Core features include Ajax Client Libraries and Ajax Server Controls.
- April 20, 2015
There are many options within the Microsoft stack of products for AJAX type functionality. The following article covers the primary mechanisms that utilize the Microsoft out of the box Ajax functionality. Ajax must be one of the technologies used in all current web applications. The primary benefit is the improved user experience by providing quick, responsive feedback.
Core features include Ajax Client Libraries and Ajax Server Controls. These libraries and controls enable the developer to quickly implement solutions within any ASP.NET application.
I have also included in this article the examples for utilizing the Microsoft AJAX libraries using:
AJAX Client Libraries
Client-Script libraries that provide features for object-oriented development which enable high level of consistency and modularity in client scripting.
Networking layer that handles communication with web based services
Asp.Net AJAX Server Controls
Enables partial page rendering w/UpdatePanel
Creates client side proxies for Web Services
Provides registration methods for scripts
<asp:ScriptManager ID="mng1" runat="server" EnablePartialRendering="true|false" EnablePageMethods="true|false" ScriptMode="Auto|Inherit|Debug|Release" ScriptPath="..."> <Scripts> <asp:ScriptReference Name="script.js" Assembly="..." /> </Scripts> <Services> <asp:ServiceReference Path="~/MyWebService.asmx" /> </Services> </asp:ScriptManager>
Used with Master Pages
If you include the ScriptManager control on the master page, it can act as the ScriptManager control for all content pages. If you want to register scripts or services declaratively in a content page, you can add a ScriptManagerProxy control to the content page.
Improves user experience of application by updating a portion of the web page thereby improving interactivity
By default controls within the update panel can trigger the update. ChildrenAsTriggers property is by default set to true. In our example the link button is within the update panel and so can trigger the partial page update. By default any postback control inside an update panel causes an async postback
Controls outside of the update panel can also trigger the panel contents to update. For example look at btnGo, it resides outside the panel however it is defined within the panel as a trigger/control that can force the async update to the panel contents. Reference the <asp:AsyncPostBackTrigger> element within the <Trigger> element of the updatePanel
Shown here is how a timer defined outside of the panel can trigger the update panel to refresh at a defined interval
<asp:UpdatePanel id=”panel1” runat=”server” UpdateMode=”Always/Conditional” ChildrenAsTriggers=”true/false”> <Triggers> <asp:AsyncPostBackTrigger ControlID=”timer1”/> </Triggers> <ContentTemplate> <!—page content here --> </ContentTemplate> </asp:UpdatePanel> <asp:Timer id=”timer1” runat=”server” Interval=”3000” OnTick=”OnTimerTick”/>
provides status information about partial-page updates in the UpdatePanel controls. The content can be customized. To prevent flashing when a partial-page update is very fast, you can specify a delay before the UpdatePanel control is displayed
Code behind which responds to the button click to update a label control with the current time.Ajax and Web Service Example Page HTML code with embedded update panel which responds to a control within the panel and a button defined as a trigger outside of the panel control.
Web Service code (simple function that returns ‘Hello World’)
Page Code (page with button which calls js function, which in turn calls the web service defined within ScriptManager-ScriptReference tag)Page Method Example
The following is a sample showing a code behind static method marked with WebMethod attribute.