asp.net mvc jquery - display partial page as return result?

Question

With jQuery, is it possible to call /ControllerName/GetSomething?parameter=test, while in GetSomething method I have following:

public ActionResult Details()
{
    filterQuery.OrderBy = Request.QueryString["parameter"];

    var contacts = contactRepository.FindAllContacts(filterQuery).ToList();

    return View("ContactList");
}

and then fadeOut current display of ContactList.ascx replacing it with updated one?

Answer 1

You need to call $('selector').load(url).

For example:

$('#idOfElementContainingPartialView')
    .fadeOut()
    .load(
        '/ControllerName/GetSomething?parameter=test',
        function() { $(this).fadeIn(); }
    );

Answer 2

There is a PartialViewResult return type:

public PartialViewResult Details()

Then return a PartialView

return PartialView("ContactList");

In jQuery, use the load() method to retrieve the results using AJAX and then use some combination of the jQuery fadeIn(), fadeOut(), and fadeTo() methods.

$('#result').load('/ControllerName/GetSomething?parameter=test', function() {
  $('#result').fadeOut etc...
});