5.1 表单使用

5.1.1 action 和 method 特性

<form action="/Home/Index">
    <input name="q" type="text"/>
    <input value="提交" type="submit" />

</form>  

如果没有 method 默认是: get 方法。

5.1.2 GET 方法还是 POST 方法

       get 请求的所有参数都在URL中,因此可以为GET请求建立书签。除此之外,还可以保留所有的表单输入值。
      因为GET不会改变服务器上的状态,所以客户端可以向服务端重复发送GET请求而不会产生负面影响。
      通常在Web程序中,GET 请求用于读操作,POST 请求用于写操作(通常包括更新,创建和删除)。

<form action="/Home/Index" method="get">
    <input name="q" type="text"/>
    <input value="提交" type="submit" />

</form>  

      BeginForm Html 辅助方法
@using (Html.BeginForm("Search","Home",FormMethod.Get))
{
    <input name="q" type="text"/>
    <input value="提交" type="submit" />
}  
      BeginForm Html 的辅助方法利用路由引擎找到 HomeController 控制器的 Search 操作。它在后台使用 GetVirtualPath 方法,该方法在 Routetable 的 Routes 属性中——在 global.asax 中,应用程序注册所有路由的位置。

    public class RouteTable
    {
        // 摘要: 
        //     获取从 System.Web.Routing.RouteBase 类派生的对象的集合。
        // 返回结果: 
        //     包含集合中的所有路由的对象。
        public static RouteCollection Routes { get; }

}  


      不采用HTML辅助方法,将编写所有代码:

@{
    var context = this.ViewContext.RequestContext;
    var values = new RouteValueDictionary {
    {"controller","home"},{"action","index" }
    };
    var path = RouteTable.Routes.GetVirtualPath(context, values);
}
<form action="@path.VirtualPath" method="get">
    <input name="q" type="text" />
    <input value="提交" type="submit" />

</form>  

5.2 HTML辅助方法

5.2.1 自动编码

      本章许多辅助方法都可以输出模型值。所有这些输出模型值的方法都会在渲染前,对值进行HTML编码。

@Html.TextArea("text","hello <br/> world");

TextArea 辅助方法的第二个参数是要渲染的值。

<textarea cols="20" id="text" name="text" rows="2">
    hello &lt;br/&gt; world
</textarea>

5.2.2 辅助方法的使用(匿名对象 htmlAttributes,属性@class = "editForm",连字符data_validatable = true)

      保护代码的同时,辅助方法给出了适当的控制。为了展示辅助方法的作用,下列给出 BeginForm 另外一个重载版本:

@using (Html.BeginForm("Search", "Home", FormMethod.Get,new {target ="_blank"}))
{
    <input name="q" type="text" />
    <input value="提交" type="submit" />

}

        // 参数: 
        //   actionName:
        //     操作方法的名称。
        //
        //   controllerName:
        //     控制器的名称。
        //
        //   method:
        //     用于处理窗体的 HTTP 方法(GET 或 POST)。
        //
        //   htmlAttributes:

//     一个对象,其中包含要为该元素设置的 HTML 特性。

public static MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, FormMethod method, object htmlAttributes);

      向 BeginForm 方法的 htmlAttribute 参数传递一个匿名类型的对象,在MVC框架重载版本中,几乎每一个HTML辅助方法都包含 htmlAttribute 参数,有时发现某些重载版本中 htmlAttribte 参数类型是 IDctionary<string,object> 。辅助方法利用字典条目创建辅助方法生成元素的特性。

<form action="/Home/Search" method="get" target="_blank">

      设置元素的 class 特性就要求匿名类型对象上必须有一个名为 class 的属性,或者值的字典中有一个 class 的键。在字典中有一个“class”键值不是问题,问题在对象中有一个 class 的属性。
        因为 class 是 C# 的关键字,不能用作属性名称或标识符,所以要在c lass 前面加一个 @符号作为前缀:

@using (Html.BeginForm("Search", "Home", FormMethod.Get,new {target ="_blank",@class = "editForm"}))
{...}

结果:

<form action="/Home/Search" class="editForm" method="get" target="_blank">

      另一个问题是将属性设置为带连字符的名称(像 data-val)。
        所有 HTML 辅助方法在渲染 HTML 时会将属性名中的下划线转换为连字符

@using (Html.BeginForm("Search", "Home", FormMethod.Get, new { target = "_blank", @class = "editForm", data_validatable = true }))
{...}

结果:

<form action="/Home/Search" class="editForm" data-validatable="True" method="get" target="_blank">

5.2.3 HTML 辅助方法工作原理

      每一个 Razor 视图都继承了它们的基类的 Html 属性。Html 的属性类型是 System.Web.Mvc.HtmlHelper<T> 。
当方法名称左边有一个向下的蓝色箭头时,说明这个方法是一个扩展方法。
 

5.2.4 设置专辑编辑表单


@using (Html.BeginForm())
{
    @Html.ValidationSummary(excludePropertyErrors:true)
    <fieldset>
        <legend>Edit Album</legend>
        <p><input type="submit" value="Save"/></p>
    </fieldset>

}  


这段代码有两个辅助方法:

1.Html.BeginForm

      这里不带参数的 BeginForm 向当前发送一个 POST 请求,如果响应了 

<form action="/Home/Test" method="post">  

2.Html.ValidationSummary(生成错误验证摘要)

      ValidationSummary 用来显示 ModelState 字典中所有验证错误的无序列表。告知 ValidationSummary 方法只显示 ModelState 中与模型本身有关错误,而不显示那些与具体模型属性相关的错误。

ModelState.AddModelError("TermsAccepted", "You must accept the terms");  
 

5.2.5 添加输入元素

1.Html.TextBox 和 Html.TextArea

      Html.TextBox 会渲染一个 type 特性为 text 的 input 标签。

@Html.TextBox("Title",Model.Title)  
生成的HTML:<input id="Title" name="Title" type="text" value="Caravan">

@Html.TextArea("text","hello <br/> world")  
生成的HTML:<textarea cols="20" id="text" name="text" rows="2">hello &lt;br/&gt; world</textarea>

@Html.TextArea("text", "hello <br/> world", 10, 80, null)  
生成的HTML:<textarea cols="80" id="text" name="text" rows="10">hello &lt;br/&gt; world</textarea>

2.Html.Lable

       返回一个<lable>元素,并使用 String 类型参数决定渲染的文本和 for 特性值。(提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。)

@Html.Label("GenreId")  
生成的HTML:<label for="GenreId">GenreId</label>

3.Html.DropDownList 和 Html.ListBox

       DropDownList(单选) 和 ListBox(多选) 都返回一个 <select/> 元素。
       下拉列表需要一个包含所有可选项的 SelectListItem 对象集合,其中每一个 SelectListItem 对象包含 Text , Value 和 Selected 三个属性。也可以使用框架中的 SelectList 或 MultiSelectList 辅助方法来构建。这些类可以查看任意类型的 IEnumerable 对象并将其转换为 SelectListItem 对象的序列。

/// <summary>
/// 使用列表的指定项、数据值字段、数据文本字段和选定的值来初始化 System.Web.Mvc.SelectList 类的新实例
/// </summary>
/// <param name="items">各个项</param>
/// <param name="dataValueField">数据值字段</param>
/// <param name="dataTextField">数据文本字段</param>
/// <param name="selectedValue">选定的值</param>

public SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue);

 
例如,StoreManager 控制器中的 Edit 操作:

后台:

        public ActionResult CreateMyTest(int id = 0)
        {
            Album album = db.Albums.Find(id);
            if (album == null)
            {
                return HttpNotFound();
            }
            ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
            ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
            return View(album);

}  

前台:
@Html.DropDownList("GenreId", "请选择")  

生成的HTML:

<select id="GenreId" name="GenreId">
<option value="">请选择</option>
<option selected="selected" value="1">Al Di Meola</option>
</select>

4.Html.ValidationMessage

       当 ModelState 字典中的某一特定字段出现错误时,可以使用 ValidationMessage 辅助方法显示相应的错误提示消息。下面故意在模型状态中为 Title 属性添加一个错误:

        public ActionResult CreateMyTest(int id = 0)
        {
            Album album = db.Albums.Find(id);
            ModelState.AddModelError("Title", "what a terrible name!");
            return View(album);

}


在视图中使用:@Html.ValidationMessage("Title")


生成的 Html: 
<span class="field-validation-error" data-valmsg-for="Title" 
data-valmsg-replace="true">
what a terrible name!
</span>

也可以调用 ValidationMessage 重写方法来重写错误提示:@Html.ValidationMessage("Title","Something is wrong with your title")


5.2.6 辅助方法、模型和视图数据

      辅助方法如 Html.TextBox 和 Html.DropDownList(以及其他所有表单辅助方法) 检查 ViewData 对象以获取要显示的当前值(在 ViewBag 对象中所有值也可以通过 ViewData 得到)

        public ActionResult Test2(int id)
        {
            ViewBag.Price = 10;
            return View();

}


视图中,使用 ViewBag 中的值为 TextBox 辅助方法命名,显示价格的文本框:@Html.TextBox("Price")

<input data-val="true"  id="Price" name="Price" type="text" value="10">

当辅助方法查看 ViewData 内容时,能看到其中对象属性。下面修改控制器:

        public ActionResult Test2(int id)
        {
            ViewBag.Album = new Album { Price = 11 };
            ViewBag.Price = 10;
            return View();

}


视图修改:

@Html.TextBox("Album.Price")

输出HTML:
<input data-val="true" id="Album_Price" name="Album.Price" type="text" value="11">

 
         如果 ViewData 没有匹配 “Album.Price” 的值,那辅助方法将尝试查找与第一个点之前那部分名称(Album)匹配的值。换言之,就是找一个 Album 类型的对象。然后估测名称中剩余部分(Price),并找到相应的值。
         注意得到 input 元素的 id 特性值使用下划线代替了点(但name特性依然使用点)。因为 id 特性中包含点是非法的。因此,运行时用静态属性 HtmlHelper.IdAttributeDotReplacement 的值代替了点。如果没有有效的 id 特性,就无法执行带有 javascript 库的客户端脚本。

5.2.7 强类型辅助方法

      如果不适应从视图数据中提取值,可以使用 MVC 提供的强类型辅助分类方法。只需要提供一个 lambda 表达式来指定要渲染的模型属性。

@model MVC4.Models.Album  

添加了模型指令,可以使用下面的代码:

@Html.LabelFor(m=>m.GenreId)

@Html.DropDownListFor(m => m.GenreId, ViewBag.Genres as SelectList, "请选择")  

 
       静观代码生成与前面同样的 HTML标记,但用 lambda 表达式代替字符串有其他好处,包括智能感应、编译时检查和轻松的代码重构。

5.2.8 辅助方法和模型元数据

      辅助方法不仅查看 VIewData 内部数据,也利用可得到的模型元数据。

@Html.LabelFor(m=>m.GenreId) 

文本生成:<label for="GenreId">流派</label> 
       文本“流派”从哪里来的?当辅助方法询问运行时是否有 GenreId 的可用模型元数据时,运行时从装饰 Album 模型的 DIsplayName 特性中获取的信息。

        [DisplayName("流派")]

public virtual int GenreId { get; set; }  


5.2.9 模版辅助方法

       MVC 中的模版辅助方法利用元数据和模版构建 HTML 。
        元数据包括关羽模型值(它的名称和类型)的信息和(通过数据注解或自定义提供器添加的)模型元数据。模版辅助方法有 Html.Display 和 Html.Editor ,以及分别与它们对应的强类型方法 Html.DisplayFor 和 Html.EditorFor ,还有它们对应到完整模型 Html.DisplayForModel 和 Html.EditorModel 。
      例如 Html.TextBoxFor 辅助方法为某个专辑的 Title 属性生成HTML标记:

@Html.TextBoxFor(m => m.Title)

<input id="Title" name="Title" type="text" value="Caravan">

也可以使用 EditorFor 方法取代:

@Html.EditorFor(m => m.Title)

下面为 Title 属性添加一个 DataType 注解:

        [Required(ErrorMessage ="An Album Title is required")]
        [StringLength(160)]
        [DataType(DataType.MultilineText)]

public virtual string Title { get; set; }


生成的HTML:
<textarea class="text-box multi-line" data-val="true" data-val-length="字段 Title 必须是最大长度为 160 的字符串。" data-val-length-max="160" data-val-required="An Album Title is required" id="Title" name="Title">
Caravan
</textarea>

5.2.10 辅助方法和 ModelState

用来显示表单的值的所有辅助方法需要与 ModelState 交互。
      用来渲染表单字段的辅助方法自动在 ModelState 字典中查找它们的当前值。辅助方法使用名称表达式作为键,在 ModelState 字典进行查找。如果查找的值已在 ModelState 中,辅助方法就用 ModelState 的值替换视图数据中的当前值。
      模型绑定失败后, ModelState 查找表中允许保存“坏”值。例如,用户向 DateTime 属性编辑器中输入值 "abc",模型绑定就会失败,并且“abc” 也会保存在模型状态相关属性中。为了在用户修改验证错误而重新渲染视图时,“abc”值依然出现在 DateTime 编辑器中,可让用户看到刚才尝试的错误文本并允许他们修改。
      当 ModelState 包含某个属性的错误时,与错误相关的表单辅助方法除了显示渲染指定 CSS 类之外,还会渲染 input-validation-error CSS 类。

5.3 其他输入辅助方法


5.3.1 Html.Hidden

@Html.Hidden("wizard", "值")
生成的Html:
 <input type="hidden" id="wizard" name="wizard" value="值" />

5.3.2 Html.passwrod

@Html.Password("wizard")
生成的Html:
<input type="password" id="wizard" name="wizard" />

5.2.3 Html.RadioButtion

单选按钮一般组合起一起用。
@Html.RadioButton("color", "red")
@Html.RadioButton("color", "blue",true)

@Html.RadioButton("color", "green")

生成的HTML:
<input id="color" name="color" type="radio" value="red">
<input checked="checked" id="color" name="color" type="radio" value="blue">

<input id="color" name="color" type="radio" value="green">


5.2.4 Html.CheckBox

唯一渲染两个输入元素的方法
@Html.CheckBox("IsDiscuounted")
生成的Html:
<input id="IsDiscuounted" name="IsDiscuounted" type="checkbox" value="true">

<input name="IsDiscuounted" type="hidden" value="false">



5.4 渲染辅助方法

5.4.1 Html.ActionLink 和 Html.RouteLink


1.Html.ActionLink能够渲染一个超链接。
@Html.ActionLink("text", "index")
生成HTML:
<a href="/home/index">text</a>

2.当需要指向一个不同控制器的时候
@Html.ActionLink("index", "MenuList","Menu")
生成的HTML:
<a href="/Menu/MenuList">index</a>

3.传递参数,内置的 ActionLink没有提供处理版本。
      但是,其中一个版本允许向它传递一个 RouteValueDictionary 类型对象;另外一个版本允许给 routeValues 参数传递一个对象(通常是匿名类型的)。

例如,构建一个指向ID号为10720的专辑编辑页面的链接
@Html.ActionLink("Edit link text", "Edit", "StoreManager", new { id = 10720 }, null)
       上面重载最后一个参数是 htmlAttributes。传递了一个 null (实际上没有设置 HTML 元素上的任何特性值)。尽管未设置任何特性,但是为了调用 ActionLink 这个重载方法,必须传递一个参数。

生成的HTML:
<a href="/StoreManager/Edit/10720">Edit link text</a>

4.尽管 RouteLink 方法和 ActionLink 方法遵循相同模式,但 RouteLink 只接收路由名称,而不能接收控制器名称和操作名称。
      例如,演示 ActionLink 的第一个例子也可以用下面代码,
@Html.RouteLink("Link Text2",new{action="AnotherAction"})
生成HTML:
<a href="/Home/AnotherAction">Link Text2</a>

5.4.2 URL 辅助方法

1 Url.Action

    Action 方法与 ActionLink 相似,但它不返回锚标签。

<span>
@Url.Action("browse", "Store", new { genre = "Jazz" }, null)

</span>

生成的HTML:
<span>
/Store/browse?genre=Jazz
</span>

2 Url.Content

Content 方法特别有用,因为它可以把应用程序的相对路径换成绝对路径。
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>

3 Url.RouteUrl

RouteUrl 辅助方法与 Action 方法遵循同样的模式,但与 RouteLink 一样,只接收路由名称,而不接收控制器和操作名称。

5.4.3 Html.Partial 和 Html.RenderPartial

1.Html.Partial

Partial有4个重载版本
public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName);
public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, object model);
public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName, object model, ViewDataDictionary viewData);


这里没必要为视图指定路径和文件扩展名,因为运行时定位部分视图与定位正常视图使用的逻辑相同。
@Html.Partial("MenuForm")

2.Html.RenderPartial

RenderPartial 与 Partial 非常相似,但 RenderPartial 不返回字符串,而是直接写入响应输出流。
出于这个原因,必须把 RenderPartial 放入代码块中,而不能放入代码表达式中。

(1)错误写法
@Html.RenderPartial("MenuList")
 
(2)正确写法
@{Html.RenderPartial("MenuList");}

5.4.4 Html.Action 和 Html.RederAction

1.首先看一下它们的对等关系
@Html.Partial 对应 @{Html.RenderPartial();}
@Html.Action 对应 @{Html.RenderAction();}

2.Action 加载方法的视图,执行 Controller → Model → View 的顺序,然后把产生的页面带回到原来的View中再回传。而Partial直接加载视图文件内容

3.@Html.Partial 可以直接提供用户控件名作为参数,而 Html.Action 需要有对应的 Action ,在 Action 内部返回 PartailResult (即retun PartialView()) 。



























《ASP.NET MVC高级编程(4版)》读书笔记(5)表单和HTML辅助方法的更多相关文章

  1. ASP.NET MVC5 高级编程 第5章 表单和HTML辅助方法

    参考资料<ASP.NET MVC5 高级编程>第5版 第5章 表单和HTML辅助方法 5.1 表单的使用 5.1.1 action 和 method 特性 默认情况下,表单发送的是 HTT ...

  2. Asp.net MVC4高级编程学习笔记-模型学习第五课MVC表单和HTML辅助方法20171101

    MVC表单和HTML辅助方法 一.表单的使用. 表单中的action与method特性.Action表示表单要提交往那里,因此这里就有一个URL.这个URL可以是相对或绝对地址.表单默认的method ...

  3. 【ASP.NET MVC系列】浅谈表单和HTML辅助方法

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  4. ASP.NET MVC 3 之表单和 HTML 辅助方法(摘抄)

    ——选自<ASP.NET MVC3 高级编程(第5章) 孙远帅 译> 第5章 表单和HTML辅助方法 本章内容简介: * 理解表单 * 如何利用HTML辅助方法 * 编辑和输入的辅助方法 ...

  5. ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第四篇:传递表单数据

    摘要      本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言      通过前几篇文章,我们已经能比较自如的使用ASP.NET ...

  6. ASP.NET MVC轻教程 Step By Step 6——改进表单

    上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单. Step 1. 修改Form标签 首先,我们可以使用Html.B ...

  7. ASP.NET MVC轻教程 Step By Step 5——初识表单

    上一节我们将留言列表显示在Index视图里了,现在该添加一个留言的表单,好让用户自己添加留言. 首先在HomeController中添加一个名为“Write”的动作方法. public ActionR ...

  8. 表单和 HTML 辅助方法&ndash; ASP.NET MVC 4 系列

           这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...

  9. ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...

随机推荐

  1. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  2. Set a static file on django

    1. In setting file: ROOT_PATH='/home/ronglian/project/taskschedule' STATIC_URL = '/static/' STATICFI ...

  3. MYSQL 管理笔记(一)

    一.查看MySQL 版本   1.在终端下:mysql -V   2.在mysql中:mysql> status; 3:在help里面查找   mysql --help | grep Distr ...

  4. LR如何利用siteScope监控MySQL性能

    本次实验,是在自己的电脑上使用APMServ5.2.6部署Discuz2.X论坛下,对该论坛的数据库MySQL5.1进行性能测试的,下面讲述LoadRunner在设计场景时,如何利用siteScope ...

  5. TCP/IP的三次握手协议

    关于TCP/IP的三次握手协议,这篇文章中有详细的介绍,很通俗易懂,什么时候忘了,都可以过来瞧两眼,保证很快就明白了. 首先TCP/IP协议分为三个阶段:建立连接(握手阶段),数据传输阶段,连接终止阶 ...

  6. POJ--2391--Ombrophobic Bovines【分割点+Floyd+Dinic优化+二分法答案】最大网络流量

    联系:http://poj.org/problem?id=2391 题意:有f个草场,每一个草场当前有一定数目的牛在吃草,下雨时它能够让一定数量的牛在这里避雨,f个草场间有m条路连接,每头牛通过一条路 ...

  7. TodoList开发笔记 – Part Ⅱ

    上一节给出了应用的两个主要UML类图,应用采用的技术也给出了,这一节开始实际设计编码 一.应用公开的方法 其实就几个的方法而已 1.代办事项的CRUD 2.代办事项归类目录的CRUD 3.代表事项“已 ...

  8. 指定IP地址进行远程访问服务器设置方法(windows系统)

    我们有很多服务器经常受到外界网络的干扰,入侵者们通过扫描3389端口爆破密码非法进入我们的服务器,这时,我们可以配置服务器IP 安全策略来限制一些IP访问,大大提高了服务器的安全. 实验环境:     ...

  9. ps选区的两种复制方法

    1.选区选中之后,利用移动工具,按住alt键,拖动即可复制所选区域. ps:再一个图层上操作. 2.选区选中之后,Ctrl+c .Ctrl+v复制粘贴,按Ctrl+T移动. ps:新建一个图层操作,不 ...

  10. 使用 SendARP 获取 MAC 地址(使用SendARP API函数,很多相关文章)

    ARP 协议地址解析协议(ARP)是通过解析网路层地址来找寻数据链路层地址的一个在网络协议包中极其重要的网络传输协议.ARP 最初在 1982 年的 RFC 826 中提出并纳入互联网标准 STD 3 ...