C# ASP.NET。MVC2C：这么多空白_C#_Asp.net Mvc 2

C# ASP.NET。MVC2C：这么多空白

c# asp.net-mvc-2

C# ASP.NET。MVC2C：这么多空白,c#,asp.net-mvc-2,C#,Asp.net Mvc 2,我的代码中有一部分混合了语句和HTML。。。视图源非常可怕。空白太多了，让我恶心透顶我能做些什么吗  <div class="divFilterWrap"> <img src="/Content/Images/filterMainCuisineHeader.gif" /> <ul> <% int count = 1;

我的代码中有一部分混合了语句和HTML。。。视图源非常可怕。空白太多了，让我恶心透顶

我能做些什么吗

<!-- START Content -->
  <div class="divFilterWrap">

            <img src="/Content/Images/filterMainCuisineHeader.gif" />

            <ul>
            <% int count = 1; %>
            <% foreach (var filter in Model.Filter)
               { %>

               <% if (filter.GroupOrder == count) {
                  } else { %>

                    <% count++; %>

                    </ul>
                    <% switch (filter.GroupLabel)
                       { %>

                       <% case "Main Cuisine": %>
                       <img src="/Content/Images/filterMainCuisineHeader.gif" width="175" height="30" />
                       <% break; %>

                       <% case "Dining Style": %>
                       <img src="/Content/Images/filterDiningStyleHeader.gif" width="175" height="30" />
                       <% break; %>

                       <% case "Price Range": %>
                       <img src="/Content/Images/filterPriceRangeHeader.gif" width="175" height="30" />
                       <% break; %>

                    <% } %>
                    <ul>

               <% } %>

               <% if (filter.TagCount > 0) { %>

                    <% if (filter.TagChecked == 1) { %>

                        <li class="checked"><%: filter.TagLabel %> (<%: filter.TagCount %>) <span class="closeImage"><img src="/Content/Images/filterButtonClose.gif" /></span></li>

                    <% } else { %>

                        <li><%: filter.TagLabel %> (<%: filter.TagCount %>)</li>

                    <% } %>

                <% } %>

            <% } %>
            </ul>

  </div><!-- END Content -->

C代码所在的位置，在查看源代码时会保留该空间。下面是它的样子：

<!-- START Content -->
  <div class="divFilterWrap">

            <img src="/Content/Images/filterMainCuisineHeader.gif" />

            <ul>


                        <li>Coffee / Tea House (1)</li>



                    </ul>

                       <img src="/Content/Images/filterDiningStyleHeader.gif" width="175" height="30" />

                    <ul>



                        <li>Casual Dining (1)</li>



                    </ul>

                       <img src="/Content/Images/filterPriceRangeHeader.gif" width="175" height="30" />

                    <ul>



                        <li>$8 to $15 (1)</li>


            </ul>

  </div><!-- END Content -->

public class FilterViewData {
    public int GroupOrder { get; set; }
    public int TagCount { get; set; }
    public string CssClass { get; set; }
    public string ImageUrl { get; set; }
    public string TagLabel { get; set; }
}

真恶心

很多事情。你可以删除空白。。。多个空格在C或HTML中都不重要

或者您可以重写视图，使用视图模型数据与页面结构紧密耦合，这样您就可以发出预格式化的片段并呈现部分控件，而不是在页面代码中使用任何复杂的控件逻辑

如果你想发布你的源代码，我相信如果你真的想，有办法消除空白。但你最好还是忽略它

编辑：好的，试试这个。使用专用视图模型，这样您就可以让控制器在控制器逻辑中分配图像URL之类的内容，而不是在页面代码中进行分支

<img src="/Content/Images/filterMainCuisineHeader.gif" />
<ul>
    <% 
    int count = 1;
    foreach (var filter in Model.Filter) {
         if (filter.GroupOrder != count) {
            count++; 
    %></ul>
           <img src="<%=filter.ImageUrl%>" width="175" height="30" />
        <ul>
       <% 
    }
    if (filter.TagCount > 0) { %>
            <li class="<%=filter.CssClass%>">
                <%: filter.TagLabel %> (<%: filter.TagCount %>) 
                <span class="closeImage">
                   <img src="/Content/Images/filterButtonClose.gif" /></span>
            </li><%
       } 
    } 
    %></ul>
</div><!-- END Content -->

类似的内容在填充视图数据对象时可能非常有用。在本例中，您还将创建一个CSS规则，如：

li.unchecked span.closeImage { display: none; }

这样closeImage范围和图像就不会出现在未选中的列表项中

这有帮助吗？

您可以使用HTTP模块删除空白。Mads Kristensen有一个：

在IIS中打开GZIP压缩。使用GZIP压缩，HTML中的空白效果大大减少

例如，见：

删除空白并不是一个好办法值得努力。有像样的网吗服务器配置为使用“gzip” html服务的编码文件。空白很容易被删除压缩，将不会显著改变提供文件所涉及的数据。虽然最终结果会更小，它将不会是一个几乎和随随便便的观察而获益建议

在您的源代码中考虑以下示例：

        <ul>
        <% int count = 1; %>
        <% foreach (var filter in Model.Filter)

在缩进到您的服务器标记之后，有很多虚假的空白。您可以将其改写为：

        <ul>
<% int count = 1; %>
<% foreach (var filter in Model.Filter)

并采用服务器标记始终从行开始的样式。在我看来，这并不值得——我会选择@Hightechrider的解决方案。

好吧，你犯了很多错误。你有这么多空白的原因是你把每个C代码块放在一个新行上。你不需要这样做。查看我的更改：

<img src="/Content/Images/filterMainCuisineHeader.gif" />
<ul>
<% int count = 1;
    foreach (var filter in Model.Filter)
    {
        if (filter.GroupOrder == count) {
        } else {
            count++; %>
        </ul>
        <% switch (filter.GroupLabel)
           { 
               case "Main Cuisine": %>
           <img src="/Content/Images/filterMainCuisineHeader.gif" width="175" height="30" />
           <% break; 
               case "Dining Style": %>
           <img src="/Content/Images/filterDiningStyleHeader.gif" width="175" height="30" />
           <% break;
               case "Price Range": %>
           <img src="/Content/Images/filterPriceRangeHeader.gif" width="175" height="30" />
           <% break;
           } %>
           <ul>
        <% }
        if (filter.TagCount > 0) {
            if (filter.TagChecked == 1) { %>
            <li class="checked"><%: filter.TagLabel %> (<%: filter.TagCount %>) <span class="closeImage"><img src="/Content/Images/filterButtonClose.gif" /></span></li>
            <% } else { %>
            <li><%: filter.TagLabel %> (<%: filter.TagCount %>)</li>
            <% }
        } 
    } %>
</ul>

您可以看到我如何删除了大量的代码块，并将它们连接在一起

请考虑一些建设性的改进点：

在代码/HTML中转义太多。你的观点是有逻辑的。考虑把那个逻辑移回控制器。您的模型应该有一个名为GroupLabelImage的属性，该开关属于控制器。然后你应该只写一次图片

所有计算都应移至控制器

为了跟进我对@Alastair Pitts，wiki的评论，因为我只想展示格式化的示例，我非常确定，真正的罪魁祸首是HTML和ASP.Net标记之间的空白，因此，当您查看源代码时，从这样的内容开始可能会看起来更好，但在Visual Studio中，它缺乏可读性：

<img src="/Content/Images/filterMainCuisineHeader.gif" />
<ul><%
int count = 1;
foreach (var filter in Model.Filter) {
  if (filter.GroupOrder != count)
  {
  }
  else
  {
    count++; 
%></ul><%
    switch (filter.GroupLabel)
    { 
      case "Main Cuisine":
  %><img src="/Content/Images/filterMainCuisineHeader.gif" width="175" height="30" /><%
        break; 
      case "Dining Style":
  %><img src="/Content/Images/filterDiningStyleHeader.gif" width="175" height="30" /><%
        break;
      case "Price Range":
  %><img src="/Content/Images/filterPriceRangeHeader.gif" width="175" height="30" /><%
        break;
    }
%><ul><%
  }

  if (filter.TagCount > 0)
  {
    if (filter.TagChecked == 1)
    {
  %><li class="checked"><%: filter.TagLabel %> (<%: filter.TagCount %>)
    <span class="closeImage">
      <img src="/Content/Images/filterButtonClose.gif" />
    </span>
  </li><%
    }
    else
    {
  %><li><%: filter.TagLabel %> (<%: filter.TagCount %>)</li><%
    }
  }
}
%></ul>

如果您查看stackoverflow的html源代码，就会发现有大量空白。为什么这是个问题？这是个问题，因为它是不必要的。这是一个.NET诅咒，页面在遵守时没有被禁止。服务器端标记不应保留页面源空间。他们最终只是呈现HTML……stackoverflow的视图源是干净和正常的。如果您没有实际向我们展示它的外观，我们就没有参考框架。所以请记住：你的空白是残暴的，是对我脆弱的眼睛的侮辱。你需要彻底重新设计一切，STAT！我不认为这是一个坏问题-忽略空白在任何正常情况下对性能影响很小的事实，对发生的事情的解释有其自身的价值。我认为这就是答案。。。我的观点是处理模型数据。在视图中，我循环浏览模型数据。您的意思是我应该在分部中执行循环，这样在编译分部时，它将消除我遇到的空白？请参阅编辑。经过适当调整的视图数据、流线型标记和一些巧妙的CSS使用相结合，可以使您的页面更干净，而不会丢失代码的结构和可读性。我已经为此使用了一个ViewModel和一个模型。。。但是当页面呈现时，我需要交互模型内容。我是不是遗漏了什么？我不想删除indetation。。。我想消除C代码似乎保留的保留空间。@dcolombus-gzip没有删除任何内容，它只是压缩响应流。原则上我同意，我希望没有

o由视图引擎创建的零额外空白，并依靠智能客户端在查看时正确格式化源代码，但对输出大小的影响最小。是的，我明白了。。。出于某种原因，我对关闭标签有一种癖好。这一点说得很好。我相信这种方法实际上可以更进一步。如果您认为视图的正常内容是C而不是html，那么您可以将%>视为html内容的开始标记，并且当图像仅在组更改后更改时，模型如何具有属性GroupLabelImage？这就是我使用开关的原因。我正在检查组标签是否已更改。。。

<img src="/Content/Images/filterMainCuisineHeader.gif" />
<ul><%
int count = 1;
foreach (var filter in Model.Filter) {
  if (filter.GroupOrder != count)
  {
  }
  else
  {
    count++; 
%></ul><%
    switch (filter.GroupLabel)
    { 
      case "Main Cuisine":
  %><img src="/Content/Images/filterMainCuisineHeader.gif" width="175" height="30" /><%
        break; 
      case "Dining Style":
  %><img src="/Content/Images/filterDiningStyleHeader.gif" width="175" height="30" /><%
        break;
      case "Price Range":
  %><img src="/Content/Images/filterPriceRangeHeader.gif" width="175" height="30" /><%
        break;
    }
%><ul><%
  }

  if (filter.TagCount > 0)
  {
    if (filter.TagChecked == 1)
    {
  %><li class="checked"><%: filter.TagLabel %> (<%: filter.TagCount %>)
    <span class="closeImage">
      <img src="/Content/Images/filterButtonClose.gif" />
    </span>
  </li><%
    }
    else
    {
  %><li><%: filter.TagLabel %> (<%: filter.TagCount %>)</li><%
    }
  }
}
%></ul>