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.
Browser compatibility
Extensions to JavaScript such as classes, namespaces, event handling, inheritance, data types and object serialization
Networking layer that handles communication with web based services
Sys Namespace
Javascript Shortcuts i.e. $get(‘elementId’), $addHandler, $removeHandler
Asp.Net AJAX Server Controls
ScriptManager
Manages Javascript
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>
ScriptManagerProxy
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.
UpdatePanel
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” 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”/>
UpdateProgress
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 ExamplePage 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.public partial class Panel : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){lblName.Text = DateTime.Now.ToString();}protected void lnkButton_Click(object sender, EventArgs e) {lblName.Text = DateTime.Now.ToString();}}<body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:Label ID="lblName" runat="server" CssClass="lbl" Text=""></asp:Label><asp:LinkButton ID="lnkButton" runat="server" CssClass="lnk" onclick="lnkButton_Click" Text="Update"></asp:LinkButton></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="btnGo" />
</Triggers></asp:UpdatePanel><asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"><ProgressTemplate>Updating.</ProgressTemplate></asp:UpdateProgress><br /><br /><asp:Button ID="btnGo" runat="server" CssClass="btn" Text="Go" /></form></body>
Web Service code (simple function that returns ‘Hello World’)
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class MyWebService : System.Web.Services.WebService {
public MyWebService () {
}
[WebMethod]
public string HelloWorld() {
return "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<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"><Services><asp:ServiceReference Path="~/MyWebService.asmx" />
</Services></asp:ScriptManager><asp:Button ID="btnGet" runat="server" CssClass="btn" Text="Get" OnClientClick="update();return false" /><script type="text/javascript">
function update() {MyWebService.HelloWorld(onCompleted, onFailed);}function onCompleted(result, context, methodName) {alert(result);}function onFailed(err, context, methodName) {alert(err.get_message());}</script></form>dy>ml>
The following is a sample showing a code behind static method marked with WebMethod attribute.
HTTP Requests (from Javascript) SampleAspx code with a button that calls javascript, which in turn calls the page method ‘update’ to return uppercase string.public partial class PageMethod : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){Response.Write(DateTime.Now.ToString());}[System.Web.Services.WebMethod]public static string update(string input){return input.ToUpper();
}}<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" EnablePageMethods="true" /><asp:Button ID="btnGet" runat="server" CssClass="btn" Text="Get" OnClientClick="update();return false" /><script type="text/javascript">1:
2: function update() {3: PageMethods.update("test", onCompleted);4: return false;5: }
6: function onCompleted(result) {7: alert(result.toString());
8: }
9:
</script></form></body></html>
- The async communication layer enables javascript to make a request over the network to any http end point by using Sys.Net.WebRequest class
- The sample performs a post and get http request from javascript
Page code that initiates the javascript call GetWebRequest().Javascript (connect.js) file which performs the webrequest<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"><Scripts><asp:ScriptReference Path="~/connect.js" />
</Scripts></asp:ScriptManager><asp:Button ID="btnGo" runat="server" CssClass="btn" Text="GetWebRequest" OnClientClick="GetWebRequest();return false;" /><asp:Button ID="btnPost" runat="server" CssClass="btn" Text="PostWebRequest" OnClientClick="PostWebRequest();return false;" /><div id="result">initial content</div>
</form>Target Html file used in the Get// connect.js
var resultElement;function pageLoad() {resultElement = $get("result");
}function GetWebRequest() {alert("performing web request");
// Instantiate a WebRequest.
var wRequest = new Sys.Net.WebRequest();
// Set the request URL.
wRequest.set_url("getTarget.htm");
alert("Target Url: getTarget.htm");
// Set the request verb.
wRequest.set_httpVerb("GET");
// Set the request callback function.
wRequest.add_completed(OnWebRequestCompleted);// Clear the results area.
resultElement.innerHTML = "";
// Execute the request.
wRequest.invoke();}// This function performs a POST Web request.
function PostWebRequest() {alert("Performing Post Web request.");
// Instantiate a WebRequest.
var wRequest = new Sys.Net.WebRequest();
// Set the request URL.
wRequest.set_url("postTarget.aspx");
alert("Target Url: postTarget.aspx");
// Set the request verb.
wRequest.set_httpVerb("POST");
// Set the request handler.
wRequest.add_completed(OnWebRequestCompleted);// Set the body for he POST.
var requestBody ="Message=Hello! Do you hear me?";
wRequest.set_body(requestBody);wRequest.get_headers()["Content-Length"] =
requestBody.length;// Clear the results area.
resultElement.innerHTML = "";
// Execute the request.
wRequest.invoke();}// This callback function processes the
// request return values. It is called asynchronously
// by the current executor.
function OnWebRequestCompleted(executor, eventArgs) {if (executor.get_responseAvailable()) {
// Clear the previous results.
resultElement.innerHTML = "";
// Display Web request status.
resultElement.innerHTML +="Status: [" + executor.get_statusCode() + " " +executor.get_statusText() + "]" + "<br/>";// Display Web request headers.
resultElement.innerHTML += "Headers: ";
resultElement.innerHTML += executor.getAllResponseHeaders() + "<br/>";
// Display Web request body.
resultElement.innerHTML +="Body:";
if (document.all)
resultElement.innerText += executor.get_responseData();else
resultElement.textContent += executor.get_responseData();}}if (typeof (Sys) !== "undefined") Sys.Application.notifyScriptLoaded();Post Aspx Page<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Hello Page</title></head><body><p>Hello there.I got your GET Web request!</p></body></html><%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server"><title>Post Target</title><script language="C#" runat="server">protected void Page_Load(object sender, EventArgs e){if (HttpContext.Current.Request.Form["Message"] != null)LabelID.Text =HttpContext.Current.Request.Form["Message"].ToString();
}</script></head><body><form id="form1" runat="server"><div><h1>WebRequestPost Target</h1><p><asp:Textbox id="LabelID"
Text="test" runat="server"/></p>Yes, I got your POST Web request!</div></form></body></html>