Partial view injection

https://evolpin.wordpress.com/2011/04/12/asp-net-mvc-partialview-with-ajax/

https://evolpin.wordpress.com/2011/04/26/asp-net-mvc-partial-view-and-ajax-real-world-example/

Basically there are 4 steps to achieve this:

1. Create a PartialView.
2. Create a place holder html control.
3. Use jQuery’s load method to fetch the partial view from the server and inject it into the place holder.
4. Create a server side Action in a Controller that will return the partial view.

Here’s a quick example how this can be done. We’ll use the same partial view created earlier (i.e. MyPartialView.cshtml). So now we have to prepare a place holder div, and use jQuery to load and inject the response:

1: <a href='javascript:getView();'>Get Partial View</a>

2: <script type="text/javascript">

3:     function getView() {

4:         $('#divResult').load("@Url.Action("GetView" , "Home" )");

5:     }

6: </script>

7: <div id='divResult'>

8: </div>

• Line 1 is a simple anchor which will invoke the JavaScript containing jQuery’s load.
• Line 4 is the simple one-line code which performs an ajax call to the server’s GetView action in the Home Controller (will be done shortly), and injects the result.
• Line 7-8 is where the result will be injected to.

And now for the server side – pretty self-explanatory:

1: public ActionResult GetView()

2: {

3:    return PartialView("MyPartialView");

4: }

When we run the sample, prior to the Ajax call this looks like this: