How to use AJAX in .NET MVC projects

When developing Web Projects one point you should always keep in mind is this: A great web project makes the user feel, that there is no web. You created a good user-experience when they just forget that they are working in a browser.

One way to achive that, is using AJAX as often as possible

Why? Because Page Load is a user experience killer. The complete page refreshes which is awful in UI and even worse for us programmers, cause we have to store user selections in our viewdata and so on. Very bad. Using ajax and refreshing only parts of your site makes the user feel comfortable and is actually easier for us programmers.

Code in your javascript file (I recommend to generate extra javascript files, to keep your views clean)

function drawChart(month, year) {
$.ajax({
url: '/YOURCONTROLLER/YOURMETHOD',
type: 'POST',
data: { param1: month, param2: year },
dataType: 'json',
success: function (data) {
//Make something with your data
}
})
};

Then in your Controller your functions should look like this

public JsonResult GetChartData(int month = 0, int year = 0)
{
//Generate or get your data from db
return Json(data);
}

Thats all. Easy and powerful.

Now, one last thing is your UI behavior. When you gather your data from a database you should display a loading panel or something like that, so your users know what’s going on. A great way to do this, is using the BlockUI Plugin for jQuery

Here you can see some demo cases:

http://www.malsup.com/jquery/block/#demos

And here is some example code (As mentioned above I recommend to extract all javascript and jquery code in separate files to keep your views clean!)

http://www.malsup.com/jquery/block/#page

Easy to use and looks very great. We’re in developers heaven 😉