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

Question

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

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

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

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

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

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

Я смотрел на движки просмотра, перечисленные в 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>
<% } %>

Кому:

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

2. Заставьте ViewModel тянуть вес

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

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

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

Кому:

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

3. Использовать пустой вид

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

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

Вы сэкономите много вложений и Count> 0 / empty / null проверка в вашей разметке.

---

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

Answer 2

Ну, в 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>

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