Add post-backs to MVC –or- add front controller to Web Forms

You can download the code for this post at my CodePlex repository: http://palermo.codeplex.com/

Lots of programmers I talk to are managing software assets written in ASP.NET.  These applications have been in production for years, and they work.  The problem that is pervasive among all of them is that the Page_Load method is much too large.  Model-View-Presenter is fatally flawed as a pattern because the view obtains control before the presenter does.  This wrong ordering is an unrecoverable error in the workability of the pattern.  I have spent a number of years attempting to implement the MVP pattern well before I came to this conclusion.

This post contains a short example that inserts a controller in the request pipeline before the Web Form.  This allows large and bloated Page_Load methods to offload a bit of logic to a controller that executes in front of the Web Form.  Interestingly enough, this same technique allows an ASP.NET MVC page to leverage post-backs and server side controls.

Here is the solution view:

image

Default.aspx.controller.cs is the controller that executes ahead of Default.aspx.  The Visual Studio tooling doesn’t know to nest this file like I would like it.

Here is the page run the first time:

image

And here is the page after 3 clicks on the button that is an <asp:Button/>

image

Our page looks like the following:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" 
Inherits="MvcApplication1.Controllers.Default" %>
<%@ Import Namespace="MvcApplication1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%var cust = (Customer) ViewData["model"]; %>
        
        <h1>Web Form with front controller</h1>
        Customer #: <%=cust.Id %><br />
        Name: <%=cust.Name %><br />
        Is Preferred: <%=cust.IsPreferred %>
        
        <asp:Button Text="Do a postback" runat="server" ID="btn" 
        onclick="btn_Click" />
    </div>
    </form>
</body>
</html>

Here is the code-behind:

using System;
 
namespace MvcApplication1.Controllers
{
    public partial class Default : ViewDataPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
 
        protected void btn_Click(object sender, EventArgs e)
        {
            btn.Text += " - " + DateTime.Now.ToString("hh:mm:ss");
        }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now, we can see that we are retrieving the Customer from ViewData.  But wait, Web Forms don’t have view data.  That’s correct.  That’s why I’ve made ViewDataPage an IViewDataContainer:

using System.Web.Mvc;
using System.Web.UI;
 
namespace MvcApplication1
{
    public class ViewDataPage : Page, IViewDataContainer
    {
        public ViewDataDictionary ViewData { get; set; }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now, here is the route that we are using:

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
 
namespace MvcApplication1
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801
 
    public class MvcApplication : HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
            routes.MapRoute(
                "Default", // Route name
                "{controller}", // URL with parameters
                new {controller = "Default"}
                // Parameter defaults
                );
        }
 
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
 
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now, what does the front controller look like?

using System.Web.Compilation;
using System.Web.Mvc;
using System.Web.Routing;
 
namespace MvcApplication1.Controllers
{
    public class DefaultController : Controller
    {
        protected override void Execute(RequestContext requestContext)
        {
            var customer = new Customer
                               {
                                   Id = 2,
                                   Name = "Jeffrey Palermo",
                                   IsPreferred = true
                               };
 
            ViewData.Add("model", customer);
            string controllerName =
                requestContext.RouteData.GetRequiredString("controller");
            string pagePath = string.Format("~/Controllers/{0}.aspx", 
                controllerName);
            var page = (ViewDataPage) BuildManager
                  .CreateInstanceFromVirtualPath(
                  pagePath , typeof (ViewDataPage));
            page.ViewData = ViewData;
            page.ProcessRequest(System.Web.HttpContext.Current);
        }
    }
}

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Notice that I overrode the Execute method.  In this case, there is no need for the concept of an action.  We merely have an object that executes before the Web Form.  Then the controller builds the Web Form and asks it to process the request.

Half of this method could easily be factored into another class, but it works very simply.   I did not have to jump through any hoops.  I hammered out this code in about 10 minutes.

If your Page_Load methods are getting too long, consider putting a front controller in front of the page.