Make Ajax Calls with JQuery in MVC.Net

There are mainly two scenarios when Ajax comes to play in a web application. The first scenario is to retrieve a chunk of html contents and refresh a web element’s content with it. The other one is to retrieve a group of data values from the server and update several web elements’ values individually. In a MVC Asp.Net application, we can provide solutions for these two scenarios with JQuery. JQuery supports three types of Ajax message format, ‘html’, ‘json’ and ‘xml’. In this article I will use the ‘html’ method to provide a solution for the first scenario and use the ‘json’ method to provide a solution for the second scenario.
We use a simplified JQuery Ajax function, $.post(…). This function accepts four parameters,
1. URL;
2. Data;
3. JavaScript Callback;
4. Message Format, (‘html’, ‘json’ or ‘xml’).
For example,
$.post(“/home/ContactList”, { id = 1}, listContact, “json”)
This command will post to the “/Home/ContactList” URL, with a single parameter id = 1 with ‘json’ format’. The listContact function will receive the returned json result from the server and manipulates the HTML document to list contacts.
Another example,
$.post(“/home/ContactList”, { id = 1}, function(txt){$(“#divContactList”).html(txt);}, “html”)
This command will post to the “/Home/ContactList” URL, and retrieve a chunk of html contents and populate the div element with id “divContactList”.
To make things a little bit easier and nicer, I have developed two HtmlHelper functions to render anchors that can retrieve html and json contents.
public static string JQueryJsonAction(this HtmlHelper htmlHelper, string strText, string strAction, string strCallbackFunction, object objParameters, object objHtmlAttributes)

• strText is the text of the ancor;
• strAction is the name of the action;
• strCallbackFunction is the javascript that accept json result.
• objParameters is the parameters to be passed to the server.
• objHtmlAttributes is the html attributes that will be rendered for the ancor.

To achieve the same result as example 1, simply call,
Html.JQueryJsonAction(“List Contact”, “ContactList”, “listContact”, new { id = 1}, null).

public static string JQueryHtmlAction(this HtmlHelper htmlHlper, string strText, string strAction, string strDivId, object objParameters, object objHtmlAttributes)

• strText is the text of the ancor;
• strAction is the name of the action;
• strDivId is the id of the element that will be populated with HTML contents from the server.
• objParameters is the parameters to be passed to the server.
• objHtmlAttributes is the html attributes that will be rendered for the ancor.

To achieve the same result as example 2, simple call,
Html.JQueryHtmlAction(“List Contact”, “ContactList”, “divContactList”, new { id = 1}, null).

How the function works?
• Convert objParameters & objHtmlAttributes to arrays of names and values using reflection.
• Render an anchor with href value set to “javascript:void(…)” to make Ajax calls.
• Render html attributes to the anchor as well.

I hope this is helpful and let me know if it needs improvement.Here is the source code.