MS MVC: Is there a way to separate C# code from markup in MVC views?

Question

Our ad department pumps out Html code that they constantly change (and totally manage themselves). They have no knowledge of JavaScript, let alone C# etc. beyond a purely designer's point of view. Anything in their realm will be purely HTML and CSS (just like InDesign is to PostScript printing). All of this is really as it should be (truly separated concerns).

So, within MS MVC views, it looks like the norm is to lace html with C# code using <%= %>. Of course, if I do this, it will be removed next update. With JavaScript, we simply locate what we need with JQuery then add the appropriate code.

One very important thought as Phil Haack noted somewhere in his blog (forgive me if I state this incorrectly) is to include what data you need on the first visit within the first visit's html. (Again I apologize if I state this incorrectly) this is because heavy traffic websites cause a delay when loading the data separately which is not desirable.

So is there a way to pseudo separate your html markup from the C# code on the server rather than load data separately with JQuery client side? I can have them break up the HTML as necessary, like we do with partial pages. I can even have them add placeholders with HTML tags as necessary since this is more XML than programming, e.g.,
<productName> Apple </productName>

Any ideas?

Answer 1

You might think about using different ViewEngine, such as NVelocity, NHaml, Spark.

But I do not understand how the disgner could possibly render a list of products if he/she doesn't know what a cycle is.

The designer should know some kind of language to do that (apart from HTML/CSS).

So you might choose the ViewEngine that best suites the designer.

Answer 2

Using a content management / optimizer tool for your ad department could be another approach. Then they can change the markup / ads independent of your implementations / views.

Products like Google's Website Optimizer let the developer define regions on the website (usually with JavaScript and HTML) that can be updated by non developers. I've worked on a couple sites that took this approach, I thought it worked well.

Answer 3

Yes, there is. Use the HtmlHelper's RenderAction extension and move that logic back into a controller action, where it belongs. I blogged about it here:

http://eduncan911.com/blog/html-renderaction-for-asp-net-mvc-1-0.aspx

Basically, RenderAction is similar to RenderPartial - except it actually calls an Action method on a Controller. THis allows you to call a controller's action method from your View, and pass any parameters (such as the Model, Route, etc) into the action method to write code against. It has greatly simplified our views by moving that logic back into the controllers, and using additional partial views loaded by those smaller action method calls.

RenderAction was suppose to be part of Asp.Net Mvc 1.0, but it didn't make the cut before RC1. Microsoft has said it will be included in Asp.Net Mvc when it is released.

Steven Sanderson also write a book that included extensive use of RenderAction in Pro Asp.Net Mvc Framework.

Answer 4

Why do you want to put code in your view? Your view should essentially be formatting the data the controller get from the model, shouldn't it? I understand the problem having to "know" what data is in ViewData but if you've taken the red pill and gone for MVC, you probably have a helper method library that helps your designers pick the right things with autocomplete.

Answer 5

I strongly recommend Spark View Engine. Here's how it helps: all the C# code will be inside Spark custom elements - basically conforming to HTML rules. So your designers can just ignore them:

<div each="var product in Model.Products" if="Model.Products.Count > 0">
   <span class="${product.Class} another-product-class">${product.Name}</span>
   <ProductDetail renderClass="something" />
</div>
<else>No products</else>

Now, each attribute contains your C# code to loop records, and ${} contains specific attributes to render. Note that ${} can be seen as "sample content", and C#-specific code can be just ignored as some custom HTML attribute/tag - and it still looks like HTML.

Also, did you note the ProductDetail tag? That's how Spark allows you to render partials. Once again a semi-HTML tag. Your designers should be happy to see it instead of

<% Html.RenderPartial("_ProductDetail", new { renderClass = "something" }) %>

Besides that, it's a pleasure to work with, boosts your productivity, and allows for many things that Web Forms engine doesn't have (like macros).

From another point of view, why should designers touch the view code at all? Let them work with CSS style sheets, except for those rare cases when CSS can't do without modifying layout a bit - you do this fix and designers can do theirs in CSS.

P.S. And of course, put as little C# code into views as possible.