[转]我要学ASP.NET MVC 3.0(十二): MVC 3.0 使用自定义的Html控件

本文转自:http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.html

概述

 

在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的类

代码:

    public class MyControls     {         /// <summary>         /// Lable文本         /// </summary>         /// <param name="fortarget">for属性</param>         /// <param name="text">显示文本</param>         /// <returns></returns>         public static MvcHtmlString Label(string fortarget, string text)         {             string str = String.Format("<label for=‘{0}‘>{1}</label>", fortarget, text);             return new MvcHtmlString(str);                      }        public static MvcHtmlString Label(string text)         {             return Label("",text);         }         /// <summary>         /// RadioButton         /// </summary>         /// <param name="nametarget">name属性</param>         /// <param name="idtarget">id属性</param>         /// <returns></returns>         public static MvcHtmlString RadioButton(string nametarget, string idtarget)         {             string str = String.Format("<input type=‘radio‘ name=‘{0}‘ id=‘{1}‘ />", nametarget, idtarget);             return new 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的类

代码

    public static class LabelExtensions     {         public static MvcHtmlString LKLabel(this HtmlHelper helper, string fortarget, string text)         {             string str = String.Format("<label for=‘{0}‘>{1}</label>", fortarget, text);             return new MvcHtmlString(str);         }     }     public static class RadioButtonExtensions     {         public static MvcHtmlString LKRadioButton(this HtmlHelper helper, string nametarget, string idtarget)         {             string str = String.Format("<input type=‘radio‘ name=‘{0}‘ id=‘{1}‘ />", nametarget, idtarget);             return new 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/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过http://www.cnblogs.com/lukun/ 联系我,非常感谢。

[转]我要学ASP.NET MVC 3.0(十二): MVC 3.0 使用自定义的Html控件

时间: 2024-09-30 18:41:20

[转]我要学ASP.NET MVC 3.0(十二): MVC 3.0 使用自定义的Html控件的相关文章

asp.net mvc3 数据验证(二)——错误信息的自定义及其本地化

原文:asp.net mvc3 数据验证(二)--错误信息的自定义及其本地化 一.自定义错误信息 在上一篇文章中所做的验证,在界面上提示的信息都是系统自带的,有些读起来比较生硬.比如: : 如果你的环境是英文的,那么你的提示信息就是中英文夹杂的了. 在这种情况下就需要用到自定义错误信息了.其实很简单,就是在model的验证特性中加上[ErrorMessage].比如: Model: [Required(ErrorMessage = "用户名不能为空!")] [Display(Name

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

MVC为Html对象建立一个扩展方法,使用自己的控件就像使用TextBox一样方便

先看一下我想要的结果: 很容易它就是一个单选按钮组,当我后台为Html对象(HtmlHelper的一个实例,它被定义在System.Web.Mvc名称空间下的WebViewPage类,即它对于所有MVC页面都可用)建立好扩展方法后,使用以下语句就可以生成上面的效果: @Html.CreateGanderRadioButton() 扩展方法的定义: namespace Web.Helper { public static class ExtendHtml { public static MvcHt

ASP.NET Core 2.1 : 十.升级现有Core2.0 项目到2.1

.NET Core 2.1 终于发布了, 赶紧升级一下. 一. 安装SDK 首先现在并安装 SDK(64-bit) 安装完毕后如果新建项目可以看到已经有2.1的选项了 二. 更新现有2.0项目到2.1 1. 修改 项目版本 右键点击解决方案管理器中的项目, 选择编辑项目名.csproj 将 <TargetFramework>netcoreapp2.0</TargetFramework> 中的2.0改为2.1,保存. 2. 将引用 Microsoft.AspNetCore.All 

Spring Web MVC框架(十二) 使用Thymeleaf

Thymeleaf简介 前面的例子我们使用的视图技术主要是JSP.JSP的优点是它是Java EE容器的一部分,几乎所有Java EE服务器都支持JSP.缺点就是它在视图表现方面的功能很少,假如我们想迭代一个数组之类的,只能使用<% %>来包括Java语句进行.虽然有标准标签库(JSTL)的补足,但是使用仍然不太方便.另外JSP只能在Java EE容器中使用,如果我们希望渲染电子邮件之类的,JSP就无能为力了. Java生态圈广泛,自然有很多视图框架,除了JSP之外,还有Freemarker.

ASP.NET Core 2.1 : 十二.内置日志、使用Nlog将日志输出到文件

应用离不开日志,虽然现在使用VS有强大的调试功能,开发过程中不复杂的情况懒得输出日志了(想起print和echo的有木有),但在一些复杂的过程中以及应用日常运行中的日志还是非常有用. ASP.NET Core提供了内置的日志,但没弄明白这么把它输出到文件, 只能在VS的输出中查看, 谁知道怎么弄告诉我一下.(ASP.NET Core 系列目录) 本例 GitHub 一.内置日志的使用 上一篇:如何在后台运行一个任务  中使用到了内置的日志,直接在构造中注入一下,然后直接使用即可, 非常方便 pu

从零开始学android&lt;chronometer计时器组件.三十二.&gt;

计时器来计算每个运动员所消耗的时间等,而在Android系统之中,这种计时的功能就可以使用Chronometer组件,此类的继承结构如下所示: 2java.lang.Object ? android.view.View ? android.widget.TextView ? android.widget.Chronometer 常见的方法 1 public Chronometer(Context context) 构造 创建Chronometer对象 2 public long getBase(

ASP.NET MVC4+BootStrap 实战(十二)

最近实在是太忙,没时间写博客,只能夜里等孩子睡着了再写.感觉最近一个月又是在浪费时间,心里万分焦急.感觉自己的技术还不行,但是却没有时间去加强.吉日嘎啦的<程序员你伤不起>一书中讲到要孩子要晚了的坏处,比如自己30岁要的孩子,自己60岁了,孩子都30岁了,可能谁也照顾不上谁.其实我想说的是生早了也同样有坏处,比如现在只能晚上12点后写博客写程序. 好了,不多说了,来点高兴的,第一次也是第一个获得组内季度之星奖杯的我,终于觉得自己这三个月来当Master并且承担Coding任务的艰辛得到了很好的

从零开始学android&lt;Message消息机制.四十二.&gt;

ndroid.os.Message的主要功能是进行消息的封装,并且同时可以指定消息的操作形式. No. 变量或方法 类型 描述 1 public int what 变量 用于定义此Message属于何种操作 2 public Object obj 变量 用于定义此Message传递的信息数据 3 public int arg1 变量 传递一些整型数据时使用,一般很少使用 4 public int arg2 变量 传递一些整型数据时使用,一般很少使用 5 public Handler getTar