MVC3 入门

Shashank Bisen

4.82/5 (31投票s)

2012年3月12日

CPOL

10分钟阅读

44655

599

本文将指导您创建第一个 MVC3 应用程序

下载源代码 - 2.4 MB

引言

本文旨在帮助您开始使用 ASP.NET MVC 框架。我将一步一步地解释，让您在构建第一个 ASP.NET MVC 应用程序时感到舒适。我可能省略了一些细节，但如果您是该框架的新手，您仍然会发现许多有趣的东西。

背景

如果您想了解 ASP.NET MVC 3 的基础知识，请阅读这篇文章这里，我觉得它非常好。

创建新的 ASP.NET MVC3 项目

从“文件”菜单中选择“新建项目”，然后选择“Web”模板，现在您可以看到一个名为“ASP.NET MVC 3 Web 应用程序”的项，选择它（否则您需要安装它）。

为您的项目命名，我建议命名为“KickOffWithMVC3”，然后按“确定”按钮。现在您将看到另一个对话框，提示您选择各种 MVC 项目模板（空、Internet 应用程序和 Intranet 应用程序）。

如果我们选择“空”选项，它将创建一个具有 MVC 应用程序所需的最少文件和文件夹结构的项；如果我们选择“Internet 应用程序”选项，它将创建一个包含注册、身份验证和导航等功能的小型示例应用程序。最后，“Intranet 应用程序”选项与“Internet 应用程序”非常相似，考虑到了身份验证用户使用域/Active Directory 基础结构。

由于这是一篇入门文章，我们将尝试从头开始构建，因此我们选择“空”选项。对于“视图引擎”下拉列表，选择“Razor”，因为它是一个新的改进的视图引擎。取消选中“使用 HTML5 语义标记”选项，然后单击“确定”以创建新项目。

完成此操作后，Visual Studio 将创建一个项目。运行应用程序，您会发现一个 404 错误。停止应用程序，错误表明我们需要做更多工作才能运行此应用程序。

处理控制器

控制器是 MVC 体系结构的核心，负责处理所有传入的请求。它们可能看起来像任何其他继承自“System.Web.Mvc.Controller”的 C# 类，但它的每个公共方法（也称为操作方法）都旨在通过某个 URL 调用 Web 请求来执行特定操作。根据约定，控制器最佳存放位置在 controllers 文件夹中，因此我们将遵循相同的约定。

要添加新控制器，请在“解决方案资源管理器”窗口中右键单击“Controllers”文件夹，然后选择“Add”，然后选择“Controller”。

根据控制器的名称应以 Controller 结尾的约定，将其命名为“HomeController”。

现在单击“Add”按钮。将在“Controller”文件夹下创建一个名为 HomeController.cs 的新 C# 文件。我们可以清楚地看到这个类叫做“HomeController”，它派生自“System.Web.Mvc.Controller”。

您可能已经看到了一个名为“Index”的操作方法，我们将修改此方法以返回“Hello World”。

using System.Web.Mvc;
namespace KickOffWithMVC3.Controllers
{
	public class HomeController : Controller
	{
		public string Index()
		{
			return "Hello World";
		}
	}
}

重新运行项目，您将在浏览器中看到 Hello World。

路由

现在是时候理解它是如何工作的了。为了做到这一点，我们需要了解路由系统，它决定一个特定的 URL 将映射到其对应的控制器和操作。

默认情况下，当创建应用程序时，Visual Studio 会决定一个路由方案，即“/Home/Index”。这意味着如果您不提供任何特定的控制器和操作，将自动调用 Home 控制器的 Index 操作。这在应用程序的 “Global.asax.cs” 文件中的 “RegisterRoutes” 方法中定义。本文不深入探讨更改默认路由，但总而言之，我们必须理解，如果我们请求以下任何 URL，都将调用 Home 控制器的 Index 操作。

•    /
•    /Home
•    /Home/Index

创建和呈现视图

正如我们到目前为止所看到的，我们最后一个示例的输出仅仅是一个字符串，但是如果我们想让输出是 HTML 呢？

为了获得 HTML 形式的结果，我们需要遵循以下步骤：

• 修改 Index 操作

public ActionResult Index()
{
	return View();
}

如果您此时运行应用程序，您将看到以下错误页面：

错误方法本身就说明了一切，它试图在提到的位置查找视图，但由于在任何这些位置都找不到 Index 视图。所以下一步显而易见，我们需要创建一个。

要创建视图，请右键单击 Index 方法并选择“Add View”。执行此操作后，您将看到一个“Add View”对话框。取消选中所有选项，并确保视图名称是“Index”。

单击 Add 按钮，我们将在 “Views/Home” 文件夹中看到一个名为 “Index.cshtml” 的新文件，这是 Visual Studio 在错误消息中看到的预期 Index 视图的几个位置之一。
现在，如果我们打开 “Index.cshtml” 文件，我们可以看到以下几行后面跟着一些 HTML 语法，目前，只需了解这些行仅仅意味着没有引用布局/母版页。
@{
	Layout = null;
} 
将页面内容更改为如下所示：
@{
	Layout = null;
}
<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
</head>
<body>
	<div style="color:red; font-style:italic">
		Hello world
	</div>
</body>
</html> 
现在运行您的应用程序，您将在浏览器中看到以下输出。

这标志着您的第一个完整 MVC3 应用程序的结束。如果您觉得有趣并且热衷于学习更多，那么您可以继续阅读，否则您就完成了。

动态内容乐趣

在当今世界，Web 应用程序旨在显示动态内容。在 MVC 框架中，控制器负责准备一些数据，视图负责将其呈现为输出。数据总是从控制器传递到视图。

最简单的方法之一是使用“ViewBag”对象，它是 Controller 基类的一个成员。它是一个动态对象，我们可以为其分配任意数量的任意属性，这些属性可以传递到 View 中以某种方式进行渲染。

按如下方式更新 Index 方法：

public ActionResult Index()
{
	ViewBag.DayOfWeek  =  System.DateTime.Now.DayOfWeek;
	return View();
}

在这里，我们创建了一个名为“DayOfWeek”的 ViewBag 属性并为其赋值（我们可以为该属性赋予任何名称）。

之后，让我们更新 “Index.cshtml” 文件以使用此属性并打印“欢迎来到动态内容世界，今天是”后跟星期几。

<body>
	<div style="color:red; font-style:italic">
		Welcome to the world of dynamic content, today is @ViewBag.DayOfWeek
	</div>
</body>

玩转控件

现在我们将把它变成一个应用程序，该应用程序接收您的姓名和年龄范围作为输入，并告诉您是否有资格投票。我知道这可能看起来很简单，但我觉得它足以实现我们的目标。（我们假设如果一个人年龄大于或等于 18 岁，他们就可以投票）

为了做到这一点，我们将提供一个链接，让用户点击该链接进入一个页面，在那里可以检查他们是否有资格投票。

因此，让我们将以下代码行添加到 “Index.cshtml” 文件中的 post div 标签中：

<p>@Html.ActionLink("Lets check your eligibility here", "Eligibility")</p>

上面的代码片段添加了一个指向“Lets check your eligibility here”页面的链接，点击它将调用 Eligibility 操作。当我们现在运行项目时，我们可以看到这个。

一旦我们点击链接，就会出现一个 404 错误，因为“Eligibilty”操作尚未定义。

我们可以通过在 HomeController.cs 中添加以下代码行来实现：

public ActionResult Eligibility()
{
	return View();
}

创建模型并添加验证

现在我们需要一个视图，但在执行此操作之前，让我们创建一个 Eligibility 的模型类。为此，

在 Solution Explorer 中右键单击 Models，然后从弹出菜单中选择 Add，然后选择 Class。

将文件名命名为 Eligibile.cs，然后单击 Add 按钮创建类并按如下方式编辑文件：

using System.ComponentModel.DataAnnotations;
namespace KickOffWithMVC3.Models
{
	public class Eligibile
	{
		[Required(ErrorMessage = "Please enter your name")]
		public string Name { get; set; }
		[Required(ErrorMessage = "Please specify your age range")]
		public bool IsEligibleAge { get; set; }
	}
}

这里我们看到两个属性 Name 和 IsEligibleAge，属性的名称足以解释它们的含义。这里新的是 Required 属性。Required 属性来自命名空间 “System.ComponentModel.DataAnnotations”，并且有助于对字段进行验证，因为它的任务是确保具有此属性的字段不能为空。在 “System.ComponentModel.DataAnnotations” 命名空间中有许多其他属性可用于提供验证。

构建强类型视图

现在是时候将我们的注意力转移到创建视图上了。上次我们创建了一个普通的视图，所以这次让我们尝试一个强类型视图。

右键单击“Eligibility”操作方法内部，然后选择 Add View 来创建视图。将弹出一个新对话框，选中“Create a strongly-typed view”选项，然后从下拉菜单中选择“Eligibile (KickOffWithMVC3.Models)”。取消选中所有其他选项。

现在我们准备好了我们的“Eligibility.cshtml”文件。在文件顶部，我们可以看到一行：

@model KickOffWithMVC3.Models.Eligibile

这表示该类的模型是 KickOffWithMVC3.Models.Eligibile 类型。

构建表单

现在我们通过创建一个输入姓名文本框和一个年龄范围选择下拉列表来继续。

编辑 “Index.cshtml” 文件以包含以下内容：

@model KickOffWithMVC3.Models.Eligibile
@{
	Layout = null;
}
<!DOCTYPE html>
<html>
<head>
	<title>Eligibility</title>
	<link rel="Stylesheet" href="@Href("~/Content/Site.css")" type="text/css"/>
</head>
<body>
	<div>
		@using (Html.BeginForm())
		{
			@Html.ValidationSummary()
			<p>Your Name : @Html.TextBox("Name")</p>
			<p>Your Age Range : 
				@Html.DropDownList("IsEligibleAge", new[] {
					new SelectListItem() {Text = "Below 18", Value = bool.FalseString},
					new SelectListItem() {Text = "18 and Above", Value = bool.TrueString}
				}, "Please select your age")
			</p>
			<input type="submit" value="Submit Data" />
		}
	</div>
</body>
</html>

让我们一步一步地进行：

代码

@using (Html.BeginForm())
{	
	...form contents go here...
}

用于创建一个等效于表单标签：

<form action="/Home/RsvpForm" method="post">
	...form contents go here...
</form>

代码

 @Html.ValidationSummary()

用于开发一个 div 以在发生任何情况时显示验证错误消息。为了样式化错误消息，我们使用了在创建空项目时已在 Content 文件夹中提供的 “Site.css”。

代码

@Html.TextBox("Name")

用于创建一个与 Eligibile Model 的 Name 属性绑定的 TextBox，等效于：

<input id="Name" name="Name" type="text" value="" />

最后但同样重要的是代码：

您的年龄范围：

@Html.DropDownList("IsEligibleAge", new [] {
	new SelectListItem() {Text = "Below 18", Value = bool.FalseString},
	new SelectListItem() {Text = "18 and Above", Value = bool.TrueString}
}, "Please select your age")

用于创建一个下拉列表，提供“18 岁以下”和“18 岁以上”的选项，等效于：

<select name="IsEligibleAge">
<option value="">Please select your age</option>
<option value="False">Below 18</option>
<option value="True">18 and Above</option>
</select>

处理表单

现在，当我们点击“Submit”按钮时，由于回发，它只会清除表单中输入的数据。

为了区分 get 和 post 请求，我们将创建两个不同的方法，如下所示：

[HttpGet]
public ActionResult Eligibility()
{
	return View();
}
[HttpPost]
public ActionResult Eligibility(Eligibile eligibile)
{
	if (ModelState.IsValid)
	{
		return View("ThankYou", eligibile);
	}
	else
	{
		return View();
	}
}

现有的 Eligibility 方法附加了 “HttpGet” 属性，这有助于 MVC 决定为 Get 请求调用哪个方法。而一个新的重载的 Eligibility 方法附加了 “HttpPost” 属性并接受 Eligible 参数。我们需要导入 “KickOffWithMVC3.Models” 命名空间。

代码 return View("ThankYou", eligibile) 可能看起来有所不同，但它只是告诉渲染一个名为“ThankYou”的视图，并在所有验证都通过的情况下将 eligibile 对象传递给它，否则它将返回相同的视图。为了创建这个 ThankYou 视图，请右键单击“Eligibility”操作方法内部，然后选择 Add View 来创建视图。将弹出一个新对话框，选中“Create a strongly-typed view”选项，然后从下拉菜单中选择“Eligibile (KickOffWithMVC3.Models)”。取消选中所有其他选项。将此视图命名为“ThankYou”。

将正文的内容更新为：

<body>
    <div>
        <h1>Thank you, @Model.Name</h1>
        @if (Model.IsEligibleAge == true)
        {
           @:Congrats you can cast your vote.
        } 
        else {
           @:Sorry to tell you that you still need to wait until you turn 18 to cast your vote.
        }
    </div>
</body>

如果选择的年龄大于 18 岁，您将获得输出“恭喜，您可以投票。”，否则“抱歉告知您，您仍然需要等到 18 岁才能投票。”

现在您一切就绪。太棒了，我们做到了。开始玩这个应用程序吧：)