ASP.NET。 MVC 2 C＃：这么多的空白

Question

我的代码中有一部分是<% %>语句和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 -->

毛重！

Answer 1

在IIS中启用GZIP压缩。使用GZIP压缩可以大大降低HTML中空格的影响。

例如参见：http://www.kwaree.com/blog/2009/11/27/how-to-remove-whitespace-from-html-code/

  

“删除空格不是   值得努力。任何体面的网络   服务器配置为使用“gzip”   用于html服务的编码   文档。空白很容易   压缩，将不会   显着改变了数量   提供文件所涉及的数据。   虽然最终结果会更小，   它不会是一个几乎一样大的   随便观察会获得   建议“。

Answer 2

好吧，你犯了很多错误。你有这么多空白的原因是你将每个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>

您可以看到我如何删除了大量<%和%>以及联合代码块

Answer 3

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

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

如果您想发布您的来源，我确信如果 想要的话，有办法消除空白。但你可能最好忽略它。 ：）

编辑：好的，试试吧。使用专用的视图模型，这样您就可以让控制器在控制器逻辑中分配图像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 -->

你需要Model.Filter成为IEnumerable，它看起来像：

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; }
}

• 类似AutoMapper之类的内容可能在填充视图数据对象时非常有用。

在此示例中，您还将创建一个CSS规则，如：

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

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

这有帮助吗？

Answer 4

您可以使用HTTP模块删除空白。 Mads Kristensen有一个： http://madskristensen.net/post/A-whitespace-removal-HTTP-module-for-ASPNET-20.aspx

Answer 5

在你的来源中考虑这个例子：

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

<ul>（服务器标签的缩进）后面有很多虚假的空格。您可以将其重写为：

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

采用服务器标签始终在线开始的样式。 IMO，虽然不值得 - 我会选择@ Hightechrider的解决方案。

Answer 6

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

• 远远地进出代码/ HTML。

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

• 你的视图中有逻辑。考虑将该逻辑移回控制器。您的模型应该有一个名为GroupLabelImage的属性，switch属于控制器。然后你应该只写出一次图像。

• 所有计算都应移至控制器。

Answer 7

跟进我对@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>