jQuery .load with MVC 2/3 PartialViews

Ever wanted to re-use or re-load part of your page via AJAX with MVC 2/3. There is a really simple way to achieve this with PartialViews and jQuery’s .load() function.

1.  Create a PartialView


2. Add some jQuery – AJAX .load():

   $("#divForPartialView").load("/HelloWorld/GetAwesomePartialView",
      { param1: "hello", param2: 22}, function () {
	//do other cool client side stuff
   });

3.  Add your MVC Controller ActionResult that returns your PartialView:

public ActionResult GetAwesomePartialView(string param1, int param2)
{
    //do some database magic
    CustomDTO dto = DAL.GetData(param1, param2);

    return PartialView("AwesomePartialView",dto);
}

4. Add some client side code to make it happen

3 Responses to jQuery .load with MVC 2/3 PartialViews

  1. Hi, great tip here, helped me alot. Previously I have only loaded partial views using the html.actionlink. I noticed one must use the exact same key names in the jquery as the names of the method parameters in the controller action.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">