ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件

ASP.NET MVC 3.0（一）： MVC 3.0 的新特性 摘要 

ASP.NET MVC 3.0（二）： MVC的概念及MVC 3.0开发环境

ASP.NET MVC 3.0（三）： 初识MVC的Url映射潜规则Routing

ASP.NET MVC 3.0（四）： 我要MVC潜规则之配置Routing

ASP.NET MVC 3.0（五）： 入手Controller/Action

ASP.NET MVC 3.0（六）： MVC 3.0创建你的View视图

ASP.NET MVC 3.0（七）： MVC 3.0 新的Razor引擎

ASP.NET MVC 3.0（八）： MVC 3.0 传递和保存你的Model

ASP.NET MVC 3.0（九）： MVC 3.0 验证你的Model

ASP.NET MVC 3.0（十）： MVC 3.0 使用 Forms身份验证

ASP.NET MVC 3.0（十一）： MVC 3.0 使用筛选器

ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件

ASP.NET MVC 3.0（十三）： MVC 3.0 防止跨站点请求伪造 (CSRF) 攻击

ASP.NET MVC 3.0（十四）： MVC 3.0 实例系列之创建数据表格

ASP.NET MVC 3.0（十五）： MVC 3.0 实例系列之表格的排序

ASP.NET MVC 3.0（十六）： MVC 3.0 实例系列之表格数据的分页

ASP.NET MVC 3.0（十七）： MVC 3.0 实例之表格中数据的筛选

ASP.NET MVC 3.0（十八）： MVC 3.0 实例系列之表格中合并排序、分页和筛选

ASP.NET MVC 3.0（十九）： MVC 3.0 实例之使用开源控件实现表格排序和分页

 

概述

 

在ASP.NET MVC框架中已经封装了很多基于Html标准的Html控件，我们可以方便的使用这些控件输出想要的内容，使开发变得快捷。

例如ASP.NET MVC框架包括以下设置标准的HTML控件（部分控件）：

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()

使用这些控件做页面呈现

 

<div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

 

　　

可见这些封装起来的控件，的确在使用起来带来了巨大的方便，但是仅仅这些控件，还是远远不能满足我们的需要。有时候我们希望写出自己的控件，输入几个文字或者属性名称更或者加入css样式，即可得出理想的效果。

 

Html控件的返回值

 

每一个Html控件都返回了MvcHtmlString ，他继承了HtmlString，微软把他定义为不能再次编辑的Html字符串。如MvcHtmlString : HtmlString。

知道了返回值我们就知道从哪里入手写自己的控件了。

 

自定义Html控件

先看个例子

我们用html写这样一段代码

<label for='male'>男</label>
<input type="radio" name="sex" id="male"/>
<br />
<label for='female'>女</label>
<input type="radio" name="sex" id="female"/>

　　

其运行效果为：

男  
女 

在MVC项目中添加一个Controls文件夹

添加名为MyControls的类

代码：

 

publicclass MyControls
    {
        ///<summary>
        /// Lable文本
        ///</summary>
        ///<param name="fortarget">for属性</param>
        ///<param name="text">显示文本</param>
        ///<returns></returns>
publicstatic MvcHtmlString Label(string fortarget, string text)
        {
            string str = String.Format("<label for='{0}'>{1}</label>", fortarget, text);
            returnnew MvcHtmlString(str);
            
        }

        publicstatic MvcHtmlString Label(string text)
        {
            return Label("",text);
        }


        ///<summary>
        /// RadioButton
        ///</summary>
        ///<param name="nametarget">name属性</param>
        ///<param name="idtarget">id属性</param>
        ///<returns></returns>
publicstatic MvcHtmlString RadioButton(string nametarget, string idtarget)
        {
            string str = String.Format("<input type='radio' name='{0}' id='{1}' />", nametarget, idtarget);
            returnnew MvcHtmlString(str);
        }
    }

 

　　

上面两个控件我们都返回了MvcHtmlString ，用于将String的内容显示为Html内容。

 Html代码：

@using MvcApplication.Controls;
@MyControls.Label("male", "男")
@MyControls.RadioButton("sex", "male")
<br />
@MyControls.Label("female", "女")
@MyControls.RadioButton("sex", "female")

运行效果

可以看到与上面标准的Html代码效果是一样的。

   

Html控件自定义扩展

  

上面的例子我们可以看出自定义的控件完全可以让我们简单的实现自己想要的功能。

但是这些要使用自己的命名空间，而且还要找到自己定义的控件类，有点麻烦，能不能整合到系统自己的Html控件库呢？

像这种？

回答当然是肯定的，我们可以将这些自己的控件做为系统控件的扩展控件，在调用的时候不是就简单而且亲切嘛？

 

Html控件扩展类

 

先看下面的代码

 

//
        // 摘要:
        //     获取或设置 System.Web.Mvc.HtmlHelper 对象，该对象用于呈现 HTML 元素。
        //
        // 返回结果:
        //     用于呈现 HTML 元素的 System.Web.Mvc.HtmlHelper 对象。
public HtmlHelper<TModel> Html { get; set; }

 

这是系统对页面上@Html属性的定义。

我们可以看到该Html是返回了一个HtmlHelper

看到这里我们的入口点就找到了，就是以HtmlHelper作为扩展类型。

继续在建好的Controls文件夹中建立名为LabelExtensions的类和RadioButtonExtensions的类

代码

 

publicstaticclass LabelExtensions
    {
        publicstatic MvcHtmlString LKLabel(this HtmlHelper helper, string fortarget, string text)
        {
            string str = String.Format("<label for='{0}'>{1}</label>", fortarget, text);
            returnnew MvcHtmlString(str);
        }
    }


    publicstaticclass RadioButtonExtensions
    {
        publicstatic MvcHtmlString LKRadioButton(this HtmlHelper helper, string nametarget, string idtarget)
        {
            string str = String.Format("<input type='radio' name='{0}' id='{1}' />", nametarget, idtarget);
            returnnew MvcHtmlString(str);

        }
    }

 

　　

调用控件

此时我们再写Html控件看看

页面代码

@using MvcApplication.Controls;
@Html.LKLabel("male", "男")
@Html.LKRadioButton("sex", "male")
<br />
@Html.LKLabel("female", "女")
@Html.LKRadioButton("sex", "female")

　　

运行效果

 

总结

 

对于控件的扩展极大的满足了我们在编程过程中的各种需求，使得我们在页面编程上面变得简单快捷。

 

 

 

 

 

转：记忆逝去的青春http://www.cnblogs.com/lukun/