Question

当我看到我写的一个MVC视图时，它看起来像标签意大利面，特别是VS 2008的默认配色方案。所有<%黄色标签%>到处都是。区分服务器端和客户端端代码真的很难。

在经典ASP中，它并没有那么糟糕，因为通常服务器端代码块不像轻量级MVC视图那样交错。它们是大块，因此很容易区分。现在，客户端和服务器端代码之间几乎有1：1的交错（例如，一个线路客户端，一个线路服务器，继续）。当我试图了解视图产生的内容时，我正处于癫痫发作的边缘。

如果我至少可以为服务器端代码提供单独的背景颜色，我认为这会有所帮助。虽然VS2008不允许这样做。

我从<% / %>标签中删除了黄色背景颜色，现在看起来更好了，至少修正了我眼中的抽搐，但仍然很难跟踪视图的流量。

我也可以使用其他视图引擎解决这个问题，但我不知道是否有任何提供WebForms的奢侈品：

服务器端代码的语法突出显示
智能感知
编译

我看了view engines listed in SO，特别是Spark，但我不喜欢它与HTML代码混合的方式。我认为这会使上述问题变得更糟。

以下是我不喜欢的示例代码：

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Views/Shared/site.master" 
    Inherits="System.Web.Mvc.ViewPage<SomeModel>" %>
<%@ Import Namespace="SomeHelpers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="body" runat="server">
<h1><%= Html.Encode(Model.Title) %></h1><br /><br />
<% if (Model.Found) { %>
    <% foreach (var item in Model.List) { %>
    <div class="item">
       <%= item.ProductID %> - <%= Html.SomeHelper(item.Description, 32000) %>
       <div class="itemsub">(<%= Html.SomeOtherHelper(item.Customer) %>, 
       <%= Tools.AnotherHelper(item.OrderDate, item.ShipDate) %>)</div>
    </div>
    <% } %>
<% } else { %>
    Item Not Found <br />
    <% if (Model.Items.Count > 0) { %>
       Some Text Here<br />
       <ul>
       <% foreach(var i in Model.Items) { %>
           <li><%= Html.SomeHelper(i) %></li>
       <% } %>
       </ul>
    <% } %>          
<% } %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="title" runat="server">
<%= Html.Encode(Model.Title) %> - Badass Web Site
</asp:Content>

粘贴代码后，我注意到SO在正确突出显示服务器/客户端代码方面做得更好:)我不认为VS2008中可以进行这种突出显示（你必须完全改变C＃突出显示）我不喜欢）。

Answer 1

<强> 1。部分观点是您的朋友

使用RenderPartial并为属于循环的任何项目分隔部分视图。这也有助于使用ajax进行实时更新，因为您可以非常轻松地获取单个项目的呈现HTML而无需刷新页面。

 <% foreach (var item in Model.List) { %>
<div class="item">
   <%= item.ProductID %> - <%= Html.SomeHelper(item.Description, 32000) %>
   <div class="itemsub">(<%= Html.SomeOtherHelper(item.Customer) %>, 
   <%= Tools.AnotherHelper(item.OrderDate, item.ShipDate) %>)</div>
</div>
<% } %>

要

<% foreach (var item in Model.List) Html.RenderPartial("itemTemplate", item ); %>

<强> 2。使ViewModel拉动其权重

在视图模型中执行更多字符串操作和逻辑，而不是加载一次性使用Html帮助程序或类似操作。也许把HtmlEncoding放在你的ViewModels属性setter中？或者在ViewModel中使用GetBoldedFirstName（）等方法

现在这有点混淆C＃和HTML标记之间的分离但是你的Html标记会感谢你更清洁。我个人不喜欢让100个单独使用的助手漂浮在周围，并认为这种技术使得标记读得更好。

<div class="item">
   <%= item.ProductID %> - <%= Html.SomeHelper(item.Description, 32000) %>
   <div class="itemsub">(<%= Html.SomeOtherHelper(item.Customer) %>, 
   <%= Tools.AnotherHelper(item.OrderDate, item.ShipDate) %>)</div>
</div>

要

<div class="item"> <%= item.ProductID %> - <%= item.FormattedDescription(3200) %> <div class="itemsub"> (<%= item.GetCustomerName() %>, <%= item.GetPrettyOrderStatusString() ) </div> </div>

第3。使用空视图

我尽量保持我的标记尽可能愚蠢，并且喜欢将尽可能多的逻辑烘焙到实际的视图模型或动作方法中。

对于“空”页面，我尝试做的是为我的所有空网格创建一个共享视图，就像为网站制作一个404页面一样。您的控制器应该知道您没有任何要显示的内容并返回相应的视图。

你将保存很多嵌套，并在你的标记中计算＆gt; 0 / empty / null检查。

Rob Connery也有一篇关于这个主题的优秀文章： http://blog.wekeroad.com/blog/asp-net-mvc-avoiding-tag-soup/

Answer 2

嗯，Spark有你提到的一切 - 语法高亮，Intellisense（虽然工作80％），视图编译和预编译。而且你不是被迫“混合”HTML代码，你仍然可以使用手动C＃代码，甚至是现有的WebForms引擎标记！

因此，以下任何一种都可以在Spark

中使用

<% foreach (var product in Model) { %>
  <li><%= product.Name %></li>
<% } %>

# foreach (var product in Model) {
  <li>${product.Name}</li>
# }

<li each="var product in Model">${product.Name}</li>

对我而言，后者是一个明显的赢家。但至少你有选择。

WebForms视图引擎看起来很难看，有什么办法可以美化它吗？

2 个答案: