load a usercontrol using jquery

Question

How to load/render a usercontrol using jquery?

I have some menus on header of the page and the usercontrols for each menu. On click of the menus i need to re-load the content with the corresponding usercontrol.

How can i achieve it using jquery which avoids page refresh?

Answer 1

In JavaScript:

$("#someContainerForTheUserControl").load("/Controller/PartialAction");

In your controller:

public ActionResult PartialAction()
{
    return PartialView("SomeUserControl");
}

Answer 2

You want to use the jQuery AJAX functions (either post or get) to make a request to your server.

You will have a method in your code behind which returns the HTML of the usercontrol. When the page recieves the HTML you can just update a div with the returned markup.

There is a tutorial here which should talk you through the steps in detail:

http://www.aspcode.net/ASPNET-and-JQuery-updating-templated-controls-with-AJAH.aspx

Good luck