How does ASP.NET MVC Data Binding work without reloading webpage?

Question

I've just started using ASP.NET MVC 4.0 to build a web application. I've been through the tutorials that explain and demonstrate View/Controller/Models, but now I'm wanting to go a step further.

Instead of having all of my pages constantly reload as users interact with my application, i'd like to learn how to make async calls to the server side to load data.

A great example of what I would like to learn how to implement is:

http://demo.aspnetawesome.com/AjaxDropdownDemo/Index

The Drop Downs are bound to each other, and the page never refreshes. Does anyone have some suggestions on where I can go to learn how to begin learning this? Also, since I am using MVC how can I use Model Binding to help make it more simple?

Answer 1

To Make and async calls to your action you can make ajax call as follows

Jquery Code:

var AsyncCall = function () {
$.ajax({
    type: "POST",
    url: "Home/Index",
    data: JSON.stringify(yourData),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
       // Success implementation
    },
    error: function () {            
    }
});

};

In Controller :

    [HttpPost]
    public ActionResult Index(DataType model)
    {
        // Implementation
        return View(model);
    }