JQuery Partial Views in ASP.NET MVC

Brian Rush

Rate me:

3.00/5 (5 votes)

17 Mar 2009CPOL2 min read

90.9K

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

<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.

JavaScript

<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.

JavaScript

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Brian Rush

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

JQuery Partial Views in ASP.NET MVC

Introduction

The Code

History

License

Comments and Discussions