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

当我看到我写的MVC视图时，我觉得它就像是标签意大利面，尤其是VS2008的默认配色方案。到处都是

。很难区分服务器端代码和客户端代码

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

如果我至少能为服务器端代码提供一个单独的背景色，我想这会有所帮助。不过VS2008不允许这样做

我从

标签中删除了黄色背景色，现在看起来更好了，至少修复了我眼睛的抽搐，但仍然很难跟踪视图的流程

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

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

我看了，特别是，但我不喜欢它如何与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>

- 
(, 
)
未找到项目

0) { %>
这里有一些文本




-坏蛋网站

---

粘贴代码后，我注意到SO在正确突出显示服务器/客户端代码方面做得更好：）但我认为这种突出显示在VS2008中不可能（你必须完全更改C#突出显示，这是我不喜欢的）。

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 ); %>

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

2.使ViewModel发挥其作用

在视图模型中执行更多的字符串操作和逻辑，而不是使用一次性Html助手或类似工具加载。可以在ViewModels属性设置器中使用HtmlEncoding，或者在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>

- 
(, 
)

至：

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

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

- 
(, 
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 ); %>

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



2.使ViewModel发挥其作用

在视图模型中执行更多的字符串操作和逻辑，而不是使用一次性Html助手或类似工具加载。可以在ViewModels属性设置器中使用HtmlEncoding，或者在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>


- 
(, 
)

至：

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

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


- 
(, 
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>



#foreach（模型中的var乘积）{
${product.Name}
# }
${product.Name}

对我来说，后者是一个明显的赢家。但至少你有选择。
好吧，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>



#foreach（模型中的var乘积）{
${product.Name}
# }
${product.Name}

对我来说，后者是一个明显的赢家。但至少你有选择。
谢谢！关于你的观点：1）没有看过RenderPartial，我会看看。我认为在这个粒度级别上维护太多文件会有开销。2）将HTML移到C#代码只是将问题移到了那里，并不能解决问题。Rob的文章使用了类似的方法。3）对未找到的案例使用不同的视图是一个很好的建议，谢谢！我希望答案不断出现。看起来我不是这里唯一的人：）重温你的答案@jfar，你的观点今天更有意义。我显然误解了我们的第二个建议实际上从视图中删除了太多的开销，使其更具可读性。再次感谢。谢谢！关于您的观点：1）没有查看RenderPartial，我将检查它。我认为在该粒度级别上维护太多文件会带来开销。2）将HTML移动到C代码只会解决问题re，没修好Rob的文章