Creating an MVC based website with reusable widgets

After the MVC Framework was released i was pretty impressed of how it worked but one of my main problems was how to handle the data on the page that is not the main goal of the specific page.

In ASP.NET MVC every page has its specific controller and views that can handle the data for the page that is requested. for example when you’re building a web shop you’ll probably have a ProductController that handles everything that has to do with the Products in your shop. But when you are browsing a web shop product page you would also like to see other data that has nothing to do with products, for example your shopping basket, current login state etc. Should you add this logic to the ProductController? imo you shouldn’t since the Products controller only responsibility should be the products. So how should we handle this in the MVC framework?

My first idea that came to mind to solve this problem was doing an Ajax request to for example, the shopping basket controller on your view when you would like a shopping basket added to your page. This can be in some situations the best way to do it but in some cases you might not want to use Ajax since then this content can’t be indexed by search engines for example.

An example how to use Ajax widgets is found here:

My main goal was to be able to add widgets to a page without the controller of that page knowing about these widgets. I found some solutions to this called partial requests found here:

These partial requests weren’t my favorites also since i didn’t want to put this logic in the view so i developed my own CMS like solution for this problem.

My idea was that a page can have several page zones and page zones contain widgets. widgets and complete page zones should be reusable by other pages so i stored these in my CMS database. how my database is build up you can see in the image below


A widget should be able to render itself so i made an abstract BaseWidget class that has a Render Method. A widget can also be a call to a different controller so i made a SubController class that inherits from BaseWidget. The SubController Widget has an Controller, Action and ID so it can call the controller it belongs to.

   1: public abstract class SubControllerWidget : BaseWidget

   2: {

   3:     public string Controller { get;  set; }

   4:     public string Action { get;  set; }

   5:     public object ID { get; set; }


   7:     public SubControllerWidget(string Controller, string Action) : base()

   8:     {

   9:         this.Controller = Controller;

  10:         this.Action = Action;

  11:         this.ID = null;

  12:     }


  14:     public SubControllerWidget(string Controller, string Action, object ID)

  15:         : base()

  16:     {

  17:         this.Controller = Controller;

  18:         this.Action = Action;

  19:         this.ID = ID;

  20:     }


  22:     public override void Render(System.Web.Mvc.ViewContext vc)

  23:     {

  24:         vc.RouteData.Values["controller"] = Controller;

  25:         vc.RouteData.Values["action"] = Action;

  26:         vc.RouteData.Values["id"] = ID;

  27:         IHttpHandler handler = new MvcHandler(vc.RequestContext);

  28:         handler.ProcessRequest(System.Web.HttpContext.Current);

  29:     }


  31:     public abstract void SetSettings(WidgetSettings settings);

  32: }

To build a specific widget just inherit a widget from SubControllerWidget and you are ready to go. Set the Controller, Action and ID to call and that specific controller will be called.

To add these page zones and widgets to the pages dynamically i’ve created a CMSController that overrides the OnActionExecuted method so it can insert the page zones and widgets to the model that’s been send to the View.

   1: protected override void OnActionExecuted(ActionExecutedContext filterContext)

   2: {

   3:     if (ViewData.Model == null)

   4:     {

   5:         ViewData.Model = new CMSViewModel();

   6:     }

   7:     string controller = filterContext.RequestContext.RouteData.Values["controller"] != null ? filterContext.RequestContext.RouteData.Values["controller"].ToString() : "";

   8:     string controllerAction = filterContext.RequestContext.RouteData.Values["action"] != null ? filterContext.RequestContext.RouteData.Values["action"].ToString() : "";

   9:     string controllerActionid = filterContext.RequestContext.RouteData.Values["id"] != null ? filterContext.RequestContext.RouteData.Values["id"].ToString() : "";

  10:     IList<PageZone> zones = _cmsRep.GetPageZonesForPage(controller, controllerAction, controllerActionid);


  12:     CMSViewModel page = (CMSViewModel)ViewData.Model;

  13:     if (page.PageZones == null)

  14:     {

  15:         page.PageZones = zones;

  16:     }

  17:     else

  18:     {

  19:         foreach (PageZone zone in zones)

  20:         {

  21:             page.PageZones.Add(zone);

  22:         }

  23:     }



  26:     base.OnActionExecuted(filterContext);

  27: }


So now all widgets beloning to a page will be retrieved from the CMSRepository and are added to the CMSViewModel so now it’s the View’s turn to render all widgets.

In my master page I’ve added the following line that is responsible for rendering all widgets:

<% Html.RenderPageZones(Model); %>

For that to work I’ve created a few html extension methods to render the page zones.

   1: public static class HtmlCMSExtensions

   2: {

   3:     public static void RenderPageZones(this HtmlHelper html, CMSViewModel page)

   4:     {

   5:         if (page != null && page.PageZones != null)

   6:         {

   7:             foreach (PageZone zone in page.PageZones)

   8:             {

   9:                 html.RenderPartial("PageZone", zone);

  10:             }

  11:         }

  12:     }


  14:     public static void RenderWidgetsInZone(this HtmlHelper html, PageZone zone)

  15:     {

  16:         if (zone != null && zone.Widgets != null)

  17:         {

  18:             foreach (IWidget widget in zone.Widgets)

  19:             {

  20:                 widget.Render(html.ViewContext);

  21:             }

  22:         }

  23:     }

  24: }

In my PageZone view i’ve added the other html extension method called RenderWidgetsInZone so all widgets are rendered by itself.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<VanDerCruijsen.MVC.CMS.Model.PageZone>" %>

<div id="<%= Html.Encode(Model.Name) %>">

   1: = Html.Encode(Model.Name)


   1:  Html.RenderWidgetsInZone(Model);



This is the way I use to create widgets on my ASP.NET MVC pages. If you have any recommendations or better ways how to do it please let me know.

When I have the time I’m going to build an admin controller to be able to add widgets and pagezones via the webinterface since now the only option is to add them in the database by hand.

My sources aren’t really cleaned up so if you want a working source/solution please send me mail or leave a comment.

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

My article about the ASP.NET MVC Framework published in the Dutch .Net Magazine

Hello everyone,

It’s been a while since my last post (again :( ) but I’ve been quite busy testing out the new ASP.NET MVC Framework. I have to say i really like it. Currently I’m building my own little CMS framework on top of the MVC framework so it becomes easier to use widgets or other non main data items on your pages. As soon as it’s in a show able form I’ll  post it on my blog.

I’ve also written an article about the ASP.NET MVC framework for the Dutch .Net Magazine (in Dutch) so if you are a reader of the magazine check out page 22 of the June 2009 release (#25) :)

The Title of my article is: “Volledige controle over je webapplicatie met het ASP.NET MVC Framework” (“Total control over your web app using the ASP.NET MVC Framework”)

The article will also come online sometime but the official site (also used to sign up for the free magazine) is still showing #23 as the newest one.

When the pdf is put online I’ll add the link to this post.

I’ve focused on writing about how to build an ASP.NET MVC application using TDD because I think this is one of the major advantages over the “old” way of building web applications in ASP.NET.

If you have any feedback or comments about the article please let me know!

Geert van der Cruijsen

Share on Facebook
Kick It on
Shout it
Post on Twitter

ASP.NET MVC framework 1.0 released

After the announcement of silverlight 3.0 i was chatting with a colleague about how cool it would be if MVC framework would also be released at mix.

My colleague started searching and came up with this link:

Pretty cool huh? I haven’t seen any official press releases from Microsoft but since you can download it it seems that it has been released! 

My guess is that it will be announced on MIX today or tomorrow but I couldn’t wait to share it with you already J 

Geert van der Cruijsen  

Share on Facebook
Kick It on
Shout it
Post on Twitter