• mvc5 HTML Helper


    转自:http://www.cnblogs.com/CodeFox/p/3782535.html

    提及到HTML helper大家肯定不应该陌生, 因为在书写MVC View的时候肯定需要使用到它。一个HTML Help就是一个返回HTML字符串的方法,这个字符串表示你所期望的类型的内容。例如,你可以使用HTML Helper去呈现标准的HTML标记像HTML <input>, <button>和<image>等标记。如果MVC提供的内建的HTML helper满足不了你的View的输出需求,并且你想输入一种更复杂的类型的内容例如HTML table等等,那么你可以利用MVC提供的定制功能去开发扩展的HTML helper为你所用, 下面我们简单介绍下MVC提供的几种HTML helper.

    不同类型的HTML Helpers, 归纳起来MVC提供了如下三种类型的HTML Helper:

    1. Inline HTML Helpers(又名内联HTML Helper)

    这种类型的HTML Helper只能在定义它的视图View中使用,只能做基本的扩展,缺乏必要的重用性,定义的语法以 Razor @helper 标签开头,后面跟着添加方法的签名,例子如下:

    @helper ListingItems(string[] items)

    {

    <ol>

    @foreach (string item in items)

    {

    <li>@item</li>

    }

    </ol>

    }

     <h3>Programming Languages:</h3>

     @ListingItems(new string[] { "C", "C++", "C#" })

     <h3>Book List:</h3>

     @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })

     

    2. Built-In Html Helpers(内建的HTML Helper)

    此种类型的HTML Helper为MVC默认提供Ship的, 具体细分有可细分为三种类型

    1) 标准HTML Helper

    HTML Element 示例

    TextBox
    @Html.TextBox("Textbox1", "val")  输出Output: <input id="Textbox1" name="Textbox1" type="text" value="val" />
     
    TextArea
    @Html.TextArea("Textarea1", "val", 5, 15, null)  输出Output: <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
     
    Password
    @Html.Password("Password1", "val")  输出Output: <input id="Password1" name="Password1" type="password" value="val" />
     
    Hidden Field
    @Html.Hidden("Hidden1", "val")  输出Output: <input id="Hidden1" name="Hidden1" type="hidden" value="val" />
     
    CheckBox
    @Html.CheckBox("Checkbox1", false)  输出Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
     
    RadioButton
    @Html.RadioButton("Radiobutton1", "val", true)  输出Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
     
    Drop-down list
    @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))  输出Output: <select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>
     
    Multiple-select
    Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"})) 输出Output: <select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>
     

    2) 强类型HTML Helper

    这些强类型的Helpers被用于呈现 最常用类型的HTML元素诸如文本框,复选框在强类型的视图中。也就是说视图中HTML元素的创建是基于实体模型属性的。另外,强类型的HTML helpers配合Lambda表达式使用。实体模型对象属性作为一个值被传递给Lambda表达式,并且你可以从实体模型对象中选择字段或属性用来设置HTML helper的id, 名称和值的特性。如下列表列出了最常用的强类型HTML helpers.

    HTML Element 示例
     
    TextBox
    @Html.TextBoxFor(m=>m.Name)  输出Output: <input id="Name" name="Name" type="text" value="Name-val" />
     
    TextArea
    @Html.TextArea(m=>m.Address , 5, 15, new{}))  输出Output: <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
     
    Password
    @Html.PasswordFor(m=>m.Password)  输出Output: <input id="Password" name="Password" type="password"/>
     
    Hidden Field
    @Html.HiddenFor(m=>m.UserId)  输出Output: <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
     
    CheckBox
    @Html.CheckBoxFor(m=>m.IsApproved)  输出Output: <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
     
    RadioButton
    @Html.RadioButtonFor(m=>m.IsApproved, "val")  输出Output: <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
     
    Drop-down list
    @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}))  输出Output: <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
     
    Multiple-select
    @Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"}))  输出Output: <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>

    3)模板类HTML Helpers

    这些helpers解决了什么样的HTML元素被用来呈现依据实体模型类的属性。对用户来说这是一个非常灵活的方法,尽管它需要一些初始化的设置。要通过Templated HTML Helper建立正确的HTML元素,可以使用DataAnnotation类的DataType特性。例如,当你使用Password 数据类型的时候,一个templated helper讲自动呈现Password类型的HTML输入元素。具体示例如下所示。

    Templated Helper 示例
     
    Display
    Renders a read-only view of the specified model property and selects an appropriate HTML element based on property’s data type and metadata. Html.Display("Name")
     
    DisplayFor
    Strongly typed version of the previous helper  Html.DisplayFor(m => m. Name)
     
    Editor
    Renders an editor for the specified model property and selects an appropriate HTML element based on property’s data type and metadata. Html.Editor("Name")
     
    EditorFor
    Strongly typed version of the previous helper  Html.EditorFor(m => m. Name)

    3.自定义Html Helpers(Custom Html Helpers)

    如果上述HTML helpers无法满足你的需求,你也可以创建你自己的自定义helper方法,这需要通过创建扩展方法在HTMLHelper类上或者通过在utility类中添加静态方法来实现,具体示例如下所示。

    public static class CustomHelpers
    {
     //Submit Button Helper
     public static MvcHtmlString SubmitButton(this HtmlHelper helper, string 
     buttonText)
     {
     string str = "<input type="submit" value="" + buttonText + "" />";
     return new MvcHtmlString(str);
     }
     //Readonly Strongly-Typed TextBox Helper
     public static MvcHtmlString TextBoxFor<TModel, TValue>(this 
     HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
     expression, bool isReadonly)
     {
     MvcHtmlString html = default(MvcHtmlString);
    
     if (isReadonly)
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression, new { @class = "readOnly",
     @readonly = "read-only" });
     }
     else
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression);
     }
     return html;
     }
    }
  • 相关阅读:
    (转)Linux系统调用和库函数调用的区别
    一个“梦想实践重度障碍者”的思考
    按字节输出数据
    内存区划分、内存分配、常量存储区、堆、栈、自由存储区、全局区[C++][内存管理]
    VimdiffVIM的比较和合并工具
    [每天进步一点 流水账]回顾总结
    计算机就业方向
    ofstream和ifstream详细用法(转)
    ECMAScript 运算符关系运算符
    ECMAScript 语句标签语句
  • 原文地址:https://www.cnblogs.com/mmcmmc/p/3823630.html
Copyright © 2020-2023  润新知