How can I avoid tag soup with MVC?

Question

I was reading this in my quest to justify MVC over non-mvc like regular old php (not using MVC, even classic asp could be used, albeit painfully):

http://www.codinghorror.com/blog/2008/07/web-development-as-tag-soup.html

And I can't find the answer. I think it is inevitable to get tag soup. Yes, I know MVC separates the model and controller, but when you get to the view, everything just goes hideous. I can read emitted html just as good or better than tag soup.

I won't be using unit testing, so it's not that important an advantage. I'm not sure how I can ever avoid an ugly view, now matter how I get it wither mvc or just emitting html.

I do not see it any easier to maintain a view with all the bizarre coding (and it is code) than using response.write "<table>".

example: Dealing with ASP.NET MVC "tag soup"

The answer by Arnis (no offense to him or anyone else), fixes the horrible code in the question, but to me that still looks bad or at least not what I expect. To me those angle brackets might just as well have been <% %> or <?php ?>.

I like things like codeigniter and it's really the cleanest I've seen but it's still not what I expect. I think I was hoping some magic was present in MVC that made everything beautiful. Apparently, unless one is really really careful, there no better off than they were with classic asp, as it relates to a view.

This is mostly about the view. Not about which language is better for what or who's template engine is the greatest (they all have the same markup mixup tendencies).

Believe me. I want to make MVC work with my co-developers, so I'm not railing against it as a paradigm at all. I can't get them to agree to something just because everyone's doing it or something like that.

Thanks for any comments. I have to be able to justify these things, and while I understand MVC and what I am getting, the view makes a lot of it seem like a big waste of time.

edit: Everything seems to be geared toward a particular framework instead of plan. I see some insight but in the end it seems there is no way other than discipline. Thank you all for your answers.

Answer 1

Have a look at using the Razor view engine, which is included in MVC 3. Also try to keep all your logic in the Controller class and build a Model based on what is displayed in the View.

• Razor is one obvious way to avoid tag soup as there's no need for any <% and %> tags - simply an @ before your code and the view engine works out where the C# ends and the HTML starts.

  <span class="name">@Model.Name</span>
  

  Even loops and if statements still look sexy in a .cshtml file with Razor and that magic @ character.

  @if(shouldDisplayDiv) {
      <div id="mydiv">Div is displayed!</div>
  }
  
  
  @foreach(User user in Model.Friends) {
      <a href="@user.Url"><img src="@user.ImageUrl" title="@user.Name" /></a>
  }
  

  Razor also handles HTML encoding for you by default, so your view won't be full of Html.Encode calls. (Note: if you need to output HTML, you can use the Html.Raw helper method).

• Putting your logic into the Controller will ideally remove the need for large code blocks in the view. Try to get the model objects to contain all the dynamic data for the view, exactly as it will be displayed in the view. Aim to not have any C# code in your view at all (pointless, but if that's the target, see how close you can get to it!).

• Partial views can nicely separate different parts of your view (but try not to use them too much). You can also pass a different model object to each partial view, which I find can be handy for some large loops, or a little something like a flair.

• HTML Helpers are also very useful (thanks subkamran). There's a similar concept here to the partial views mentioned above, but HtmlHelpers are slightly different because you specify the method's parameters (and their types), as opposed to partial views which you may pass a single Model object. Here is a good example of how to implement them. Again, these can look very neat in your cshtml code.

   <div class="specialdiv">@Html.SomeMethod(Model, "String", 5)</div>
  

• Client-side MVC is another option, and a strong suggestion if you are developing AJAX-heavy web applications. Following the logic in the controller you would use a client-side MVC framework like Backbone.js to template HTML in a tidy manner, and use jQuery .ajax() to talk back and forth with your controller. It's a great practice for separating your presentation layer, leaving you with some beautiful View markup!

I stick to these little guidelines and it works like a charm for me. Nice, clean HTML markup with the occasional @ character. Very easy to maintain (well at least the Views are!).

EDIT: Please note that all of these points are included in ASP.NET MVC 3 and are all 'best practices' are far as Microsoft are concerned. There is no need to install any extra frameworks, plugins or addons to stick to these guidelines.