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:
- update panel server control
- access to page methods (without web service)
AJAX Client Libraries
- Client-Script libraries that provide features for object-oriented development which enable high level of consistency and modularity in client scripting.
- Browser compatibility
- Networking layer that handles communication with web based services
- Sys Namespace
- Javasript Shortcuts i.e. $get(‘elementId’), $addHandler, $removeHandler
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
- set EnableParitalPageRendering=”true”
- 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”
<!—page content here -->
<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
Update Panel Example
Code behind which responds to the button click to update a label control with the current time.
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.
Ajax and Web Service Example
- Script Callable Web Service
- Proxies are automatically generated
- [ScriptService] Attribute
Web Service code (simple function that returns ‘Hello World’)
- Web Service has [ScriptService] attribute
Page Code (page with button which calls js function, which in turn calls the web service defined within ScriptManager-ScriptReference tag)
Page Method Example
- use EnablePageMethods=true in the ScriptManager control
The following is a sample showing a code behind static method marked with WebMethod attribute.
Target Html file used in the Get
Post Aspx Page