WebForms вид двигателя выглядит уродливым, любым способом его украсить?

Question

Когда я смотрю на MVC-представление, которое я написал, все это похоже на тег spaghetti для меня, особенно с цветовой схемой по умолчанию VS 2008. Это все <% желтые теги %> везде. Очень сложно отличить код сервера и клиента.

В классическом ASP это было не так уж плохо, потому что обычно серверные блоки кода не были чередованием, как легкие MVC-представления. Они были большими кусками, что легко различимо. Теперь происходит чередование 1: 1 между клиентским и серверным кодом (например, один клиент линии, один сервер строк). Я нахожусь на грани нападения эпилепсии, когда я пытаюсь понять, что такое представление.

Если бы я мог по крайней мере иметь отдельный цвет фона для серверного кода, я думаю, что это поможет. Однако VS2008 не позволяет.

Я удалил желтый цвет фона с <%/%> тегов, теперь он выглядит лучше, по крайней мере, исправил подергивание в моем глазу, но по-прежнему трудно отслеживать поток представления.

Я также хорошо с альтернативной точки зрения двигателей, чтобы исправить эту проблему, но я не знаю, есть ли что дает некоторые предметы роскоши WebForms':

• подсветка синтаксиса для серверного кода
• Intellisense
• Составитель

Я смотрел на 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> 
<% } %> 

To:

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

2. Сделайте ViewModel тянуть его вес

сделать гораздо больше строк манипуляции и логику в моделях просмотреть вместо загрузки с одного используйте Html-помощники или аналогичные. Может быть, поместить HtmlEncoding в ваши средства настройки свойств ViewModels? Или используйте такие методы, как GetBoldedFirstName() в вашем ViewModel

Теперь это немного путает разделение между C# и HTML-разметкой, но ваша разметка Html благодарит вас за то, что вы чище.Мне лично не нравится, когда 100s однопользовательских помощников плавают вокруг и думают, что этот метод делает разметку лучше.

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

To:

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

3. Используйте Empty Посмотреть

Я стараюсь держать свою разметку, как глупо, как это возможно, и предпочитают, чтобы испечь как можно больше логики в реальное просмотреть модель или метод действия, я могу.

Для «пустых» страниц, которые я пытаюсь сделать, это сделать общий вид для всех моих пустых сеток, как если бы вы сделали одну страницу 404 для веб-сайта. Ваш контроллер должен знать, что вам нечего показывать и возвращать соответствующий вид.

Вы сохраните много гнездования и Count> 0/empty/null, проверяя вашу разметку.

---

Роб Коннери имеет отличную статью на эту тему, а также: http://blog.wekeroad.com/blog/asp-net-mvc-avoiding-tag-soup/

Answer 2

Ну, Спарк есть все упомянутое - подсветка синтаксиса, Intellisense (работает на 80%, хотя), рассматривает компиляцию и прекомпиляцию. И вы не вынуждены «смешивать» HTML-код, вы все равно можете использовать ручной код C# и даже существующую разметку двигателя WebForms!

Так что либо из следующих будет работать в Спарк

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

мне последний является явным победителем. Но по крайней мере у вас есть выбор.