Recommended AJAX Best Practices for Maintaining the MVC Paradigm
July 2010 update: This architect/developer has quit using Microsoft .NET AJAX, in favor of jQuery AJAX calls. It seems that Microsoft agrees since Visual Studio 2010 supports jQuery.
In the Service Oriented Architecture section, the AJAX calls to services were first made to an ASPX code-behind controller page (the ASPX.CS file) from the browser view through the model BLL and DAL. In order to maintain this Model-View-Controller (MVC) architecture even in a service-oriented architecture (SOA), programmers should standardize on the ASP.NET AJAX PageMethod for code-behind calls to the ASPX page controller.
In order to accomplish this, the programmer should take the following steps in a Web application:
1. Either add a ScriptManager to an existing web page or add an AJAX web page to the project.
2. Set the ScriptManager EnablePageMethods to true.
3. At the top of the web page add a “using System.Web.Services;” or an “imports System.Web.Services” for C# and VB.NET respectively.
4. Create a static method to call from AJAX; for example:
[WebMethod]
public static DateTime GetTime()
{
return DateTime.Now;
}
5. Notice that the programmer decorated the top of the method with “[WebMethod]”.
6. Add a ClientScriptManager (Microsoft best practice for inserting JavaScript into an ASPX page when IIS converts it to HTML or XHTML) method to your code-behind file that loads the JavaScript code:
protected void loadGetTime()
{
//---------------------------------------------------------------
///
/// Method Name: loadGetTime
/// Description: This method generates the Javascript that will
/// run on Internet Explorer client to display date time to
/// client.
///
///
///--------------------------------------------------------------
ClientScriptManager csm = this.Page.ClientScript;
Type cstype = this.GetType();
csm.RegisterClientScriptBlock(cstype, "getTime", @"<script type=""text/javascript"" language=""javascript" ">
function getTime()
{
PageMethods.GetTime(methodCompleted);
}
function methodCompleted(results, context, methodName)
{
var output = results.format(""ddd, dd MMMM yyyy"");
$get(""Label1"").innerHTML = output;
});
}
Note: Use the double quote (“”) after the literal string (@) in the RegisterClientScriptBlock where you would normally use a JavaScript single quote (“). The .NET runtime converts this into a single quote when it inserts the JavaScript block into the HMTL page.
7. To run the inserted JavaScript code, add a Label1 to the ASPX page along with an HTML button. In the button HTML source view, add an “onclick” event that call the JavaScript “getTime()” method:
<input id="Button1" type="button" value="Get Time and Date" onclick="getTime()"/>
8. Add the code to insert the JavaScript functions in the ASPX page load event:
protected void Page_Load(object sender, EventArgs e)
{
this.loadGetTime();
}
9. When you compile and run the simple program and click on the button you get the following:
If you want to obtain data from a database through an AJAX call, then you should maintain the MVC paradigm by making a call to a page code-behind method through the model BLL and DAL. The Service Oriented Architecture section above has already covered this topic (See figure below)