ASP.NET MVC4 学习笔记-3
创建一个简单的数据录入程序——Create a Simple Data-Entry Application
在这篇博客中,我们将通过创建一个简单的数据录入程序来探索MVC的其他特点。在这一节中我们要跟上脚步,我们通过创建一些实例来学习MVC,因此将会跳过一些原理性的知识。但是不要担心——在以后的学习中将会着重进行讲解。
设置场景——Setting the Scene
我们假象我们的一个朋友希望举办一个新年之夜的派对(New Year's Eve),她邀请我们创建一个网站让她的被邀请者可以电子RSVP。她想我们提了4个要求:
- 一个展示关于派对的首页面
- 一个可以用于RSVP的表格
- 对RSVP的内容进行验证,并且展示一个感谢页面
- 被邀请者填完电子表格后可以发邮件给派对的举办者
在以后的章节中,我们将在前面创建的MVC项目的基础上完成这些要求。在前面创建的视图中,我们重新添加一些HTML语言来介绍关于派对的一些内容。在Views/Home/Index.cshtml文件中进行添加,修改后的代码如下所示:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @ViewBag.Greeting World (from the view) <p> We're going to have an exciting party.<br /> (To do: sell it better.Add pictures or something.) </p> </div> </body> </html>
我们按照我们自己的方式来进行修改,运行程序我们将会看到刚才增加关于派对的详细信息,运行效果如下图所示:
设计一个数据模型——Designing a Data Model
在MVC中,M代表的是模型(Model),并且它是程序中一个重要的部分。模型是现实世界、处理过程和定义主题的规则的抽象,被广泛称为域(Domain)。模型通常称为域模型(Domain Model),包含我们程序核心的C#对象(称为域对象)和用来操作这些对象的方法。视图和控制器结合将我们的模型展现给用户,一个好的MVC应用程序起源于一个精心设计的模型,这将会是我们添加视图和控制器时所关心的。
在PartyInvites程序中我们不需要很复杂的模型,但是我们需要创建一个名为:GuestResponse的类。这个对象将会用于存储、验证和确认一个RSVP。
增加一个模型类——Adding a Model Class
MVC约定模型类必须放在Models的文件夹中。在解决方案浏览器中右键点击Models文件夹,在弹出的菜单中选择“添加”/"类"。命名为:GuestResponse.cs。编辑这个类的代码如下所示:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace PartyInvites.Models { public class GuestResponse { public string Name { get; set; } public string Email { get; set; } public string Phone { get; set; } public bool? WillAttend { get; set; } } }
提示:如果在弹出的菜单中找不到“类”,那么你可能就要结束Visual Studio的调试运行。Visual Studio不允许在程序运行的时候来修改代码。
提示:我们也许会看到WillAttend属性允许为空,也就是说它可以有true、false或者null。我们将在后面的“添加验证(Adding Validation)”章节中进行介绍。
连接操作方法——Linking Action Method
我们程序的一个目标就是包含一个RSVP表格,因此,我们需要在Index.cshtml视图中增加一个纸箱该表格的连接,代码如下所示:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @ViewBag.Greeting World (from the view) <p> We're going to have an exciting party.<br /> (To do: sell it better.Add pictures or something.) </p> @Html.ActionLink("RSVP Now","RsvpForm") </div> </body> </html>
Html.ActionLink是一个HTML的帮助方法(helper method)。MVC框架中内置帮助方法的集合,可以很方便的用于渲染HTML链接、文本框、复选框、下拉列表和一些常规的控件。ActionLink方法需要两个参数:第一个是该链接要显示的字符串,第二个是点击链接后所要跳转到的页面名字。我们将在后面的学习中继续探讨关于HTML帮助方法的内容。增加链接后的页面如下所示:
如果我们将鼠标移动到链接上面,将会显示Http://yoursite/Home/RsvpForm.这个Html.ActionLink方法已经找到了我们程序的路由配置信息,并且确定链接/Home/RsvpForm就是在控制器HomeController中名为RsvpForm的动作(action)。特别注意的是,与传统的ASP.NET程序不同的是MVC的链接与文件的位置并不是一一对应的。每一个动作都有它自己的URL,MVC框架使用ASP.NET的路由系统将URL转换为动作(actions)。
增加一个动作方法——Creating the Action Method
如果我们点击上面增加的链接,将会看到一个404 Not Found的错误。这是因为我们没有创建与/Home/RsvpForm这个链接想对应的方法。那么我们就要在控制器HomeController中添加一个名为RsvpForm的方法,代码如下所示:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace PartyInvites.Controllers { public class HomeController : Controller { public ViewResult Index() { int hour = DateTime.Now.Hour; ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon"; return View(); } public ViewResult RsvpForm() { return View(); } } }
创建一个强类型视图——Adding a Strongly Typed View
我们要为RsvpForm方法添加一个对应的视图,但是这次与上面略有不同——我们将要创建一个强类型视图(strongly typed view)。一个强类型视图将会渲染一个具体的域类型,我们所使用的指定类型(在这个例子中是GuestResponse),MVC可以很方便做到这一点。
警告:确定我们的MVC项目在处理(proceeding)之前已经完成编译。如果我们创建了GuestResponse类但是没有进行编译,将不能使用这个对象来创建强类型视图。可以使用“生成(Build)”菜单下的“生成解决方案(Build Solution)”来编译我们的程序。
在RsvpForm方法的内部邮件单击,在弹出的菜单中选择“添加视图(Add View)”来创建视图。在“添加视图”对话框中,选中“创建一个强类型视图(Create a Strongly-typed view)”、并在下拉列表中选择GuestResponse。取消“使用布局或母版页”的选择、并保证视图引擎为Razor、支架模板的选项为Empty。如下图所示:
点击“添加”按钮后,Visual Studio将会自动创建一个名为RsvpForm.cshtml的文件并打开它可以编辑代码。该文件初始化时的代码如下所示。我们将会注意到,这是一个以HTML为框架的文件,并且包含了一个@Model的Razor短语。一会我们将会看到,这才是强类型视图的关键,将会在不就为我们带来便利。
@model PartyInvites.Models.GuestResponse @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>RsvpForm</title> </head> <body> <div> </div> </body> </html>
构建表单——Building the Form
我们已经创建了一个强类型视图,现在要编辑RsvpForm.cshtml这个文件使用HTML语言创建一个用于编辑GuestResponse对象的表单。编辑后的代码如下所示:
@model PartyInvites.Models.GuestResponse @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>RsvpForm</title> </head> <body> @using (Html.BeginForm()) { <p>Your name: @Html.TextBoxFor(x => x.Name)</p> <p>Your email: @Html.TextBoxFor(x => x.Email)</p> <p>Your phone: @Html.TextBoxFor(x => x.Phone)</p> <p> Will you attend? @Html.DropDownListFor(x => x.WillAttend,new[]{ new SelectListItem() {Text = "Yes,I'll be there", Value = bool.TrueString}, new SelectListItem() {Text = "No,I can;t come",Value = bool.FalseString} },"Choose an option") </p> <input type="submit" value="Submit RSVP" /> } </body> </html>
模型GuestResponse类中的每一个属性,我们都使用HTML帮助方法渲染了一个合适的“输入”方式。我们使用lambda表达式来将我们的输入与对象的属性之间相联系,形式如下所示:
@Html.TextBoxFor(x => x.Phone)
HTML语言的TextBoxFor方法时为输入元素生成HTML代码的,设置类型参数为text,id和name为Phone,所选域内的属性转化为:
<inout id="Phone" name="Phone" type="text" value="" />
这样方便的使用时因为我们的RsvpForm视图使用的是强类型,我们已经“告诉”MVC框架GuestResponse这个类型我们要与视图一起渲染,因此HTML帮助方法可以推断出我们希望通过@model短语来使用的类型。
如果你对C#的lambda表达式不熟悉也不用担心,除了使用lambda表达式意外我们可以使用一个字符串来指定属性类型的名字,形式如下所示:
@Html.TextBox("Email")
如果我们使用lambda表达式形式来使用TextBoxFor方法时可以在弹出的选项中进行选择,防止我们输入错误的属性名。
另外一个很方便的帮助方法为Html.BeginForm,生成一个HTML的表单元素可以配置为回发到操作方法。由于我们没有向帮助方法中传递任何的参数, 它假定我们会发到相同的URL。一个简便的方式就是使用C#的using语句,如下所示:
@using(Html.BeginForm()) { ...from contents go here... }
一般情况下,当我们用这种方式使用的时候,using语句块可以确保一个对象超出这个范围的时候可以进行销毁。它经常用于连接数据库,使用这种方式可以确保在查询完成的时候可以及时的断开数据库连接,避免占用不必要的资源和系统开销。
与处理一个对象不同的是,HtmlBeginForm方法在其超出作用范围的时候将会关闭HTML表单元素。也就是说,HtmlBeginForm 帮助函数为一个表单元素创建了两个部分,例如:
<form action="/Home/RsvpForm" method="post"> ...form content go here... </form>
如果不熟悉如何处理C#中的对象也没有关系。这里就是演示一下如何使用HTML帮助函数创建一个表单。运行程序并点击“RSVP Now”链接后的界面如下所示:
提示:这里对CSS或者网页设计不再详细的叙述。绝大部分为创建一些有利于学习MVC框架的事例。MVC生成的网页看起来很简介,我们可以利用HTML元素随其布局进行完全的控制,因此你不用在使用其他的网页辅助工具来使MVC项目看起来更加的漂亮。
---<本节完>---