• 【转】MVC HtmlHelper用法大全


    HtmlHelper用来在视图中呈现 HTML 控件。

    以下列表显示了当前可用的一些 HTML 帮助器。 本主题演示所列出的带有星号 (*) 的帮助器。

    • ActionLink - 链接到操作方法。

    • BeginForm * - 标记窗体的开头并链接到呈现该窗体的操作方法。

    • CheckBox * - 呈现复选框。

    • DropDownList * - 呈现下拉列表。

    • Hidden - 在窗体中嵌入未呈现的信息以供用户查看。

    • ListBox * - 呈现列表框。

    • Password - 呈现用于输入密码的文本框。

    • RadioButton * - 呈现单选按钮。

    • TextArea - 呈现文本区域(多行文本框)。

     

    1.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>

    2.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>

    3.Form   2种方法

    @using(Html.BeginForm("index","home",FormMethod.Post)){
    
    }
    Or
    @Html.BeginForm("index", "home", FormMethod.Post)
    @Html.EndForm()

    生成结果:
    <form action="/home/index" method="post"></form>


    4.TextBox , Hidden ,

    @Html.TextBox("input1") 
    @Html.TextBox("input2",Model.CategoryName,new{ @style = "300px;" }) 
    @Html.TextBox("input3", ViewData["Name"],new{ @style = "300px;" }) 
    @Html.TextBoxFor(a => a.CategoryName, new { @style = "300px;" })

    生成结果:

    <input id="input1" name="input1" type="text" value="" />
    <input id="input2" name="input2" style="300px;" type="text" value="Beverages" />
    <input id="input3" name="input3" style="300px;" type="text" value="" />
    <input id="CategoryName" name="CategoryName" style="300px;" type="text" value="Beverages" />

    5.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>


    6.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" />

    7.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>
    <option value="5">Grains/Cereals</option>
    <option value="6">Meat/Poultry</option>
    <option value="7">Produce</option>
    <option value="8">Seafood</option>
    </select>


    8.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>

    9.Partial 视图模板
    类似于webform里的自定义控件。

    @Html.RenderPartial("DinnerForm")  

    原文链接:http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html

  • 相关阅读:
    pipelinewise 学习二 创建一个简单的pipeline
    pipelinewise 学习一 docker方式安装
    Supercharging your ETL with Airflow and Singer
    ubuntu中使用 alien安装rpm包
    PipelineWise illustrates the power of Singer
    pipelinewise 基于singer 指南的的数据pipeline 工具
    关于singer elt 的几篇很不错的文章
    npkill 一个方便的npm 包清理工具
    kuma docker-compose 环境试用
    kuma 学习四 策略
  • 原文地址:https://www.cnblogs.com/w821759016/p/6243580.html
Copyright © 2020-2023  润新知