《ASP.NET MVC 4 实战》----2.2 创建第一个MVC应用程序

简介: 现在,你的PC机上已经安装了ASP.NET MVC,可以创建第一个MVC应用程序了。我们首先使用默认模板简单地创建一个新项目,然后扩展它显示一些动态内容。在此之后,将漫游一个标准的项目布局,以使你明白构成一个MVC应用程序的各个组件。

本节书摘来自异步社区《ASP.NET MVC 4 实战》一书中的第2章,第2.2节,作者: 【美】Jeffrey Palermo , 【美】Jimmy Bogard , 【美】Eric Hexter , 【美】Matthew Hinze , 【英】Jeremy Skinner,译者: 徐燕萍 , 李萍 , 林逸 , 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 创建第一个MVC应用程序

ASP.NET MVC 4 实战
现在,你的PC机上已经安装了ASP.NET MVC,可以创建第一个MVC应用程序了。我们首先使用默认模板简单地创建一个新项目,然后扩展它显示一些动态内容。在此之后,将漫游一个标准的项目布局,以使你明白构成一个MVC应用程序的各个组件。

2.2.1 创建新项目

创建新的MVC项目是一个简单的过程—在Visual Studio 2010(或Visual Web Developer Express)中点击“文件”(File)菜单并选择“新项目”(New Project),将弹出“新项目”(New Project)对话框,如图2.3所示。

QQ_20170527171204

我们将使用C#语言来建立这个应用程序(当然,也可以使用VB.NET等其他语言)。在左侧面板选择“Visual C#”,然后选“Web”子节点。这里有几个模板可以用来创建Web应用程序。但对于这个示例,要选择“ASP.NET MVC 4 Web Application”(ASP.NET MVC 4 Web应用程序)。如果看不到这个可选项,请确保对话框顶部的目标框架设置为“.NET Framework 4”。

将该项目命名为Guestbook,并将其保存在默认的项目位置(通常是C:Users<你的用户名>DocumentsVisual Studio 2010Projects文件夹)。

点击“OK”按钮之后,Visual Studio将打开另一个对话框,向你提示更多信息,如图2.4所示。

QQ_20170527171221

项目模板、视图引擎,以及是否使用单元测试项目

在这里,你可以选择想使用的模板。“空模板”(Empty Template)提供了一个非常简单的空项目结构。“Internet应用程序”(Internet Application)模板有一些基本的布局和认证特性。“企业内部网应用程序”(IntranetApplication)模板类似于Internet应用程序,但它使用Windows认证,而不是ASP.NET的表单认证。为简单起见,请选择“Internet应用程序”模板。

你也可以选择想使用的视图引擎(View Engine)。对于此例,使用默认选项Razor,这是MVC 3引入的新引擎。另一个选项是使用旧式的Web Form视图引擎,这是MVC 1、2的默认选项。在第3章和第17章中,我们将会更详细地考察视图引擎。

最后,你可以选择是否要创建单元测试项目。对于大多数非寻常的应用程序(不是太简单的项目—译者注),编写单元测试是一种好的思想,这可以确保软件的行为正确。选中这一复选框,以创建测试项目—尽管在第4章之前我们暂时不会详细考察它。点击“OK”按钮创建该项目。

此刻,可以启动该应用程序。通过按Ctrl +F5组合键,或者,点击Visual Studio工具栏上的“调试”(Debug)按钮,然后选“开始执行(不调试)”(Start Without Debugging)便可以运行。这会启动ASP.NET的“开发服务器”(Development Server)(这是Visual Studio内置的一个简单的Web服务器,为Web应用程序提供了开发期间的运行环境 —译者注),并会在默认的Web浏览器中打开此应用程序,如图2.5所示。

QQ_20170527171237

在深入考察为Guestbook增加功能之前,先简要考察一下这种默认项目模板的各个部分。

2.2.2 漫游默认项目模板(的结构)

打开这个新建的项目,会看到该默认项目模板有几个含有各种文件的子目录。在Visual Studio的“解决方案资源管理器”(Solution Explorer)中可以看到它们,如图2.6所示。

QQ_20170527171253

Controllers、Models、Views,以及Scripts等。

该默认项目模板中的每一个文件和目录都服务于特定的目的,逐一考察如下:

1.App_Data目录
App_Data目录可以用来存放数据库、XML文件,或应用程序所需的其他数据。ASP.NET运行时能理解这种特殊目录,并会阻止用户直接访问其中的文件。只有应用程序才可以读写该目录。

2.Conetnt目录
Content目录的目的是包含需要随应用程序一起部署的各种非编码资源。这些资源包括图像和CSS(样式表)文件等。默认情况下,Content目录含有项目所使用的默认样式表(Site.CSS),以及themes子目录,其中含有jQuery UI所使用的图像和CSS(jQuery UI是用于用户界面元素的一个客户端框架,我们将在第7章进行考察)。

3.Controllers目录
回顾第1章,你可能还记得,控制器是负责处理输入并决定应该执行哪一个动作(如渲染一个视图)的协调程序。在ASP.NET MVC中,控制器是用Controllers目录中的类来表示的。默认情况下,该目录含有两个控制器—HomeController(处理访问主页的请求)和AccountController(处理身份认证)。我们将在2.2.3小节考察控制器。

4.Models目录
Models目录典型地用于容纳表示应用程序核心概念的各种类,或者将数据约束成某种格式的类,这些类专用于特定的视图,故称为视图模型(View Model)。随着应用程序变大,你可能会决定将这些类移到一个单独的项目之中,但对于小型项目而言,把它们存放在Models目录中是一种良好的开端。默认项目在这个目录中包含了一个文件—AccountModels.cs。它包含了几个与认证有关的类,这些类是由默认项目模板来使用的。

5.Scripts目录
Scripts目录是存放由应用程序所使用的各种JavaScript文件的地方。默认项目模板在这个目录中包含了相当多的文件,包括流行的开源jQuery库(将在第7章介绍)和用于执行客户端验证的脚本。

6.Views目录
Views目录含有用于渲染用户界面的模板。其中每一个模板都被表示成一个Razor视图(.cshtml或.vbhtml文件),并被放在以负责渲染该视图的控制器为名称的子目录中。如果这听起来有点困惑,不必担心,我们将在2.2.3小节探讨控制器、动作以及视图之间的关系。

7.Global.asax
Global.asax文件位于项目结构的根目录中,并包含了应用程序第一次启动时需要运行的初始化代码,如注册路由的代码(将在下一小节做简要考察)。

8.Web.config
Web.config文件也位于项目结构的根目录中,并含有ASP.NET MVC正确运行所必须的配置细节。

现在,你已经看到了默认的项目模板中不同文件的高级概述,接下来将详细考察控制器、动作以及视图等核心概念之间的交互。我们将使用默认的HomeController来描述这种交互,到2.3.3小节时,我们将创建一些自己的控制器。

2.2.3 控制器、动作,以及显示动态内容

在第1章中曾解释过,控制器的作用相当于一个协调程序。它可以接受输入(通过各种资源,如表单数据或URL中的信息),但它将页面的渲染委托给了视图。

1.控制器类和动作方法
在ASP.NET MVC中,控制器被表示成继承于Controller基类的类,类中的个别方法(称为动作(Action))对应于某个URL(动作是用来响应并处理某个URL请求的—译者注)。为了描述这是如何工作的,我们来看看项目的HomeController,可以在Controllers目录中找到它。这个类的代码如清单2.1所示。

清单2.1 默认的HomeController

QQ_20170527171318

HomeController是一个十分直观的控制器类的实现。为了表明这是一个控制器,它需要继承于Controller基类,并且其名称也要有“Controller”后缀。

这个类还包含了两个动作方法。动作是控制器类上的public方法,它对特定URL的请求进行处理。在此例中,这两个动作被命名为Index和About。因为这些动作在HomeController之中,所以它们可以分别通过/Home/Index和/Home/About这样的URL进行访问。因此,如果你的应用程序托管在MySite.com域中,那么,Home动作的完整URL将是http://MySite.com/home/index 。如果用户在浏览器中输入这个URL,框架将会实例化HomeController类,并调用Index动作方法。

2.路由—将URL映射到动作
此刻你可能会问:框架是如何知道将URL映射到一个特定的控制器动作的?答案就在Global.asax文件的RegisterRoutes方法中。该方法定义了将一个URL模式映射到控制器或动作的路由,其实现如清单2.2所示。

清单2.2 注册路由

QQ_20170527171349

“DefaultApi”部分是用于Web API的,这将在第24章介绍(Web API是微软随ASP.NET MVC 4一起发布的一个Web服务框架—译者注)。注意,这里定义了两个条目(除“DefaultApi”以外的另外两条路由—译者注)。第一个是IgnoreRoute(忽略路由),它主要是告诉框架不用担心指定路径的任何匹配事宜。上述示例是说,不必处理含有.axd文件扩展名(如Teace.asd)的任何路径。第二个条目是MapRoute(映射路由),定义了如何处理URL。这条默认路由将能满足一段时间,但后面为了提供专用于应用程序的URL,你会希望添加更多路由。

每条路由都具有名称、URL定义,以及可选的默认值。我们的第一个请求“/”并没有任何这些URL片段,因此就指望这些默认值了:

QQ_20170527171405

由于这些默认值,你可以在URL中忽略一些片段而获得同样的行为。而且,如果你的域名是MySite.com,则http://MySite.com/Home/Indexhttp://MySite.com/Home, 以及 http://MySite.com 最终都将调用 HomeController的Index动作。

关于路由的说明

带有{controller}/{action}/{id}模板的路由是一条通用路由,能够用它对许多不同的Web请求进行服务。通过使用花括号({})来表示一些记号,而封装在括号中的单词则对应于MVC框架能够理解的值(这里的描述不够明确。{controller}/{action}/{id}称为该路由的URL模式,在这个模式中用花括号指定了controller、action、id三个路由变量,框架将其理解为控制器、动作以及传递给动作的参数(id)。如果一个请求的URL与这个模式相匹配,则路由系统会根据URL为这三个变量提取相应的值,以确定该请求要调用的控制器和动作,以及传递给动作的参数—译者注)。

我们感兴趣的最常用的值是controller和action。controller路由值是框架要传递给控制器工厂(Controller Factory)的一个特殊的值,目的是实例化一个控制器。这也是本章其余部分将要使用的路由,因此,在接下来的小节中,我们将使用“http://mvccontrib.org/< 控制器名>/<动作名>”形式的URL(mvccontrib.org是作者所使用的域名;对读者而言,域名也要根据自己的情况而定—译者注)。

我们将在第9章更深入地探讨路由。
再回头看清单2.1中的HomeController,其Index动作含有两行代码:

ViewBag.Message = "Modifythistemplatetojump-startyourASP.NET MVCapplication.";
return View();

第一行将一些任意文本赋给了ViewBag,而第二行则是指示框架应该去渲染一个视图。

ViewBag本质上是一个字典—它提供了一种存储数据的方式,这些数据随后能够在视图中进行访问。它使用了.NET 4的动态语言特性,以便能够动态地创建属性。例如,可以用一行代码将另一个属性赋给ViewBag:

public ActionResult Index()
{
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVCapplication.";
ViewBag.CurrentDate = DateTime.Now;
return View();
}

该语句简单地将当前日期和时间赋给了ViewBag上的一个名称为CurrentDate的属性。该属性是动态创建的,而且,为了添加这一属性,不需要修改类定义(指不需要修改ViewBag类—译者注)。现在,我们可以在视图中访问该属性,该视图是通过调用return View()来渲染的。

View方法(返回的是ViewResult实例)指示框架应该去渲染一个视图。在此例中,我们未指定视图名,因此框架会推断它应该尝试渲染一个与动作同名的视图—Index—框架将试图在项目的Views目录以及以控制器命名的子目录(此例为Home)中查找该视图。

3.视图
如果回头看图2.5中的项目结构,会发现在Views/Home子目录中,确实有一个名为Index.cshtml的文件。打开这个文件会看到Index.cshtml中的以下部分标记:

QQ_20170527171541

这个Index视图是C#代码和HTML标记的混合体。文件的顶部包含一个设置页面标题的代码块,然后在<h2/>元素中显示了一条消息。对@ViewBag.Message的调用写出了在控制器中对ViewBag的Message属性所设置的内容。

你可以修改此视图,让其也显示添加到ViewBag的CurrentDate属性的值。只需要对Index.cshtml文件添加以下代码:

``

The current date is
@ViewBag.CurrentDate.ToLongDateString()

``
注意,@前缀表示HTML与代码之间的转换。最终结果如图2.7所示。

图2.7 含有当前日期的自定义ViewBag条目的内容被显示在页面上

以上默认的HomeController描述了MVC应用程序中控制器和视图的基本使用,但在屏幕上显示一条简单的消息并无多大意义。在下一节中,我们将对应用程序添加一些交互性,让用户能够对留言簿添加条目。

本文仅用于学习和交流目的,不代表异步社区观点。非商业转载请注明作译者、出处,并保留本文的原始链接。

相关文章
|
3月前
|
前端开发 Java 开发者
Spring MVC:构建高效、可维护、可扩展的Web应用程序
Spring MVC:构建高效、可维护、可扩展的Web应用程序
26 0
|
4月前
|
算法 Java 调度
|
4月前
|
前端开发 安全 Java
SpringMVC基础篇:第一个MVC程序和细节分析
SpringMVC基础篇:第一个MVC程序和细节分析
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
38 0
|
1天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
29天前
|
存储 设计模式 前端开发
请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
【2月更文挑战第26天】【2月更文挑战第89篇】请解释 Web 应用程序的 MVC(模型-视图-控制器)架构。
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
95 5
|
4月前
|
前端开发 JavaScript Java
Spring Boot中Spring MVC的基本配置讲解与实战(包括静态资源配置,拦截器配置,文件上传配置及实战 附源码)
Spring Boot中Spring MVC的基本配置讲解与实战(包括静态资源配置,拦截器配置,文件上传配置及实战 附源码)
48 1
|
4月前
|
存储 前端开发 Java
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战(附源码 超详细必看)
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战(附源码 超详细必看)
33 0
|
4月前
|
设计模式 前端开发 Java
Spring Boot之Spring MVC的工作原理 以及使用eclipse开发Spring MVC的Web应用实战(附源码)
Spring Boot之Spring MVC的工作原理 以及使用eclipse开发Spring MVC的Web应用实战(附源码)
45 0

相关实验场景

更多