JQuery and partial views in an ASP.NET MVC application
By Brian Rush
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.
Popularity (5180 Views)
Article Discussion: JQuery tand partial views in an ASP.NET MVC application
Brian Rush posted at Sunday, March 15, 2009 8:23 PM