最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442
当前位置:首页 > 编程开发 > asp教程

ViewHelper简化MVC view的开发技巧

日期:08-13    来源:中国设计秀    作者:cnwebshow.com

 接上篇…现在让我们开始讨论如何创建HtmlHelper扩展方法.7nq中国设计秀
7nq中国设计秀
   在前面我们说到了创建HtmlText类的方方面面。包括为HtmlText创建的扩展方法.这些扩展方法包括直接被View调用的那些扩展方法。下面代码展示了HtmlText的几种不同的构造函数:7nq中国设计秀
7nq中国设计秀
public static class HtmlHelperExtensions 7nq中国设计秀
{ 7nq中国设计秀
    #region Textbox 7nq中国设计秀
    public static IViewObject NewText( 7nq中国设计秀
        this HtmlHelper htmlHelper, string name) 7nq中国设计秀
    { 7nq中国设计秀
        return NewText(htmlHelper, name, null); 7nq中国设计秀
    } 7nq中国设计秀
     7nq中国设计秀
    public static IViewObject NewText( 7nq中国设计秀
        this HtmlHelper htmlHelper, string name, string labelText) 7nq中国设计秀
    { 7nq中国设计秀
        return NewText(htmlHelper, name, labelText, null); 7nq中国设计秀
    } 7nq中国设计秀
     7nq中国设计秀
    public static IViewObject NewText( 7nq中国设计秀
        this HtmlHelper htmlHelper, string name, string labelText, object value) 7nq中国设计秀
    { 7nq中国设计秀
        return NewText(htmlHelper, name, labelText, value, null, false, true, null); 7nq中国设计秀
    } 7nq中国设计秀
7nq中国设计秀
    public static IViewObject NewText( 7nq中国设计秀
        this HtmlHelper htmlHelper, string name, string labelText, object value,  7nq中国设计秀
        string validationMessage, bool @readonly, bool createLi, object attributes) 7nq中国设计秀
    { 7nq中国设计秀
        IViewObject viewObject = new HtmlText( 7nq中国设计秀
            new ViewRequestContext(htmlHelper), name, labelText, value,  7nq中国设计秀
            validationMessage, @readonly, createLi, attributes); 7nq中国设计秀
        viewObject.StartView(); 7nq中国设计秀
        return viewObject; 7nq中国设计秀
    } 7nq中国设计秀
    #endregion 7nq中国设计秀
7nq中国设计秀
    //NOTE: SOME CONTENT OMITTED FROM THIS SNipPET 7nq中国设计秀
}    NewText方法有四个不同版本的重载,这些重载都属于System.Web.Mvc.HtmlHelper的扩展方法,只有最后一个方法用于真正的起作用,而其他的方法都是这个方法的封装以便让用户使用起来更简单.上面的代码中HtmlText对象通过传入适当的参数来初始化,而view是通过StartView方法来初始化,在StartView中被调用的HtmlText会返回合适的对象动态的将Html注入View.现在让我们来看看如何在view中使用这些方法。7nq中国设计秀
7nq中国设计秀
     前面我们已经创建了在View中可使用的HtmlText对象,现在就可以使用了。在前面我们提到,如果想要创建一个textbox来满足Ricky的标准,我必须写如下代码:7nq中国设计秀
7nq中国设计秀
<li> 7nq中国设计秀
    <label for="FirstName">First name</label> 7nq中国设计秀
    <%= Html.TextBox("FirstName") %> 7nq中国设计秀
    <%= Html.ValidationMessage("FirstName", "*") %> 7nq中国设计秀
</li>     现在通过使用HtmlHelper,我们可以把代码简化如下:7nq中国设计秀
7nq中国设计秀
<% Html.NewText("FirstName", "First name"); %>     上面两种方法所生成的Html是完全相同的,我们实现了前面设定的目标。从今往后就可以使用这个Helper来简化asp.net MVC view的开发了。上面代码中并没有用到EndView方法.下面我们来研究一个更复杂一些的HTML的构造—radio button,看是如何实现的7nq中国设计秀
7nq中国设计秀
     使用Asp.net MVC来创建一组radio button,代码一般如下:7nq中国设计秀
7nq中国设计秀
<li> 7nq中国设计秀
    <div class="option-group" id="GenderContainer"> 7nq中国设计秀
        <label for="Gender">Gender</label> 7nq中国设计秀
        <% foreach (SelectListItem item in Model.GenderList) 7nq中国设计秀
           { %> 7nq中国设计秀
                <%= Html.RadioButton(item.Text, item.Value)%> 7nq中国设计秀
                <span><%= item.Text%></span> 7nq中国设计秀
        <% } %> 7nq中国设计秀
    </div> 7nq中国设计秀
</li>     上面代码是从AddContactClass.aspx view中节选的,所有代码可以从这篇文章的网站下载,上面代码中ContactController通过Model.GenderList属性来集中返回代码:7nq中国设计秀
7nq中国设计秀
public ActionResult AddContactClassic() 7nq中国设计秀
{ 7nq中国设计秀
    AddContactModel addModel = InternalGetInitialAddModel(); 7nq中国设计秀
7nq中国设计秀
    return View(addModel); 7nq中国设计秀
} 7nq中国设计秀
7nq中国设计秀
PRivate AddContactModel InternalGetInitialAddModel() 7nq中国设计秀
{ 7nq中国设计秀
    string maleString = Gender.Male.ToString(); 7nq中国设计秀
    string femaleString = Gender.Female.ToString(); 7nq中国设计秀
     IList<SelectListItem> genderRadioButtons = new List<SelectListItem>() 7nq中国设计秀
    { 7nq中国设计秀
        new SelectListItem { Text = maleString, Value = maleString }, 7nq中国设计秀
        new SelectListItem { Text = femaleString, Value = femaleString } 7nq中国设计秀
    }; 7nq中国设计秀
7nq中国设计秀
    AddContactModel model = new AddContactModel { GenderList = genderRadioButtons }; 7nq中国设计秀
7nq中国设计秀
    return model; 7nq中国设计秀
} 生成的HTML效果图如下:7nq中国设计秀
7nq中国设计秀
7nq中国设计秀
7nq中国设计秀
在上面创建radio button的代码中有很多掩盖了元素真实意图(译者按:比如说为什么我们这么写HTML,是为了满足Ricky的标准吗?)的部分,比如说:外层的div和内层的span是为了label而包裹文本.而如果我们需要一组radio button时只需要声明一下并指定相关的值那不是更爽吗?下面我们创建HtmlRadioButtonGroup view helper,它可以满足我们只声明并指定相关值就能创建出相应的html,使用HtmlRadioButtonGroup,我们可以将前面的radio button精简如下:7nq中国设计秀
7nq中国设计秀
<% Html.NewRadioButtonGroup("Gender", Model.GenderList); %> 上面代码中,我们可以从更高的视角来创建Html,清楚的这段代码的作用而不是关注Html的细节。下面来创建一个替我们生成HTML的helper,也就是为:HtmlRadioButtonGroup类,下面代码展示了这个类唯一的构造函数和它的字段:7nq中国设计秀
7nq中国设计秀
private readonly List<SelectListItem> mSelectList; 7nq中国设计秀
private readonly bool mCreateLi; 7nq中国设计秀
7nq中国设计秀
public HtmlRadioButtonGroup( 7nq中国设计秀
    ViewRequestContext requestContext, string name,  7nq中国设计秀
    IEnumerable<SelectListItem> selectList, bool createLi, object attributes) 7nq中国设计秀
    : base(requestContext, name) 7nq中国设计秀
{ 7nq中国设计秀
    mSelectList = new List<SelectListItem>(); 7nq中国设计秀
    if (selectList != null) 7nq中国设计秀
    { 7nq中国设计秀
        mSelectList.AddRange(selectList); 7nq中国设计秀
    } 7nq中国设计秀
7nq中国设计秀
    mCreateLi = createLi; 7nq中国设计秀
    Attributes = attributes; 7nq中国设计秀
}看上去是不是和我们先前的HtmlText对象的构造器很像?它的构造函数为通过传参的方式将RequestContext变得可用。并且通过构造函数为所有的字段进行初始化,这也意味着这个类是在StartView方法中(译者按:因为RequestContext方法在StartView中可以传入)的,下面代码是StartView的完全版本:7nq中国设计秀
7nq中国设计秀
public override void StartView() 7nq中国设计秀
{ 7nq中国设计秀
    HttpResponseBase httpResponse = RequestContext.HttpResponse; 7nq中国设计秀
7nq中国设计秀
    TagBuilder liTagBuilder = new TagBuilder("li"); 7nq中国设计秀
    if (mCreateLi) 7nq中国设计秀
    { 7nq中国设计秀
        httpResponse.Write(liTagBuilder.ToString(TagRenderMode.StartTag)); 7nq中国设计秀
    } 7nq中国设计秀
7nq中国设计秀
    TagBuilder divTag = new TagBuilder("div"); 7nq中国设计秀
    divTag.AddcssClass("option-group"); 7nq中国设计秀
    divTag.MergeAttribute("name", Name); 7nq中国设计秀
    if (Attributes != null) 7nq中国设计秀
    { 7nq中国设计秀
        divTag.MergeAttributes(new RouteValueDictionary(Attributes)); 7nq中国设计秀
    } 7nq中国设计秀
7nq中国设计秀
    TagBuilder labelTag = new TagBuilder("label"); 7nq中国设计秀
    labelTag.MergeAttribute("for", Name); 7nq中国设计秀
    labelTag.SetInnerText(Name); 7nq中国设计秀
    httpResponse.Write(labelTag.ToString(TagRenderMode.Normal)); 7nq中国设计秀
7nq中国设计秀
    httpResponse.Write(divTag.ToString(TagRenderMode.StartTag)); 7nq中国设计秀
7nq中国设计秀
    // Write out the radio buttons, let the MVC Helper do the hard work here 7nq中国设计秀
    foreach (SelectListItem item in this.mSelectList) 7nq中国设计秀
    { 7nq中国设计秀
        string text = !string.IsNullOrEmpty(item.Text) 7nq中国设计秀
                        ? item.Text 7nq中国设计秀
                        : item.Value; 7nq中国设计秀
7nq中国设计秀
        httpResponse.Write(RequestContext.HtmlHelper.RadioButton( 7nq中国设计秀
            Name, item.Value, item.Selected)); 7nq中国设计秀
7nq中国设计秀
        // Note: Because we are using HtmlHelper.RadioButton the <input>  7nq中国设计秀
        //       elements will have duplicate ids 7nq中国设计秀
        //       See: http://forums.asp.net/t/1363177.aspx 7nq中国设计秀
        //       In order to avoid this we could do this ourselves here 7nq中国设计秀
        TagBuilder spanTag = new TagBuilder("span"); 7nq中国设计秀
        spanTag.SetInnerText(text);        7nq中国设计秀
         httpResponse.Write(spanTag.ToString(TagRenderMode.Normal)); 7nq中国设计秀
    } 7nq中国设计秀
7nq中国设计秀
    httpResponse.Write(divTag.ToString(TagRenderMode.EndTag)); 7nq中国设计秀
7nq中国设计秀
    if (this.mCreateLi) 7nq中国设计秀
    { 7nq中国设计秀
        httpResponse.Write(liTagBuilder.ToString(TagRenderMode.EndTag)); 7nq中国设计秀
    } 7nq中国设计秀
} 这里的想法和HtmlText类如初一撤,那就是:所有的HTML代码都在StartView方法中生成。因此这里StartView方法创建了一些HTML tag,并遍历mSelectList中的元素并通过Asp.net MVC自带的RadioButton扩展方法为每一个元素生成一个RadioButton。在重用这些方法时最好先重写这些方法(译者按:看上面代码注释)。7nq中国设计秀
7nq中国设计秀
从上面代码中的注释可以看出,使用HtmlHelper.RadioButton扩展方法有一个明显的bug,就是id和name用的是同一个值,这里因为name属性本来就应该为RadioButton设置成相同的这样他们便可以逻辑上连成一组,但是id属性是每个元素唯一拥有,这里解决这个bug的方法是不用这个方法,但在这里为了简单起见我们先使用这个方法.上面创建的两个Html helper对象都没有用到EndView方法,你可以已经开怀疑这个方法为什么存在,在接下来的HtmlFieldSet的Helper我会给你展示EndView的用途7nq中国设计秀
7nq中国设计秀
-------------------------------------------7nq中国设计秀

本文引用地址:/bc/article_46160.html
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明