jQuery Page Method AJAX Call
The preferred way to make an AJAX call to web service or a database and maintain the Model View Controller architecture is to make a client page to ASP.NET code-behind method call. This allows the programmer to access remote data and other information sources without compromising security. The user could present validation criteria to the code-behind method, and pass this information to the application Business Logic Layer (BLL) or Web/WCF service BLL before accessing a database stored procedure or other remote resources.
A simplified method call is made here without message credentials to keep the example simple. An ASP.NET page div is given an ID (<div id="Result">Click here for the time.</div>) and instructions are presented on the page:
The ASP.NET AJAX code-behind method call must be to a static method by .NET design. Therefore, the server-side static method cannot by design access any client-side information. All information must be passed from the client to the server via the jQuery Method call. The server-side, code-behind static method is:
[WebMethod]public static string GetDate(){
return DateTime.Now.ToString();}
The jQuery code necessary to request and process the AJAX method call is:
$(document).ready(function() {// Add the page method call as an onclick handler for the div. $("#Result").click(function() { $.ajax({
type: "POST", url: "jQueryPageMethod.aspx/GetDate", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // Replace the div's content with the page method's return. $("#Result").text(msg.d); }
});
});
});
The "#Result" div has the click method defined to perform the function that makes the AJAX method call to the ASPX code-behind static method "GetDate." If the call is successful, then resulting message (msg) uses a jQuery function to write the message to the "#Result" div.
The user then sees the client div updated by jQuery to display the date and time:
How simple and elegant is this jQuery coding?