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

上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单。

Step 1. 修改Form标签

首先,我们可以使用Html.BeginForm来创建form标签。这样我们可以将原来的表单改成如下代码。

    @{Html.BeginForm("Save", "Home"); }
        <label for="nickname">昵称</label>
        <input name="nickname" type="text" />
        <br /><br />
        <label for="content">内容</label>
        <textarea name="content" cols="50" rows="5" ></textarea>
        <br /><br />
        <input type="submit" value="提交" />
    @{Html.EndForm();}

这里使用的Html.BeginForm方法的原型是Html.BeginForm(string actionName,string controllerName)。之前代码<form action="/Home/Save" method="post">中action的值是写死在Html里面的,原本这样做并没有什么问题,可是在ASP.NET MVC中网址Url是可以通过路由规则修改的,写死了对我们后期修改不利,使用这个辅助方法的好处是避免这一点。注意Html.BeginForm和Html.EndForm我们要语句方式调用,所以要加“;”和大括号。当然这样会显得不简洁,所以通常可以使用using语句,如下。

    @using (Html.BeginForm("Save", "Home"))
    {
        <label for="nickname">昵称</label>
        <input name="nickname" type="text" />
        <br /><br />
        <label for="content">内容</label>
        <textarea name="content" cols="50" rows="5" ></textarea>
        <br /><br />
        <input type="submit" value="提交" />
    }

Step 2. 改进表单标签

表单中的label标签和input标签同样可以改用Html辅助方法,来看代码。

    @using (Html.BeginForm("Save", "Home"))
    {
        @Html.Label("nickname","昵称")
        @Html.TextBox("nickname")
        <br /><br />
        @Html.Label("content","内容")
        @Html.TextArea("content", "",5,50,null)
        <br /><br />
        <input type="submit" value="提交" />
    }

Html.Label和Html.TextBox可以生成之前表单近乎相同的HTML标签。表单标签我们都可以使用Html辅助方法,它们之间的对应关系见下表。

<label> Html.Label
<input type="text"> Html.TextBox
<textarea> Html.TextArea
<select>
Html.DropDownList和Html.ListBox

<input type="hidden"> Html.Hidden
<input type="password> Html.Password
<input type="radio"> Html.RadioButton
<input type="checkbox"> Html.CheckBox

可见Html辅助方法可以让我们使用原本在ASP.NET编程就熟悉的控件名称。

Step 3. 使用强类型视图

在设计Index视图的时候,我们已经了解使用强类型的好处。在Write视图同样也应该使用强类型。

首先在Write视图顶部加上@model MessageBoard.Models.Message,接下来就可以使用强类型辅助方法替换先前的辅助方法。强类型辅助方法名称是辅助方法名加上后缀“For”,如Html.Label的强类型是Html.LabelFor。替换后的代码如下。

@model MessageBoard.Models.Message

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Write</title>
</head>
<body>
    <h1>MVC留言板</h1>
    @using (Html.BeginForm("Save", "Home"))
    {
        @Html.LabelFor(m=>m.NickName,"昵称")
        @Html.TextBoxFor(m => m.NickName)
        <br /><br />
        @Html.LabelFor(m => m.Content,"内容")
        @Html.TextAreaFor(m => m.Content,5,50,null)
        <br /><br />
        <input type="submit" value="提交" />
    }
</body>
</html>

强类型Html辅助方法使用lambda表达式来代替name字符串,这样做主要有两个好处:一是写代码时可以有代码提示;二是代码重构的时候可以自动修改。所以强类型Html辅助方法是我们主要构建表单的方式。

时间: 2024-10-10 23:19:52

ASP.NET MVC轻教程 Step By Step 6——改进表单的相关文章

ASP.NET MVC轻教程 Step By Step 8——路由

在前面的教程里,细心的你可能会有个疑问,就是地址栏输入/Home/Write就可以进入留言页面.无论是静态HTML还是ASP/ASP.NET.PHP,URL都是和某个页面相关.比如假设有个URL是“www.xxx.com/index.aspx?id=1",浏览器请求的页面是index.aspx,同时带有名为id值为1的参数.那为什么输入/Home/Write可以进入留言页面?你可能会认为其中Write是与write.cshtml对应,其实不然,动作方法名与视图名相同是约定,并不是铁律,我们完全可

ASP.NET MVC轻教程 Step By Step 12——客户端验证

前面两节使用的两种数据验证方法都是在服务器端进行的,也就是提交了表单,数据回传给服务器才能验证.这样会带来两个问题,一是用户体验不好,用户提交了表单之后才知道存在问题:二是会给服务器带来额外的压力.我们可以使用客户端验证来解决这两个问题. 客户端验证一般使用Javascript脚本,JQuery.validate就是一个不错的JQuery验证组件,很多项目都会用它来实现客户端验证. Step 1. 添加脚本 ASP.NET MVC对JQuery有很好的支持,实际上后者已经集成在前者里面了,新建一

ASP.NET MVC轻教程 Step By Step 9——分页

现在我们要把Index视图的留言信息进行分页显示. Step 1. 创建路由 我们希望以类似地址http://localhost:41583/Page1来表示第一页,Page2表示第二页,以此类推.在RouteConfig.cs中已有一条默认路由,但不能满足匹配类似/Page1这样的URL.我们要添加一条新的路由规则. public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource

ASP.NET MVC轻教程 Step By Step 13——页面布局

一般在一个网站中页面会使用相同的结构和元素,如果每个页面都要重复添加这些元素,不仅繁琐更会给我们后期维护带来大麻烦.所以我们采用网页模板之类的技术,将固定不变的元素放入模板,同时留下一些占位符供页面各自填充不同的内容.在ASP.NET WebForm中这种技术叫母版页,在ASP.NET MVC中它叫布局. Step 1. 添加布局页面 在Views目录下添加一个新的视图,名叫“MyLayout”,当然你也可以起别的名字. 将MyLayout.cshtml的HTML代码修改一下. <!DOCTYP

ASP.NET MVC轻教程 Step By Step 4——Model、View和Controller

ASP.NET MVC中的Model(数据模型)主要包括定义数据结构.数据库读写.数据验证等等和对象处理相关的工作. 在解决方案资源管理器中找到Model文件夹,点击右键,添加一个新类,名为“Message”.包含三个属性:NickName(用户名).Content(内容).ReleaseDate(发布日期). public class Message { public string NickName { set; get; } public string Content { set; get;

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

上一节我们将留言列表显示在Index视图里了,现在该添加一个留言的表单,好让用户自己添加留言. 首先在HomeController中添加一个名为“Write”的动作方法. public ActionResult Write() { return View(); } Write动作方法没什么好解释的,接下来添加对应的Write视图. 我们依然采用空的视图模板.在视图中添加如下HTML代码. <body> <h1>MVC留言板</h1> <form action=&q

【ASP.NET Web API教程】5.2 发送HTML表单数据:URL编码的表单数据

注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面的内容. 5.2 Sending HTML Form Data 5.2 发送HTML表单数据 本文引自:http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-1 By Mike Wasson|June 15, 2012 作者:Mike Wasson | 日期:2012-6-15 Part

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

有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了———— Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

ASP.NET MVC轻教程 Step By Step 3 ——使用ViewBag

在上一节我们创建了与Index动作方法对应的Index视图,那么Index动作方法该如何向Index视图传送数据呢?其中一个方法是使用ViewBag(视图包).让我们试试看. 在Index动作方法中添加一行代码. public ActionResult Index() { ViewBag.Today = DateTime.Now.ToLongDateString(); return View(); } Today是我们自己命名的,看起来好像是ViewBag的一个属性,但ViewBag是动态对象,