how to create reusable "widget" markup across modules in an ASP.NET MVC 2.0 site?

Scenario:

platform: ASP.NET 4.0, MVC 2.0 (doesn't have to be MVC if it's not the right solution)

Create various widgets that inherit the same core markup:

<div class="widget">
    <div class="hd-widget">
        <!-- dynamically inject code here for each actual widget -->

    </div>
    <div class="bd-widget">
        <!-- dynamically inject code here for each actual widget -->
    </div>
    <div class="ft-widget">
        <!-- dynamically inject code here for each actual widget -->
    </div>
</div>

The above "simplified" example should be in some reusable control or masterpage.

The flow is something like this:

Controller -> View -> Partial View (1..n) -> widget markup

User instantiates an action which calls a controller. The controller tries to render a view that contains content + multiple widgets (left rail, right rail, etc). The Widgets all have their ow开发者_C百科n individual partial views but each partial view should inherit or consume a base set of widget markup and have controller areas where to embed functionality.

Functionality in the head, body, and footer can either be plain text, HTML, or additional custom controls.

What is the best recommended approach?

I would be thinking you would have a WidgetModel which contains a set of properties regarding the widget.

Eg.

public class WidgetModel
{
   public string ControllerName { get; set; }
   public string HeaderAction { get; set; }
   public string BodyAction { get; set; }
   public string FooterAction { get; set; }
}

And you have a Widget View like

<div class="widget">
   <div class="hd-widget">
      <%: Html.RenderAction(Model.HeaderAction, Model.ControllerName) %>
   </div>
   <div class="bd-widget">
      <%: Html.RenderAction(Model.BodyAction, Model.ControllerName) %>
   </div>
   <div class="ft-widget">
      <%: Html.RenderAction(Model.FooterAction, Model.ControllerName) %>
   </div>
</div>

Of course you could add more to it if you wanted.

I assume that your widgets will be stored in a DB.

I guess you'll need tables for Paths, PageSettings, Widgets, WidgetInstances, MasterPages, MasterPageZones and Zones.

I think that each widget will need to make a call in to RenderAction and this action will be stored in the DB against the widget. The widget header and footer can probably just be retrieved from the DB.

When I did this I spent quite a bit of time creating the dynamic editor for each of the widgets, the state of each widget is serialized in json, the only issue I'm still working on is dynamic validation of the widget editor.

Page Layouts are handled by a custom personalization class, storing the masterpage, path, userId etc.

It's quite an involved solution using JQuery sortable but really quick and SEO friendly.