【譯】使用自定義ViewHelper來簡化Asp.net MVC view的開發(fā)------part5(完)

2019-11-17 03:53:28

字體：大中小

供稿：網(wǎng)友

   接上文..前面我們已經(jīng)創(chuàng)建好了HtmlFieldSet，現(xiàn)在，為了讓HtmlHelper的擴(kuò)展方法可以使用這個(gè)類，還需要?jiǎng)?chuàng)建一個(gè)方法：NewHtmlFieldSet

public static IViewObject NewHtmlFieldSet(
    this HtmlHelper htmlhelper, string name, string title, object attributes)
{
    IViewObject viewObject = new HtmlFieldSet(
        new ViewRequestContext(htmlhelper), name, title, attributes);
    viewObject.StartView();
    return viewObject;
}     這個(gè)方法的實(shí)現(xiàn)和前面所提到的那些沒有上面不同，都是傳入相應(yīng)參數(shù)并返回view object,在View被初始化時(shí)返回這個(gè)對(duì)象，View首先在初始化時(shí)使用返回的View object,更確切點(diǎn)說，返回的IViewObject會(huì)在using語句中被view使用，例子如下：

<% using (Html.NewHtmlFieldset("FieldsetName", "My Fieldset", null))
   { %>
    <li>
      <label for="FirstName">FirstName</label>
      <span id="FirstName"><%= Html.Encode(Model.FirstName) %></span>
    </li>
<% } %>     對(duì)應(yīng)生成的HTML代碼如下：

<fieldset name="FieldsetName">
  <legend>My Fieldset</legend>
  <ol>
      <li>
        <label for="FirstName">FirstName</label>
        <span id="FirstName">Sayed</span>
      </li>
  </ol>
</fieldset>
EndView方法輸出了最后的三個(gè)結(jié)尾標(biāo)簽(</li>，</ol>，</fieldset>)，達(dá)到了我們的預(yù)期，現(xiàn)在就可以使用view helper來創(chuàng)建fieldset以及包含在內(nèi)的legend,以便達(dá)到更好的可理解和可維護(hù)性。下面來看view helper是如何簡化view的開發(fā)的。

這篇文章中附帶的示例代碼時(shí)全功能版本，每一個(gè)頁面都有兩個(gè)版本-使用view helper和不使用view helper.不適用view helper的版本全部手動(dòng)創(chuàng)建HTML,而使用view helper的版本包括了我們先前創(chuàng)建的3個(gè)view helper，讓我們來進(jìn)行簡單的比較，從源碼中找到AddContactClassic.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
  Inherits="System.Web.Mvc.ViewPage<Sedodream.Web.ViewHelper.Models.AddContactModel>"
%>

<%@ Import Namespace="Sedodream.Web.Common.Contact" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  Add Contact Classic
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <h2>Add Contact Classic</h2>
  <%= Html.ValidationSummary("Errors exist") %>

  <ol>     <li>
      <span class="success-message"><%= ViewData["SuccessMessage"]%></span>
      </li>
  </ol>
  <% using (Html.BeginForm())
     { %>
      <fieldset>
        <legend>Account Information</legend>
        <ol>
          <li>
            <label for="FirstName">First name</label>
            <%= Html.TextBox("FirstName") %>
            <%= Html.ValidationMessage("FirstName", "*") %>
          </li>
          <li>
            <label for="LastName">Last name</label>
            <%= Html.TextBox("LastName") %>
            <%= Html.ValidationMessage("LastName", "*") %>
          </li>
          <li>
            <label for="Email">Email</label>
            <%= Html.TextBox("Email")%>
            <%= Html.ValidationMessage("Email", "*")%>
          </li>
          <li>
            <label for="Phone">Phone</label>
            <%= Html.TextBox("Phone")%>
            <%= Html.ValidationMessage("Phone", "*")%>
          </li>
          <li>
            <div class="option-group" id="GenderContainer">
              <label for="Gender">Gender</label>
              <% foreach (SelectListItem item in Model.GenderList)
                 { %>
                   <%= Html.RadioButton(item.Text, item.Value)%>
                   <span><%= item.Text%></span>
              <% } %>
            </div>
          </li>

          <li>
            <input type="submit" value="Add contact" />
          </li>
        </ol>
      </fieldset>
  <% } %>
</asp:Content> 上面代碼盡管簡單，但仍然包含多達(dá)59行代碼，而且看起來十分丑陋，下面的版本是使用我們自定義的view helper,讓我們來看看包含在AddContactNew.aspx內(nèi)的新版本：

<%@ Page
Inherits="System.Web.Mvc.ViewPage<Sedodream.Web.ViewHelper.Models.AddContactModel>"
    Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Title="" %>

<%@ Import Namespace="Sedodream.Web.Common.View" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  Add Contact New
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Add Contact New</h2>

    <%= Html.ValidationSummary("Errors exist") %>

    <ol>
      <li>
        <span class="success-message"><%= Model.SuccessMessage %></span>
      </li>
    </ol>
    <% using (Html.BeginForm())
       { %>
    <fieldset>
        <legend>Account Information</legend>
        <ol>
            <% Html.NewText("FirstName", "First name"); %>
            <% Html.NewText("LastName", "Last name"); %>
            <% Html.NewText("Email", "Email"); %>
            <% Html.NewText("Phone", "Phone"); %>
            <% Html.NewRadioButtonGroup("Gender", Model.GenderList); %>

            <li>
                <input type="submit" value="Add contact" />
            </li>
        </ol>

    </fieldset>
    <% } %>
</asp:Content>

使用view helper的版本html大大減少(只有39行)而且更容易理解，這里需要注意view引入了Sedodream.Web.Common.View命名空間，這使view helper擴(kuò)展方法所必須的.Sedodream.Web.Common.View命名空間包含在另一個(gè)程序集中，這樣更方便你在整個(gè)小組內(nèi)進(jìn)行分發(fā)，使用View helper所帶來的可理解性只是使用它所帶來好處的其中之一，它還會(huì)帶來以下好處:

View更清爽，更容易理解
小組內(nèi)遵循某些標(biāo)準(zhǔn)更容易
在修改時(shí)需要改變的地方更少
可利用回傳的model state輔助生成代碼
在前面我們提到了GetModelStateValue方法的使用。這個(gè)方法用于給HTML元素賦上它自己從View里回傳的值,而在view helper內(nèi)可以給生成的html元素賦值.下面代碼片段是System.Web.Mvc.Html.InputExtensions源文件中的一部分，這里用來展示GetModelStateValue的用法：

case InputType.Radio:
    if (!usedModelState) {
        string modelStateValue = htmlHelper.GetModelStateValue(
            name, typeof(string)) as string;
        if (modelStateValue != null) {
            isChecked = String.Equals(
                modelStateValue, valueParameter, StringComparison.Ordinal);
            usedModelState = true;
        }
    } 上面代碼先檢查model state來看radio button是否被創(chuàng)建,如果radio button已經(jīng)存在就可以查看radio button是否已經(jīng)被選中，當(dāng)你創(chuàng)建自定義view helper時(shí)，你最好也在合適的地方支持類似(可以獲取當(dāng)前html的元素)的功能。前面的HtmlText view helper已經(jīng)說明了這一點(diǎn)。

文章到此已經(jīng)將創(chuàng)建自定義view helper的方方面面都講到了。



-------------------------------------------

shit live writer把part4給覆蓋了沒有保存，找時(shí)間我重新翻譯下

全文完

原文鏈接：http://mvcviewhelpers.codeplex.com/

translated by CareySon

2 1 0
您已投過票

上一篇：把【觀察者模式】【MVC】【三層架構(gòu)】說透

下一篇：【譯】使用自定義ViewHelper來簡化Asp.net MVC view的開發(fā)------part4