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，所选域内的属性转化为：

这样方便的使用时因为我们的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项目看起来更加的漂亮。

---<本节完>---

ASP.NET MVC4 学习笔记-3的更多相关文章

asp.net mvc4 学习笔记一（基本原理）
做了8年的asp.net webform,用过MVVM但还没用过MVC , 虽然项目不用MVC,但是还是想了解一下,今天第二天学习,以下是学习心得. VS2012默认带有asp.net mvc3和as ...
ASP.NET MVC4学习笔记路由系统概念与应用篇
一.概念 1.路由是计算机网络中的一个技术概念,表示把数据包从一个网段转发至另一网段.ASP.NET中的路由系统作用类似,其作用是把请求Url映射到相应的"资源"上,资源可以是一段 ...
ASP.NET MVC4学习笔记之总体概述
断断续续使用ASP.NET MVC框架也有一年多了,也算积累了一些经验,唉,一直想写一些笔记好好总结一下,人太懒不想动笔,今天终于决定开始.希望自己能坚持下去. 这篇文章大体介绍ASP.NET MVC ...
ASP.NET MVC4学习笔记之Controller的激活
一. 高层相关类说明当路由系统根据请求Url收集路由信息后,下一步就要将路由信息传给Controller激活系统,Controller激活系统负责实现了IController接口的Controlle ...
ASP.NET MVC4学习笔记路由系统实现
一.路由实现路由系统实际是一个实现了ASP.NET IHttpModule接口的模块,通过注册HttpApplication的PostResolveRequestCache 事件对Url路由处理.总 ...
ASP.NET MVC4学习笔记
一.MVC简介
ASP.NET MVC4学习笔记之Controller激活的扩展
一. 为什么要进行扩展在前面的分析中,我们知道默认的Controller激活系统只能实例化无参构造函数的Controller类型,但在某些情况一下,我们希望某些服务的实例能够自动注入到Control ...
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET MVC 学习笔记-6.异步控制器 ASP.NET MVC 学习笔记-5.Controller与View的数据传递 ASP.NET MVC 学习笔记-4.ASP.NET MVC中Ajax的应用 ASP.NET MVC 学习笔记-3.面向对象设计原则
ASP.NET MVC 学习笔记-7.自定义配置信息 ASP.NET程序中的web.config文件中,在appSettings这个配置节中能够保存一些配置,比如, 1 <appSettin ...
[ASP.NET MVC] ASP.NET Identity学习笔记 - 原始码下载、ID型别差异
[ASP.NET MVC] ASP.NET Identity学习笔记 - 原始码下载.ID型别差异原始码下载 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授 ...
ASP.NET MVC学习笔记-----Filter2
ASP.NET MVC学习笔记-----Filter(2) 接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用 ...

随机推荐

用 Gaussian Process 建模 state-action 空间相关性，加速 Multi-Fidelity RL
目录全文快读 1 intro 3 背景 4 method 4.1 model-based 算法:GP-VI-MFRL 4.2 model-free 算法:GPQ-MFRL 5 experiment ...
卸载wamp忘记备份MySql，如何恢复MySql数据
大家把wamp卸载了,但是数据库忘记备份了.怎么办?不要急,不要慌!打开wamp所在目录(前提是你没有删),你会发现wamp特别良心的帮你把MySql的data文件夹留下来了,这个时候你只要把这个文件 ...
Disruptor-源码解读
前言 Disruptor的高性能,是多种技术结合以及本身架构的结果.本文主要讲源码,涉及到的相关知识点需要读者自行去了解,以下列出: 锁和CAS 伪共享和缓存行 volatile和内存屏障原理此节 ...
Kubuesphere部署Ruoyi（二）：部署kubesphere
先决条件: 更换DNS 更换apt的镜像源 Ubuntu下永久性修改DNS vi /etc/systemd/resolved.conf DNS字段取消注释,并修改DNS为223.5.5.5 223.5 ...
宝塔ftp无法连接的解决方案
宝塔面板现在使用率非常的高.今天把自己的踩坑处理方法记录一下. 在配置号宝塔面板ftp后,使用vscode的sftp插件,发现一直链接不上.一度以为自己配置文件,配置的参数有问题.各种度娘后,花了好长 ...
vscode取消“禁用错误波形曲线”
刚刚不小心点到了vscode的禁用错误波形曲线,导致现在没有报错提醒了,上网查了一下,重新打开错误曲线的方法是 1.按住Cctrl+shift+p 2.搜索启用错误波形曲线,选择打开,就可以了
plotly 坐标轴范围截断rangebreaks使用的一个注意点
plotly坐标轴截断混合设置且指定设置截断时间的时候需要注意先后顺序大范围的时间要在小范围的时间前设置,比如日内时间的截断要设置在日期截断的后面同范围的规则截断要在指定截断前设置,对日期的截断, ...
微信小程序客服、支付、定位、下拉加载功能
一.客服功能 1.只要你微信小程序,后台添加了客服,引用以下button,就可以进入聊天(在小程序官网如何添加客服用户,请自行百度,谢谢) 2.通过按钮方式 <button open-type= ...
2022-01-31：迷宫 III。由空地和墙组成的迷宫中有一个球。球可以向上（u）下（d）左（l）右（r）四个方向滚动，但在遇到墙壁前不会停止滚动。当球停下时，可以选择下一个方向。迷宫中还有一个洞
2022-01-31:迷宫 III. 由空地和墙组成的迷宫中有一个球.球可以向上(u)下(d)左(l)右(r)四个方向滚动,但在遇到墙壁前不会停止滚动.当球停下时,可以选择下一个方向.迷宫中还有一个洞 ...
Tensorflow 2下载网址
Tensorflow2: 官网:https://tensorflow.google.cn/ 一个核心开源库,可以帮助您开发和训练机器学习模型.您可以通过直接在浏览器中运行 Colab 笔记本来快速上手 ...

ASP.NET MVC4 学习笔记-3

ASP.NET MVC4 学习笔记-3的更多相关文章

随机推荐

热门专题