WebForms보기 엔진이보기 흉하게 보이는데, 어떤 방법으로 그것을 아름답게 보이게 할 수 있습니까?

Question

내가 썼던 MVC 뷰를 보면 VS 2008의 기본 색 구성표와 함께 모두 태그 스파게티처럼 보입니다. 모든 부분이 <% 노란색 태그 %>입니다. 서버와 클라이언트 측 코드를 구별하기는 정말 어렵습니다.

전통적인 ASP에서는 보통 서버 측 코드 블록이 가벼운 MVC 뷰만큼 인터리브되지 않았기 때문에 그렇게 나쁘지 않았습니다. 그들은 그렇게 쉽게 구별 할 수있는 큰 덩어리였습니다. 이제는 클라이언트 측 코드와 서버 측 코드 사이에 거의 1 : 1 인터리브가 있습니다 (예 : 한 줄 클라이언트, 한 줄 서버, 계속). 나는 어떤 견해가 만들어 내는지 이해하려고 할 때 간질 발작이있을 위기에 처해있다.

적어도 서버 측 코드에 대해 별도의 배경색을 사용할 수 있다면 도움이 될 것 같습니다. VS2008은 그것을 허용하지 않습니다.

<%/%> 태그에서 노란색 배경색을 제거했는데, 지금은 눈에 띄는 부분을 수정해도보기 좋지만,보기의 흐름을 추적하는 것은 여전히 ​​어렵습니다.

나는이 문제를 해결하기 위해 또 다른 뷰 엔진과 확인 해요하지만 웹폼 '사치의 일부 제공하는 모든이 나도 몰라 :

• 구문 서버 측 코드를 강조
을
• 인텔리는 컴파일
는

나는 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 및 루프 내에 모든 항목에 대해 별도의 부분적인 도면이다. 또한 페이지를 새로 고치지 않고도 단일 항목에 대해 렌더링 된 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.하면 뷰 모델은 단일로드하는 최대 대신 뷰 모델에서 더 많은 문자열 조작과 논리를 수행의 무게

당겨 확인 Html 헬퍼 또는 유사한 것을 사용하십시오. 어쩌면 당신의 ViewModels 속성 setters에 HtmlEncoding을 넣으시겠습니까? 또는 ViewModel에서 GetBoldedFirstName()과 같은 메소드를 사용하십시오.

이제 C#과 HTML 마크 업 사이의 구분이 혼란 스럽지만 HTML 마크 업은 클리너에 대해 감사 할 것입니다.나는 개인적으로 주위에 떠 다니는 일회용 헬퍼가 100 개있는 것을 좋아하지 않으며이 기술로 인해 마크 업이 더 잘 읽히게한다고 생각한다.

<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 체크를하면 저장됩니다. 구문 강조, 인텔리 (하지만 80 % 작동), 컴파일과 사전 컴파일을 전망 - http://blog.wekeroad.com/blog/asp-net-mvc-avoiding-tag-soup/

Answer 2

음, 스파크는 당신이 언급 한 모든 것을 갖추고 있습니다 :

---

롭 코너리도이 주제에 대한 좋은 기사가 있습니다. 그리고 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> 

에서 작동합니다. 적어도 당신에게는 선택의 여지가 있습니다.