JQuery and partial views in an ASP.NET MVC application

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.

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.

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):

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







2)     I registered a custom route to handle any custom / application specific content that
	 needed to 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” }),        }
        );


3)     I added and partial view called _CustomPartialView (an .ascx page) into my view structures
	 to handle the

display of the custom/application specific content.  
4)     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
	 was 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.
 
 
 

By Brian Rush Popularity (8790 Views)