C# ASP.NET MVC HtmlHelper用法大全

HTML扩展类的所有方法都有2个参数：

以textbox为例子

   

    public
     
    static
     
    string
     TextBox( 
    this
     HtmlHelper htmlHelper, 
    string
     name, Object value, IDictionary
    <
    string
    , Object
    >
     htmlAttributes )

    public
     
    static
     
    string
     TextBox( 
    this
     HtmlHelper htmlHelper, 
    string
     name, Object value, Object htmlAttributes )
   

这2个参数代表这个html标签的属性集合。使用方法如下。

ActionLink

   

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    , 
    "
    Home
    "
    )
    %>
    
带有QueryString的写法

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    , 
    "
    Home
    "
    , 
    new
     { page
    =
    1
     },
    null
    )
    %>
    

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    , 
    new
     { page
    =
    1
     })
    %>
    
有其它Html属性的写法

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    , 
    "
    Home
    "
    , 
    new
     { id
    =
    "
    link1
    "
     })
    %>
    

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    ,
    null
    , 
    new
     { id
    =
    "
    link1
    "
     })
    %>
    
QueryString与Html属性同时存在

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
    , 
    "
    Home
    "
    , 
    new
     { page 
    =
     
    1
     }, 
    new
     { id 
    =
     
    "
    link1
    "
     })
    %>
    

    <%
    =
    Html.ActionLink(
    "
    这是一个连接
    "
    , 
    "
    Index
    "
     , 
    new
     { page 
    =
     
    1
     }, 
    new
     { id 
    =
     
    "
    link1
    "
     })
    %>
    
生成结果为：

    <
    a 
    href
    ="/"
    >
    这是一个连接
    </
    a
    >
    
带有QueryString的写法

    <
    a 
    href
    ="/?page=1"
    >
    这是一个连接
    </
    a
    >
    

    <
    a 
    href
    ="/?page=1"
    >
    这是一个连接
    </
    a
    >
    
有其它Html属性的写法

    <
    a 
    href
    ="/?Length=4"
     id
    ="link1"
    >
    这是一个连接
    </
    a
    >
    

    <
    a 
    href
    ="/"
     id
    ="link1"
    >
    这是一个连接
    </
    a
    >
    
QueryString与Html属性同时存在

    <
    a 
    href
    ="/?page=1"
     id
    ="link1"
    >
    这是一个连接
    </
    a
    >
    

    <
    a 
    href
    ="/?page=1"
     id
    ="link1"
    >
    这是一个连接
    </
    a
    >
     
   

RouteLink

   

    跟ActionLink在功能上一样。

    <%
    =
    Html.RouteLink(
    "
    关于
    "
    , 
    "
    about
    "
    , 
    new
     { })
    %>
    
带QueryString

    <%
    =
    Html.RouteLink(
    "
    关于
    "
    , 
    "
    about
    "
    , 
    new
     { page 
    =
     
    1
     })
    %>
    

    <%
    =
    Html.RouteLink(
    "
    关于
    "
    , 
    "
    about
    "
    , 
    new
     { page 
    =
     
    1
     }, 
    new
     { id 
    =
     
    "
    link1
    "
     })
    %>
    
生成结果：

    <
    a 
    href
    ="/about"
    >
    关于
    </
    a
    >
    

    <
    a 
    href
    ="/about?page=1"
    >
    关于
    </
    a
    >
    

    <
    a 
    href
    ="/about?page=1"
     id
    ="link1"
    >
    关于
    </
    a
    >
     
   

Form 2种方法

   

    <%
    using(Html.BeginForm(
    "
    index
    "
    ,
    "
    home
    "
    ,FormMethod.Post)){
    %>
     

    <%
    } 
    %>
    

    <%
    Html.BeginForm(
    "
    index
    "
    , 
    "
    home
    "
    , FormMethod.Post);
    //
    注意这里没有
    =
    输出
    %>
     

    <%
    Html.EndForm(); 
    %>
    
生成结果：

    <
    form 
    action
    ="/home/index"
     method
    ="post"
    ></
    form
    >
   

TextBox , Hidden

   

    <%
    =
    Html.TextBox(
    "
    input1
    "
    ) 
    %>
    

    <%
    =
    Html.TextBox(
    "
    input2
    "
    ,Model.CategoryName,
    new
    { @style 
    =
     
    "
    width:300px;
    "
     }) 
    %>
    

    <%
    =
    Html.TextBox(
    "
    input3
    "
    , ViewData[
    "
    Name
    "
    ],
    new
    { @style 
    =
     
    "
    width:300px;
    "
     }) 
    %>
    

    <%
    =
    Html.TextBoxFor(a 
    =>
     a.CategoryName, 
    new
     { @style 
    =
     
    "
    width:300px;
    "
     })
    %>
    
生成结果：

    <
    input 
    id
    ="input1"
     name
    ="input1"
     type
    ="text"
     value
    =""
     
    />
    

    <
    input 
    id
    ="input2"
     name
    ="input2"
     style
    ="width:300px;"
     type
    ="text"
     value
    ="Beverages"
     
    />
    

    <
    input 
    id
    ="input3"
     name
    ="input3"
     style
    ="width:300px;"
     type
    ="text"
     value
    =""
     
    />
    

    <
    input 
    id
    ="CategoryName"
     name
    ="CategoryName"
     style
    ="width:300px;"
     type
    ="text"
     value
    ="Beverages"
     
    />
   

TextArea

   

    <%
    =
    Html.TextArea(
    "
    input5
    "
    , Model.CategoryName, 
    3
    , 
    9
    ,
    null
    )
    %>
    

    <%
    =
    Html.TextAreaFor(a 
    =>
     a.CategoryName, 
    3
    , 
    3
    , 
    null
    )
    %>
    
生成结果：

    <
    textarea 
    cols
    ="9"
     id
    ="input5"
     name
    ="input5"
     rows
    ="3"
    >
    Beverages
    </
    textarea
    >
    

    <
    textarea 
    cols
    ="3"
     id
    ="CategoryName"
     name
    ="CategoryName"
     rows
    ="3"
    >
    Beverages
    </
    textarea
    >
     
   

CheckBox

   

    <%
    =
    Html.CheckBox(
    "
    chk1
    "
    ,
    true
    ) 
    %>
     

    <%
    =
    Html.CheckBox(
    "
    chk1
    "
    , 
    new
     { @class
    =
    "
    checkBox
    "
    }) 
    %>
     

    <%
    =
    Html.CheckBoxFor(a 
    =>
    a.IsVaild, 
    new
     { @class 
    =
     
    "
    checkBox
    "
     })
    %>
     
生成结果：

    <
    input 
    checked
    ="checked"
     id
    ="chk1"
     name
    ="chk1"
     type
    ="checkbox"
     value
    ="true"
     
    />
    

    <
    input 
    name
    ="chk1"
     type
    ="hidden"
     value
    ="false"
     
    />
     

    <
    input 
    class
    ="checkBox"
     id
    ="chk1"
     name
    ="chk1"
     type
    ="checkbox"
     value
    ="true"
     
    />
    

    <
    input 
    name
    ="chk1"
     type
    ="hidden"
     value
    ="false"
     
    />
     

    <
    input 
    checked
    ="checked"
     class
    ="checkBox"
     id
    ="IsVaild"
     name
    ="IsVaild"
     type
    ="checkbox"
     value
    ="true"
     
    />
    

    <
    input 
    name
    ="IsVaild"
     type
    ="hidden"
     value
    ="false"
     
    />
   

ListBox

   

    <%
    =
    Html.ListBox(
    "
    lstBox1
    "
    ,(SelectList)ViewData[
    "
    Categories
    "
    ])
    %>
     

    <%
    =
    Html.ListBoxFor(a 
    =>
     a.CategoryName, (SelectList)ViewData[
    "
    Categories
    "
    ])
    %>
     
生成结果：

    <
    select 
    id
    ="lstBox1"
     multiple
    ="multiple"
     name
    ="lstBox1"
    >
     

    <
    option 
    value
    ="1"
    >
    Beverages
    </
    option
    >
     

    <
    option 
    value
    ="2"
    >
    Condiments
    </
    option
    >
     

    <
    option 
    selected
    ="selected"
     value
    ="3"
    >
    Confections
    </
    option
    >
     

    <
    option 
    value
    ="4"
    >
    Dairy Products
    </
    option
    >
     

    <
    option 
    value
    ="5"
    >
    Grains/Cereals
    </
    option
    >
     

    <
    option 
    value
    ="6"
    >
    Meat/Poultry
    </
    option
    >
     

    <
    option 
    value
    ="7"
    >
    Produce
    </
    option
    >
     

    <
    option 
    value
    ="8"
    >
    Seafood
    </
    option
    >
     

    </
    select
    >
    

    <
    select 
    id
    ="CategoryName"
     multiple
    ="multiple"
     name
    ="CategoryName"
    >
     

    <
    option 
    value
    ="1"
    >
    Beverages
    </
    option
    >
     

    <
    option 
    value
    ="2"
    >
    Condiments
    </
    option
    >
     

    <
    option 
    value
    ="3"
    >
    Confections
    </
    option
    >
     

    <
    option 
    value
    ="4"
    >
    Dairy Products
    </
    option
    >
     
   

DropDownList

   

    <%
    =
     Html.DropDownList(
    "
    ddl1
    "
    , (SelectList)ViewData[
    "
    Categories
    "
    ], 
    "
    --Select One--
    "
    )
    %>
     

    <%
    =
    Html.DropDownListFor(a 
    =>
     a.CategoryName, (SelectList)ViewData[
    "
    Categories
    "
    ], 
    "
    --Select One--
    "
    , 
    new
     { @class 
    =
     
    "
    dropdownlist
    "
     })
    %>
     
生成结果：

    <
    select 
    id
    ="ddl1"
     name
    ="ddl1"
    >
     

    <
    option 
    value
    =""
    >
    --Select One--
    </
    option
    >
     

    <
    option 
    value
    ="1"
    >
    Beverages
    </
    option
    >
     

    <
    option 
    value
    ="2"
    >
    Condiments
    </
    option
    >
     

    <
    option 
    selected
    ="selected"
     value
    ="3"
    >
    Confections
    </
    option
    >
     

    <
    option 
    value
    ="4"
    >
    Dairy Products
    </
    option
    >
     

    <
    option 
    value
    ="5"
    >
    Grains/Cereals
    </
    option
    >
     

    <
    option 
    value
    ="6"
    >
    Meat/Poultry
    </
    option
    >
     

    <
    option 
    value
    ="7"
    >
    Produce
    </
    option
    >
     

    <
    option 
    value
    ="8"
    >
    Seafood
    </
    option
    >
     

    </
    select
    >
    

    <
    select 
    class
    ="dropdownlist"
     id
    ="CategoryName"
     name
    ="CategoryName"
    >
     

    <
    option 
    value
    =""
    >
    --Select One--
    </
    option
    >
     

    <
    option 
    value
    ="1"
    >
    Beverages
    </
    option
    >
     

    <
    option 
    value
    ="2"
    >
    Condiments
    </
    option
    >
     

    <
    option 
    value
    ="3"
    >
    Confections
    </
    option
    >
     

    <
    option 
    value
    ="4"
    >
    Dairy Products
    </
    option
    >
     

    <
    option 
    value
    ="5"
    >
    Grains/Cereals
    </
    option
    >
     

    <
    option 
    value
    ="6"
    >
    Meat/Poultry
    </
    option
    >
     

    <
    option 
    value
    ="7"
    >
    Produce
    </
    option
    >
     

    <
    option 
    value
    ="8"
    >
    Seafood
    </
    option
    >
     

    </
    select
    >
   

Partial 视图模板

   

    webform里叫自定义控件。功能都是为了复用。但使用上自定义控件真的很难用好。

    <%
     Html.RenderPartial(
    "
    DinnerForm
    "
    ); 
    %>