Anyone out there with Visual Studio 2008 installed is welcome to try out an open source utility I’ve put together. If you have feedback or bug reports those would be greatly appreciated.

Mvc Plastic Editor

It’s called MvcPlastic.

  • Capturing view context and view data as it occurs
  • Reviewing rendered screens as you would a slide deck
  • In-place editing of the views and content files
  • Tweak repeatedly without re-submitting forms or re-executing controller actions

It’s a single dll you can drop into a bin directory of an asp.net mvc (4/16) web app and activate with a line added to the web.config.

If you want to take a look see below for the svn info. You don’t need MVC installed - any bins needed come with the source and you can delete the folder without leaving anything in the registry or gac.

I was looking into the ASP.NET MVC library from Microsoft a little while ago and noticed how well they encapsulated the ViewData object. I was curious if you could save those ViewData objects and use them to recreate the view engine and re-generate the page.

So I did some experimenting and saw how easy it was to capture and recreate a person’s visit like it was a slide-show. I added the ability to edit the view template files to make it easy for a designer or html guru to adjust project source files on an engineer’s machines using only a browser. Sort of like a wiki.

That’s one of the biggest problems with wysiwyg ide editors - there’s no sample data or real “context” for the editor so they work well only on the most trivial pages. By capturing the view data used to render a page, you can edit and review as many times as you want and have real-world results shown to you immediately.

Links and resources

Or get the source for the project from MvcPlastic-source.zip, or get more current source from source control at:

svn co http://dev.dejardin.org/svn/plastic/trunk plastic

I’ve tested the plastic editor with the various alternate view engines in the MvcContrib project: NVelovity, Brail, NHaml. All three of their sample sites are included in the plastic/trunk solution. They’re unaltered except for the addition of MvcPlastic.dll, just so you know it’s compatible with those technologies as well.

And if you’re curious how the guts work to re-view a previous page - there’s an iframe where the source points at an action named regenerate. The id argument to regenerate is a guid that’s was created as a key when the view was captured.

So on the plastic controller is the following action:

public ActionResult Regenerate(Guid id)
{
    Client client = GetClient();
    Visit visit = client.Visits.FirstOrDefault(v => v.Id == id);

    return new RegenerateViewResult
               {
                   ViewEngine = visit.ViewEngine,
                   ViewContext = visit.ViewContext
               };
}

The data model in plastic has a client with an array of visits. The GetClient method uses the request address to associate any actions with a particular ‘client’ instance. That way you won’t other users visits mixed with your history, and it also helps just a little if it’s accidentally left enabled on a staging server. Possible security/confidentiality concerns if you could see other users visits.

And the regenerate view result does the following:

public class RegenerateViewResult : ActionResult
{
    public IViewEngine ViewEngine { get; set; }
    public ViewContext ViewContext { get; set; }

    public override void ExecuteResult(ControllerContext context)
    {
        // use all of the old values except the HttpContext
        ViewContext newContext = new ViewContext(
            new ControllerContext(
                context.HttpContext,
                ViewContext.RouteData,
                ViewContext.Controller),
            ViewContext.ViewName,
            ViewContext.MasterName,
            ViewContext.ViewData,
            ViewContext.TempData);

        ViewEngine.RenderView(newContext);
    }
}

Not that much to it, is there? The architecture they’re putting together is very clean and elegant. It’s also probably going to change significantly with each new preview so I’m thinking I’ll be rewriting these bits of code every four months or so until they release the first version.

The capturing of the views is also very simple. The original view engine is wrapped with a light-weight interceptor that stores the visit information as the site is used.

class PlasticViewEngine : IViewEngine
{
    readonly PlasticEditor _editor;
    readonly IViewEngine _original;

    public PlasticViewEngine(PlasticEditor editor, IViewEngine original)
    {
        _editor = editor;
        _original = original;
    }

    public void RenderView(ViewContext viewContext)
    {
        RecordVisit(viewContext);
        _original.RenderView(viewContext);
    }

    void RecordVisit(ViewContext viewContext)
    {
        Client client = _editor.GetCurrentClient(
            viewContext.HttpContext.Request);
        if (client == null || client.Enabled == false)
            return;

        client.Visits.Add(new Visit
        {
            Id = Guid.NewGuid(),
            ViewEngine = _original,
            ViewContext = viewContext
        });
    }
}

So there you go! Nothing to it. The tricky bit was getting a many-browser compatible draggable edit form to work.