MVC表单和HTML辅助方法

一、表单的使用。

表单中的action与method特性。Action表示表单要提交往那里,因此这里就有一个URL。这个URL可以是相对或绝对地址。表单默认的method属性值是get,如果看到表单没有写method属性那就是表示method是get方式提交。另外一种就是post方式。

当使用HTTP Get请求时,浏览器会提取表单中元素的name特性值及相应的value特性值放到查询字符串中。如:http://localhost?search?id=1

如果不想把值放到查询字符串中,放到HTTP请求的主体中,就应该使用post方式。

通常情况下get方式用于读操作(查询),post方式用于写操作(更新、创建、删除)。

创建示例:

//查询界面查询

@using (Html.BeginForm("Search", "Home",FormMethod.Get))

{

    <input type="text" name="q" />

    <input type="submit" value="search" />

}

//相应的控制器中的action处理Http Get得到的数据,返回查询结果视图

public ActionResult Search(string q)

        {

            var db = new MusicStoreDB();

            var alblums = db.albums.Include("Artist")

                .Where(a => a.Title.Contains(q)).Take();

            ViewBag.Message = "Search";

            return View(alblums);

        }

//视图显示查询结果

@model IEnumerable<LYG.HelloWorld.Models.Album>

@{

    ViewBag.Title = "Search";

}

<h2>Result</h2>

<table>

    <tr>

        <th>Artist</th>

        <th>Title</th>

        <th>Price</th>

    </tr>

    @foreach(var item in Model)

    {

        <tr>

            <td>@item.Artist.Name</td>

            <td>@item.Title</td>

            <td>@string.Format("{0:c}",item.Price)</td>

        </tr>

    }

</table>

二、HTML辅助方法。

1.Html.BeginForm

 @using (Html.BeginForm("Search", " Home", FormMethod.Get))

 {

     <input type="text" name="q" />

     <input type="submit" name="Search" /> 

 }

等效的html:

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

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

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

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

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

等效的HTML为:

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

2.Html.ValidationSummary

 @Html.ValidationSummary(true)

用来显示ModelState字典中所有验证错误的无序列表。使用布尔类型参数(值为true)来告知辅助方法排除属性级别的错误,而不显示那些具体模型属性相关的错误

3.Html.TextBox

@Html.TextBox("Title",Model.Title)

渲染一个type特性为text的input标签,用于接收用户自由形式的输入,等效的HTML:

<input id="Title" name="Title" type="text" value="For those about to Rock We Salute You" />

4.Html.TextArea

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

等效HTML:

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

5.Html.Label

@Html.LabelFor(p=>p.GenereId)

等效HTML:

<label for ="GenreId">Genre</label>

返回一个<label/>元素,并使用String类型的参数来决定渲染的文本和for特性值

6.Html.DropDownList和Html.ListBox

DropDownList允许进行单项选择,而ListBox支持多项选择(在要渲染的标记中,把multiple特性的值设置为multiple)

通常,select元素有两个作用:

展示可选项的列表

展示字段的当前值

下拉列表需要包含所有可选项的SelectListItem对象集合,其中每一个SelectListItem对象又包含有Text、Value和Selected三个属性。可以根据需要构建自己的SelectListItem对象集合,也可以使用框架中的SelectList或者MultiSelectList辅助方法类来构建。这些类可以查看任意类型的Ienumerable对象并将其转换为SelectListItem对象的序列。

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

public ActionResult Edit(int id)

 {

    var album = storeDB.Albums.Single(a => a.AlbumId == id);

    ViewBag.Genres = new SelectList(storeDB.Genres.OrderBy(g => g.Name),
"GenreId","Name",album.GenreId); return View(album); }

这里控制器操作不仅构建了主要模型(用于编辑的模型),还构建了下拉列表辅助方法所需要的表示模型。SelectList构造函数的参数指定了原始集合(数据库中的Genres表)、作为后台值使用属性名称(Name)以及当前所选项的值(他决定将哪一项标记为选择项)。

如果想在避免反射开销的同时还想自己生成SelectListItem集合,可以使用LINQ的Select方法来将SelectListItem对象集放入项目Genres:

 var album = MusicStoreDB.Genres

                              .OrderBy(g => g.Name)

                              .AsEnumerable()

                              .Select(g => new SelectListItem

                              {

                                  Text = g.Name,

                                  Value = g.GenreId.ToString(),

                                  Selected = album.GenreId == g.GenreId

                              });

     return View(album);

7.Html.ValidationMessage

 @Html.ValidationMessage("Title")

等效HTML:

<span class="field-validation-error" data-valmsg-for="Title" data-valmsg-replace="true">

What a terrible name!

</span>

当ModelState字典中的某一特定字段出现错误时,可以使用ValidationMessage辅助方法来显示相应的错误提示消息。

8.Html.Hidden

@Html.Hidden("WizardStep","")

方法用于渲染隐藏的输入元素,等效HTML:

<input id="wizardStep" name="wizardStep" type="hidden" value="1" />

强类型方法是Html.HiddenFor。如果模型有一个WizardStep属性,就可以这样使用:

@Html.HiddenFor(m => m.WizardStep)

9.Html.Password

@Html.Password("UserPassword")

方法用于渲染密码字段。它除了不保留提交值,显示密码掩码之外,基本与TextBox辅助方法一样。

等效HTML:

<input id="UserPassword" name="UserPassword" type="password" value="">

Html.Password的强类型方法是Html.PasswordFor。下面的代码展示如何使用它来显示UserPassword属性:

@Html.PasswordFor(m => m.UserPassword)

10.Html.RadioButton

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

单选按钮一般都组合一起使用,为用户的单项选择提供一组可选项。

等效的HTML:

<input id="color" name="color" type="radio" value="red" />

Html.RadioButton有一个强类型的对应方法Html.RadioButtonFor。强类型方法不使用名称和值,而是用表达式来标识那些包含有要渲染属性的对象,当用户选择单选按钮时,后面会跟要提交的值:

@Html.RadioButtonFor(m => m.GenreId, "") Rock

11.Html.CheckBox

@Html.CheckBox("IsDiscounted")

方法是唯一一个渲染两个输入元素的辅助方法,等效HTML:

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

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

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

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

(1)如果想在一个表单中设置专辑的价格,可使用下面的控制器代码

 public ActionResult Edit(int id)

 {

    ViewBag.Price = 10.0;

    return View();

 }

在相应的视图中,使用ViewBag中的值来为TextBox辅助方法命名,可以实现渲染显示价格的文本框:

@Html.TextBox("Price")

TextBox辅助方法将生成如下所示的HTML标记:

<input id="Price" name="Price" type="text" value="10" />

(2)当辅助方法查看ViewData里面的内容时,他们也能看到其中的对象属性。修改先前的控制器操作:

public ActionResult Edit(int id)

 {

    ViewBag.Album = new Album {Price = };

    return View();

 }

在响应的视图中,可以使用下面这行代码来显示一个带有专辑价格的文本框:

@Html.TextBox("Album.Price")

现在渲染出的HTML标记如下所示:

<input id="Album_Price" name="Album.Price" type="text" value="11" />

如果在ViewData中没有匹配“Album.Price”的值,那么辅助方法将尝试查找与第一个点之前那部分名称(Album)匹配的值。换言之,就是找一个Album类型的对象。然后,辅助方法估测名称中剩余的部分(Price),并找到相应的值。

注意渲染得到的input元素的id特性值使用下划线代替了点(但name特性依然使用点)。

(3)TextBox辅助方法依靠强类型视图数据也能很好的工作。

public ActionResult Edit(int id)

  {

       var album = new Album {Price = 12.0m};

       return View(album);

  }

视图中的代码:

@Html.TextBox("Price");

对应的HTML标记:

<input id="Price" name="Price" type="text" value="12.0" />

(4)如果想避免自动的查找数据,可向表单辅助方法提供一个显式的值。有时,显式提供值的方法是必须的。返回到刚才正在构建(用来编辑专辑信息)的表单。

控制器代码:

  public ActionResult Edit(int id)

    {

          var album = storeDB.Albums.Single(a => a.AlbumId == id);

          ViewBag.Genres = new SelectList(storeDB.Genres.OrderBy(g => g.Name)

                                                 , "GenreId"

                                                 , "Name"

                                                 , album.GenreId);

         return View(album);

   }

视图:

@Html.TextBox("Title", Model.Title)

强类型的辅助方法

如果不适应使用字符串字面值从视图数据中提取值的话,也可以使用MVC提供的各种强类型辅助方法。使用强类型辅助方法时,只需要为其传递一个lambda表达式来指定要渲染的模型属性。表达式的模型类型必须和为视图指定的模型类型(使用@model指令)一致。对于专辑模型的强类型视图,需要在视图顶部输入如下所示的代码:

@model MvcMusicStore.Models.Album

一旦添加模型指令,就可以使用下面的代码重写前面的专辑编辑表单:

 @using (Html.BeginForm())

  {

      @Html.ValidationSummary(excludePropertyErrors: true)

      <fieldset>

          <legend>Edit Album</legend>

          <p>

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

              @Html.DropDownListFor(m => m.GenreId, ViewBag.Genres SelectList)

          </p>

         <p>

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

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

         </p>

         <input type="submit" name="Save">

     </fieldset>>

 }

注意:

这些强类型的辅助方法名称除了有"For"后缀之外,跟先前使用的辅助方法还有相同的名称。尽管该代码生成了与先前代码同样的HTML标记,但是用lambda表达式代替字符串还有许多其他好处,其中包括智能感知、编译时检查和轻松的代码重构。

这里不需要显式的为Title文本框设置值,这主要是因为lambda表达式向辅助方法提供了足够的信息,使其能直接读取模型的Title属性来获取需要的值。

模版辅助方法

ASP.NET MVC中的模版辅助方法利用元数据和模版构建HTML。其中元数据包括关于模型值(它的名称和类型)的信息和(通过数据注解或自定义提供器添加的)模型元数据

。模型辅助方法有Html.Display和Html.Editor,以及分别与他们对应的强类型方法Html.DisplayFor和Html.EditorFor,还有它们对应的完整模型Html.DisplayForModel和Html.EditorForModel

 @Html.TextBox("Title",Model.Title)

等同于:

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

两者生成的HTML标记是相同的,,但是EditorFor方法可以通过使用数据注解来改变生成的HTML

渲染辅助方法

12.Html.ActionLink和Html.RouteLink

ActionLink辅助方法能渲染一个超链接(锚标签),渲染的链接指向另一个控制器操作,与前面看到的BeginForm辅助方法一样,ActionLink辅助方法在后台使用路由API来生成URL。

当链接的操作所在控制器与用来渲染当前视图的控制器一样时,只需要指定操作的名称:

 @Html.ActionLink("Link Text", "AnotherAction")

这里假设采用默认路由,那么执行这段代码将生成如下所示的HTML标记:

<a href = "/Home/AnotherAction">LinkText</a>

当需要一个指向不同控制器操作的链接时,可通过ActionLink方法的第三个参数来指定控制器名称。例如要链接到ShoppingCartController控制器的Index操作,可以使用下面的代码:

 @Html.ActionLink("Link Text", "Index", "ShoppingCart")

13 URL辅助方法

URL辅助方法与HTML的ActionLink和RouteLink辅助方法类似,但它不是以HTML标记的形式返回构建的URL,而是以字符串的形式返回这些URL。对此,有三个辅助方法:

Action

Content

RouteUrl

Action辅助方法与ActionLink非常类似,但是它不返回锚标签。例如,下面的代码会显示浏览商店里所有Jazz专辑的URL(不是链接):

 <span>

     @Url.Action("Browse", "Store", new {genre = "Jazz"}, null)

</span>

将会生成如下所示的HTML标记:

<span>

/Store/Browse?genre=Jazz

</span>

14 Html.Partial和Html.RenderPartial

Partial辅助方法用于将部分视图渲染成字符串,如下将渲染一个名为AlbumDisplay的部分视图

@Html.Partial("AlbumDisplay")

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

 @{Html.RenderPartial("AlbumDisplay"); }

 或

 @Html.Partial("AlbumDisplay")

一般情况下,因为Partial相对于RenderPartial来说更方便(不必使用花括号将调用封装在代码块中),所以选择Partial。然而,RenderPartial拥有较好的性能,因为它是直接写入响应流的,但这种性能优势需要大量的使用(高的网站流量或在循环中重复调用)才能看出来。

15 Html.Action和Html.RenderAction

Action和RenderAction之间仅有的不同之处在于:RenderAction可以直接写入响应流。

Asp.net MVC4高级编程学习笔记-模型学习第五课MVC表单和HTML辅助方法20171101的更多相关文章

  1. Asp.net MVC4高级编程学习笔记-视图学习第一课20171009

    首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...

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

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

  3. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

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

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

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

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

  6. 《ASP.NET MVC高级编程(4版)》读书笔记(5)表单和HTML辅助方法

    5.1 表单使用 5.1.1 action 和 method 特性 <form action="/Home/Index">     <input name=&qu ...

  7. ASP.NET MVC5 学习系列之表单和HTML辅助方法

    一.表单 (一)Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form ...

  8. ASP.NET MVC5(三):表单和HTML辅助方法

    表单的使用 Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form标签 ...

  9. Asp.net MVC4高级编程学习笔记-模型学习第四课基架与模型绑定20171027

    MVC模型 一.构建基架. MVC中的基架可以为应用程序提供CURD各种功能生成所需要的样板代码.在添加控制器的时候可以选择相应的模板以及实体对象来生成相应的模板代码. 首先定义一个模型类如下所示: ...

随机推荐

  1. 如何实现301的跳转?当输入域名http://xxx.com的时候自动重定向到www上去

    答案:在服务器上操作,注意勾选和不勾选的区别,使用Fiddle进行观察,301和302之间的区别

  2. 内存分配函数malloc、realloc、calloc、_alloca

    1.内存分配函数_alloca.malloc.realloc.calloc: _alloca 函数原型void * __cdecl _alloca(size_t); 头文件:malloc.h _all ...

  3. Android Sdk 国内镜像下载地址

    大连东软信息学院镜像服务器地址:- http://mirrors.neusoft.edu.cn 端口:80北京化工大学镜像服务器地址:- IPv4: http://ubuntu.buct.edu.cn ...

  4. XCode: duplicate symbol

    XCode: duplicate symbol 2013-05-27 17:28:21|  分类: iOS|字号 订阅     遇到引用库重复定义的问题,需要解决.   项目需要,同时引用ZBar和Q ...

  5. UIApplication 和 Appdelegate-----iOS

    正文 一 UIApplication 1.一个UIApplication代表是一个应用程序,而且是单例的.一个程序也只能有一个UIApplication对象 2.获取UIApplication对象: ...

  6. Tomcat集群应用部署的实现机制

    集群应用部署是一个很重要的应用场景,设想一下如果没有集群应用部署功能,每当我们发布应用时都要登陆每台机器对每个tomcat实例进行部署,这些工作量都是繁杂且重复的,而对于进步青年的程序员来说是不能容忍 ...

  7. C# WebAPI系列(2)

    上篇中简单介绍了一下WebApi,本章主要介绍一下Controller相关的知识. 在实际应用中,Controller是WebAPI的链接服务器和客户端的窗口.Controller的好坏影响整个系统的 ...

  8. Delphi LiveBinds组件

    Component Logo Component Name Description TBindSourceDB Is used for creating bindings to databases. ...

  9. 用PIP 安装或升级python遇到错误提示

    用PIP 安装或升级python遇到错误提示 $ pip install pythons Collecting pythons Could not find a version that satisf ...

  10. Docker系列之(一):10分钟玩转Docker

    1.前言 进入云计算的时代,各大云提供商AWS,阿里云纷纷推出针对Docker的服务,现在Docker是十分火爆,那么Docker到底是什麽,让我们来体验一下. 2.Docker是什麽 Docker是 ...