A DD4T.net Implementation - Rendering Only a Partial for AJAX

Following up on a previous post AJAX Component Controller, I’m going to present in this blog entry a way of rendering not only a Dynamic Component Presentation (DCP) to display its entire view, but also a way to render only a PartialView in this DCP.

The premise of the post is that sometimes we need to request minor updates to a page. These updates can be in the form of just a DCP on the page to be rendered in some AJAX architecture. However, sometimes, even rendering an entire DCP is too much. We then need the granularity to only display/update part of the DCP output. Enter the PartialView rendering.

Typically an MVC .net application uses views that in turn include other smaller views, called PartialViews in order to abstract commonly used layout structures and facilitate reuse.

In my situation, I had to show a section of dynamically retrieved items as part of my Device view. Since my Component view contains several such sections, it would not make sense to render the entire DCP view when only a small part of it needs re-displaying. Namely, my section of dynamic items is paginated, so I needed a way to just display the new ‘page’ of iterable items.

The technical solution is quite straight forward as it enhances the already existing AJAX Component controller model:

• Add a new URL path parameter for the partial we want to display;
• Handle the partial in the Component controller and dispatch to it, if present;

So, in my RouteConfig.cs, I added the lines highlighted below:

    routes.MapRoute(
        name: "DCP",
        url: "{controller}/{action}/{publication}/{component}/{view}/{partial}",
        defaults: new
        {
            partial = UrlParameter.Optional
        },
        constraints: new
        {
            controller = @"\w{1,50}",
            action = @"\w{1,50}",
            publication = @"\d{1,3}",
            component = @"\d{1,6}",
            view = @"\w{1,50}",
            partial = @"_\w{1,50}"
        }
    );

The new path parameter partial gives us the name of the PartialView we want to display, as part of the already existing setup controller, action, component, view.

I declared it as optional parameter, because, if missing, I’m going to simply render the entire Component view. I also defined a constraint on its type (string) and minimum/maximum acceptable length.

The Component controller itself was enhanced with a new nullable parameter in its signature:

public ActionResult Index(int? publication, int? component, string view,

        string partial)

Further, it’s just a matter of handling the partial value and dispatching to the requested PartialView:

    if (partial == "_PartialWhatsNew")
    {
        WhatsNew model = BuildWhatsNew();
        // Mode processing here...
        if (partial == null)
        {
            ViewBag.WhatsNew = model;
        }
        else
        {
            return View(partial, model);
        }
    }

The same Component controller can be used and reused in both cases when there is an embedded Component Presentation on the Page, as well as with Dynamic Component Presentations.

When the CP is embedded on Page, the partial will be null. The code will still build the model for the PartialView, but it will store it in the ViewBag, so that the main Component view is able to use/render it.

A sample URL that calls the rendering of the PartialView above is:

http://my.server.com/Device/Index/123/456/FullDetail/_PartialWhatsNew