mvc基础系列说谈(4)——HtmlHelper,自定义,扩展HtmlHelper

简介: 在视图中可以直接写Html,也可以使用HtmlHelper来创建。 例如:   页面源码:   ViewPage的Html属性就是一个HtmlHelper类型的属性。

在视图中可以直接写Html,也可以使用HtmlHelper来创建。

例如:

< input  id ="tbxcontent"   />
<% = Html.TextBox( " tbxname " %>

 

页面源码:

< input  id ="tbxcontent"   />
< input  id ="tbxname"  name ="tbxname"  type ="text"  value =""   />

 

ViewPageHtml属性就是一个HtmlHelper类型的属性。它的用于创建Html的一些方法例如:TextBox,是通过扩展方法来实现。

 

FormExtensions  Represents support for HTML in an application. 

InputExtensions  Represents support for HTML input controls in an application. 

LinkExtensions  Represents support for HTML links in an application. 

RenderPartialExtensions  Provides support for rendering a partial view. 

SelectExtensions  Represents support for making selections in a list. 

TextAreaExtensions  Represents support for HTML textarea controls. 

ValidationExtensions  Provides support for validating the input from an HTML form.

 

它们位于System.Web.Mvc.Html

 

(一)InputExtensions

它能创建5种类型的Html控件(返回5种类型的Html控件的字符串)。

·CheckBox

·RadioButton

·TextBox

·Password

·Hidden

每一种有多个重载,用于满足不同参数。

TextBox为例。

public   static   string  TextBox( this  HtmlHelper htmlHelper,  string  name);
public   static   string  TextBox( this  HtmlHelper htmlHelper,  string  name,  object  value);
public   static   string  TextBox( this  HtmlHelper htmlHelper,  string  name,  object  value, Dictionary < string object >  htmlAttributes);
public   static   string  TextBox( this  HtmlHelper htmlHelper, 
string  name,  object  value,  object  htmlAttributes);

 

<% = Html.TextBox( " tbxname " %>

 

这个方法首先调用:

public static string TextBox(this HtmlHelper htmlHelper, string name)这个方法,然后最终调用:

public   static   string  TextBox( this  HtmlHelper htmlHelper, string  name,
object  value,IDictionary < string object >  htmlAttributes)
{
    
return  htmlHelper.InputHelper(InputType.Text, name, value, (value  ==   null ), 
                                  
false , true true , htmlAttributes);
}

 

然后调用:htmlHelper.InputHelper这个方法。

TextBox来示例:

(1) 基本

<% = Html.TextBox( " tbxname " %>

(2) 添加css

<% = Html.TextBox( " tbxname " , string .Empty,  new  { @class = " cssText " }) %>

(3)绑定

 现在不提供强类型,以一个ViewData为例

<% = Html.TextBox( " tbxname " ,ViewData[ " test " ],  new  { @class = " cssText " }) %>

 

(二)FormExtensions

它用于显示Form。有三种。

·BeginForm

·BeginRouteForm

·EndForm

其中,BeginRouteForm是以路由方式提交表单。

例如:

routes.MapRoute(
     
" Detail " ,
     
" {controller}/{action}/{id} " ,
      
new  { Controller  =   " News " , action  =   " Detail " , id  =   2  },
         
new  { id = new  SelfConstraint()}
     );

 

这是一个路由,然后:

<%  using (Html.BeginRouteForm( " Detail " new  { controller  =   " Login " , action  =   " Validate "  })){ %>
< div  class ="divMargin" >
    
< span  class ="spanHeader" > 用户帐号: </ span >
    
<% = Html.TextBox( " tbxUserId " ) %>
</ div >
< div  class ="divMargin" >
    
< span  class ="spanHeader" > 用户密码: </ span >
    
<% = Html.Password( " tbxUserPW " ) %>
</ div >
< div  class ="divMargin" >
    
< input  type ="submit"  value ="登录"   />
</ div >
<% %>

 

其中的Detail  是路由的名称。

BeginForm可以用using的方法关闭form,来代替EndForm

再写一个BeginForm的例子:

<% Html.BeginForm( " Validate " " Login " );  %>
    
< div  class ="divMargin" >
        
< span  class ="spanHeader" > 用户帐号: </ span >
        
<% = Html.TextBox( " tbxUserId " %>
    
</ div >

    
< div  class ="divMargin" >
        
< span  class ="spanHeader" > 用户密码: </ span >
        
<% = Html.Password( " tbxUserPW " %>
    
</ div >

    
< div  class ="divMargin" >
    
< input  type ="submit"  value ="登录"   />
    
</ div >
<% Html.EndForm();  %>

 

注意的是,开始与结束没有等号,且,都有分号结束符。

 

(三)LinkExtensions

用于提供html链接,有两种方法:

·ActionLink

·RouteLink

每一类方法有多种重载。 

public   static   string  ActionLink( this  HtmlHelper htmlHelper,  string  linkText,  string  actionName)

 

这是ActionLink的一个方法,它可以链接到同控制器下的某一动作中。

例如:

<% = Html.ActionLink( " 到新闻列表页 " , " NewsList " %>

 

然后,传递参数:

<% = Html.ActionLink( " 到新闻详细页 " " Detail " new  { id = 2 }) %>

 

下面是一个RouteLink的方法

public   static   string  RouteLink( this  HtmlHelper htmlHelper,  string  linkText,  object  routeValues)

 

<% = Html.RouteLink( " 到新闻列表页 " new  { controller = " News " ,action = " NewsList " }) %>
<% = Html.RouteLink( " 到新闻详细页 " new  { action  =   " Detail " , id  =   2  }) %>

 

(四)自定义HtmlHelper

自定义一个Label

public   class  LabelHelper
{
    
public   static   string  Label( string  target,  string  text)
    {
        
return  String.Format( " <label id='{0}'>{1}</label> " , target, text);
    }
}

 

在使用时:要添加名字空间进来:

<% @ Import Namespace = " Web.Models.SelfHelper "   %>

 

然后这样使用:

<% = LabelHelper.Label( " label1 " , " 这是一个标签 " ) %>

 

为了和HtmlHelper提供的控件一致,扩展一下HtmlHelper,以一个span为例:

public   static   class  HtmlExtensions
{
   
public   static   string  Span( this  HtmlHelper helper,  string  strId, string  strContent)
   {
      
return   string .Format( " <span id=\ " { 0 }\ " >{1}</span> " , strId, strContent);
   }
}

 

使用:

同样也要引用空间,然后:

<% = Html.Span( " span1 " , " 这是一个span " %>

 

(五) TagBuilder

在自定义HtmlHelper时,可以通过TagBuilder来创建。下边列出几个常用的方法:

public   void  AddCssClass( string  value);
public   void  GenerateId( string  name);
public   void  SetInnerText( string  innerText);
public   void  MergeAttribute( string  key,  string  value);

 

现在还是来创建一个span

public   static   string  Span( this  HtmlHelper helper,  string  strId, 
              
string  strcontent,  string  strClass)
{
    TagBuilder builder 
=   new  TagBuilder( " span " ); 

    builder.GenerateId(strId);
    builder.SetInnerText(strcontent);
    builder.AddCssClass(strClass);
    builder.MergeAttribute(
" title " " span! " );
    
return  builder.ToString();
}

 

使用:

<% = Html.Span( " span2 " , " tagbuilder创建的span " , " normalCss " %>

 

源码: 

< span  class ="normalCss"  id ="span2"  title ="span!" > tagbuilder创建的span </ span >

 

博客园大道至简

http://www.cnblogs.com/jams742003/

转载请注明:博客园

目录
相关文章
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
7月前
|
前端开发 Java
自定义mvc的增删改查
自定义mvc的增删改查
71 0
|
7月前
|
XML 前端开发 数据格式
自定义MVC引用XML配置文件实现
自定义MVC引用XML配置文件实现
71 0
|
7月前
|
设计模式 前端开发 搜索推荐
自定义mvc框架
自定义mvc框架
75 0
|
设计模式 前端开发
自定义mvc
自定义mvc
56 0
|
XML 前端开发 数据格式
自定义MVC超详细易懂----增删改查
自定义MVC超详细易懂----增删改查
114 0
|
存储 前端开发 架构师
自定义MVC实现 很详细(下)---优化版
自定义MVC实现 很详细(下)---优化版
|
存储 设计模式 前端开发
自定义MVC实现
自定义MVC实现
|
安全 Java
自定义mvc----增删改查终极篇
自定义mvc----增删改查终极篇
48 0
|
XML 设计模式 前端开发
自定义MVC---引用XML
自定义MVC---引用XML
53 0