Click here to Skip to main content
Click here to Skip to main content

JQuery Partial Views in ASP.NET MVC

, 17 Mar 2009
Rate this:
Please Sign up or sign in to vote.
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

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

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 “centerbodydiv 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?

  1. Within the CMS system, I injected the following into the “centerbodydiv.
    <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 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” }),
        }
        );
  3. I added a partial view called _CustomPartialView (a *.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 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

  • 15th March, 2009: Initial version

License

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

Share

About the Author

Brian Rush

United States United States
No Biography provided

Comments and Discussions

 
QuestionWhere is source code? Pinmembersamthec13-Sep-12 4:00 
GeneralMy vote of 5 PinmemberWes Grant9-Aug-11 0:19 
GeneralMy vote of 1 Pinmembertrevor.n.webster2-Aug-11 7:44 
GeneralNot SEO Pinmembertstone@hanalani.org11-May-09 7:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 17 Mar 2009
Article Copyright 2009 by Brian Rush
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid