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

GROSS!

Answer 1

ОК, вы делаете ряд ошибок. Причина, по которой у вас так много пробелов, заключается в том, что вы помещаете каждый блок кода 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> 

Вы можете увидеть, как я удалил тонну ваших <% и %> и сиамских CodeBlocks вместе

Answer 2

Много вещей. Вы можете просто удалить пробелы ... несколько пробелов не имеют значения ни в C#, ни в HTML.

Или вы можете переписать свое мнение, чтобы использовать модель просмотра DTO, тесно связанную со структурой страницы, так что вы испускаете предварительно отформатированные фрагменты и частичные элементы управления, а не какую-либо сложную логику управления в своем коде страницы?

Если вы хотите опубликовать свой источник, я уверен, что есть способы устранить пробелы, если вы действительно хотите. Но вы, вероятно, лучше просто игнорируете это. :)

EDIT: Хорошо, попробуйте это. Используйте специальную модель представления, чтобы вы могли назначить контроллеру такие объекты, как 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 3

Вы можете использовать HTTP-модуль для удаления пробелов. Mads Kristensen имеет один: http://madskristensen.net/post/A-whitespace-removal-HTTP-module-for-ASPNET-20.aspx

Answer 4

Включить сжатие GZIP в IIS. Эффект белого пространства в HTML значительно уменьшается при сжатии GZIP.

Смотрите, например:. http://www.kwaree.com/blog/2009/11/27/how-to-remove-whitespace-from-html-code/

«. Удаление неиспользованного не стоит стремиться Любой приличный веб сервер настроен на использование„GZIP“ кодирования для сервировки HTML документирует пробелы легко сжаты и не будут значительно изменить сумму данных, связанных с обслуживанием документа. Хотя конечный результат будет меньше, он не будет столь большим из усиления как случайного наблюдения будет предложить «

Answer 5

Рассмотрим этот пример в источнике:.

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

Это много ложных пробелов после <ul> (отступы к вашим тегам сервера). Вы могут переписать его как:

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

И принять стиль, когда серверные теги всегда начинаются на линии. ИМО, не стоит того, - я бы пошел с решением @ Hightechrider.

Answer 6

Рассмотрим несколько битов конструктивных точек улучшения :

• экранирование и выведение кода/HTML слишком много.

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

• У вас есть логика в вашем View. Попробуйте переместить эту логику обратно в контроллер. Ваша модель должна иметь свойство GroupLabelImage, а switch принадлежит контроллеру. Затем вы должны выписать изображение только один раз.

• все вычисления должны быть перемещены в контроллер.

Answer 7

Чтобы следить за мой комментарий к @Alastair Питтс, (вики, потому что я просто хочу, чтобы показать отформатированный пример) я абсолютно уверен, что это пробел между 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>