JQuery Partial Views in ASP.NET MVC

Brian Rush

3.00/5 (5 votes)

Mar 17, 2009

CPOL

2 min read

91798

This brief article will present how we can leverage the magic of JQuery to load partial views via AJAX calls into an ASP.NET MVC application. It is really quite amazing how the power of JQuery dovetails so nicely into ASP.NET MVC.

Introduction

First, let me describe a situation I faced recently that lead me to incorporating this technique. I had a web application that was receiving a large portion of the content from a Content Management System data repository (CMS). The CMS returned HTML content that in turn was handed off to views to render. The CMS was where the structure of pages was defined. Take for example this structure (this is just an example).

The Code

<html>
<div align="center">
<div id="flashheader"></div>
<div id="header" >Some Content X</div>
<div class=”leftmenu"> Some Menu Content FROM CMS</div>
 <div id="centerbodytop">Some Body Content FROM CMS</div>
<div class="centerbody">JUST A PLACE HOLDER </div>
 <div id="rightblock"></div>
<div id="footer"></div>
</html>

What I needed to do was replace the “centerbody” div with content from a partial view. The key point here was this content within the “centerbody” was not extracted from the CMS system but rather using custom application code. So how did I achieve this?

Within the CMS system, I injected the following into the “centerbody” div.

<script language="JavaScript" type="text/javascript">
$('#centerbody').load('/Custom/CustomAction',function( html)
			{  $('#centerbody')[0].value = html;  });
</script>

I registered a custom route to handle any custom / application specific content that needed to be rendered. This is called via the script from step 1.

routes.Add(new Route
    ("Custom/CustomAction", new MvcRouteHandler())
    {
        Defaults = new RouteValueDictionary(new 
		{ controller = "Custom", action = "CustomAction” }),
    }
    );

I added a partial view called _CustomPartialView (a *.ascx page) into my view structures to handle the display of the custom/application specific content.

Within the Custom controller, I wired up a call to render the partial view.

public ActionResult CustomAction()
{
    //Gather up all the custom specific data
    return View("_CustomParialView");
}

So how does this all piece together, it’s really quite simple. When the main page renders, it makes another request via AJAX and JQuery magic to the Custom controller. The CustomAction action within that controller gathers up all the application specific data and hands that off to the _CustomParialView partial view. That _CustomPartialView HTML is then handed back to the original AJAX request and the resultant HTML is placed inside the centerbody div placeholder.

Now this approach is relevant irrespective of the CMS system I described here. In short, it will work when we want to “plug in” partial views into our pages.

So what makes this approach useful? First we can have nice modular partial views that we can then piece together on pages that we see fit. These partial views can be structured to be truly small reusable components.

This was a very brief article but a useful technique that I thought I would share.

History

15^th March, 2009: Initial version