Designer-friendly views in Asp.Net MVC

Question

I'm enjoying Asp.Net MVC and am looking to use it in an upcoming project. Part of the project, however, is an emphasis on being able to expose the project Views to designers for things like theming and so on. One problem I'm anticipating is that Asp.Net MVC views are rather developer-centric. I really don't want to have to educate designers on the intracies of <% vs. <%= let alone something like <% foreach ...

Take a typical MVC menu structure, for example.

<div id="menu">
 <ul>
      <li><%= Html.ActionLink("Home", "Index", "Main")%></li>
      <li><%= Html.ActionLink("About", "About", "Main")%></li>
      <li><% Html.RenderPartial("LogOnUserControl"); %></li>
  </ul>
</div>

I'd much rather be able to tell designers to go with something like

<div id="menu">
 <ul>
      <li>{ActionLink "Home", "Index", "Main"}</li>
      <li>{ActionLink "About", "About", "Main"}</li>
      <li>{Partial "LogOnUserControl"}</li>
  </ul>
</div>

Or

<div id="menu">
 <ul>
      <li><my:ActionLink text="Home" action="Index" controller="Main" /></li>
      <li><my:ActionLink text="About" action="About" controller="Main" /></li>
      <li><my:Partial name="LogOnUserControl" /></li>
  </ul>
</div>

Yes, that last looks suspiciously like a raft of UserControls. Personally, I'm not a fan of actually using UserControls to do this if only because the rendering of those controls happens after pretty much everything else (as I understand it) and I'd prefer something that fits more in line with the MVC lifecycle. All I really need is a set of placeholders and a way to replace them with the relevant rendering.

So where's the best place to do so and what kind of trade-offs am I looking at here. I can imagine a couple of angles to come at this:

• A custom ViewPage class where I can override something relevant. ViewPage.RenderView or ViewPage.FrameworkInitialize, maybe, but how you get at the text from there I don't know.
• Create a custom TextWriter and override ViewPage.CreateHtmlTextWriter that I can then intercept the text output for replacing stuff. This is pretty late in the cycle, though, and will mess with other custom filtering if I'm not careful.
• Create my own IView and ViewEngine classes. I didn't get far down this path before wondering if I was headed to a very bad place.
• Custom UserControls that can mimic the functionality needed.

Opinions? Other options? Is my own ViewEngine my best option? My own ViewPage? Or are UserControl objects going to be adequate (please say no)?

Answer 1

Take a look at Spark. It's syntax is similar to your example.

Answer 2

As Charles Conway said, Spark is definitely way to go. Look at example. First, you create partial view in _ActionLink.spark with code:

<viewdata text="String" action="String" controller="String">
${ Html.ActionLink(controller, action, text) }

Then you use it like that in other views:

<ActionLink text="Home" action="Index" controller="Main" />

You just have to prepare partial views for your designers and then they an create view in prefered style. Isn't it easy?

EDIT:

Sorry, that was wrong. <ActionLink text="Home" action="Index" controller="Main" /> will not work, because Home, Index and Main are treates as variables. It may not be that easy to do it as you wish.

Answer 3

While answered and accepted, I don't see the example of this: why don't you just use:

<li><a href='<%= Url.Action("Home", "Index")%>'>Main</a></li>

Similar in Spark. I prefer this to Html.ActionLink, Html.BeginForm, etc, whenever possible (almost always except for form controls where it's easier to have automatic name encoding with Html helpers).

And your designers do see the link.

Answer 4

I have a similar requirement for a current project, except my 'designers' are more or less end users (people that know their way around html, but it's not their job) which leads to some additional challenges. My implementation is probably too specific for your needs but I'll quickly explain it lest it be useful to anyone else.

I wanted to totally avoid any kind of code in the views for the pages they would be designing so I decided to go with a templating system that does something similar to your point #2, but not at runtime. I am also using spark, although it's not for the benefit of the users as they won't be touching anything that looks like code.

Basically the users create a full html-only template that has placeholder tags for user controls and partial views. The users then upload the template through an interface that parses it and turns it into a spark view.

eg. For a picture gallery, <gallery /> is parsed into something like !{Html.Gallery(Model)} or <use file="Gallery"/>. For a description field, <desc name="Kitchen" /> is parsed into !{Html.Description(Model, x => x.Descriptions.Kitchen)}. It also checks that "Kitchen" is in fact a property for the object/page that is being templated, or that the Model being passed in for a gallery actually contains a collection of images to avoid runtime errors.

Further properties can be specified in the tag to pass additional parameters to the parsed controls. If the control specified requires Javascript, then it is also included in the view. If there are any problems parsing, output is return specifying which placeholder is invalid and why.