zoukankan      html  css  js  c++  java
  • MVC HtmlHelper guide

    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")  

     10. EditorFor
         返回一个由表达式表示的对象中的每个属性所对应的input元素,主要是针对强类型
     

    @Html.EditorFor(mode=>mode.Name)

    输出

    <input class="text-box single-line" id="Name" name="Name" type="text" value="默认值" />
    @Html.EditorFor(mode=>mode.Name,"templateName")

    第二个参数为模版名称,模版的定义:
    首先在目录View/Shared/建立文件夹EditorTemplates/templateName.cshtml 即:View/Shared/EditorTemplates/templateName.cshtml
    注:这务必用EditorTemplates作为文件夹
    templateName.cshtml:

     @Html.DropDownList("",new SelectList(new []{"1","2","3"}))

    表示一个值为1,2,3的下拉列表
    这时就可以调用

    @Html.EditorFor(mode=>mode.Name,"templateName")

    则显示成一个下拉列表,如果模版中设置的一个文本框则显示成文本框。

  • 相关阅读:
    Django对静态文件的处理——部署阶段
    使用Django来处理对于静态文件的请求
    Django1.7如何配置静态资源访问
    Spring WebSocket中403错误解决
    FastJSON JSONObject 字段排序 Feature.OrderedField
    国际化(i18n) 各国语言缩写
    【转】java.io.Closeable接口
    【转】spring bean 卸载
    This content should also be served over HTTPS
    Failed to close the ServletOutputStream connection cleanly, Broken pipe
  • 原文地址:https://www.cnblogs.com/peterfan/p/5054116.html
Copyright © 2011-2022 走看看