mvc案例.docx

1、mvc案例ASP.NET MVC3 快速入门-第一节 概述 1.1 本教程的学习内容 在本教程中，你将学会如下内容： 如何创建一个ASP.NET MVC的工程。 如何创建ASP.NET MVC的控制器（controller）与视图(view)。 如何使用Entity Framework code-first 范例来创建一个新的数据库。 如何获取和显示数据。 如何编辑数据并且进行数据的有效性验证。 1.2 创建工程 如果要创建一个ASP.NET MVC3的工程时，首先运行Visual Web Developer 2010 Express（本教程中简称“Visual Web Developer”）

2、,并且在起始页(start page)中选择“新建项目”。Visual Web Developer是一个集成开发环境，你可以使用它来进行各种应用程序的开发。在Visual Web Developer的菜单的下面有一个工具条，可以直接点击工具条中的各个工具按钮来进行各种操作，也可以直接点击菜单中的各个菜单项来进行各种操作，此处我们点击“文件”菜单中的“新建项目”菜单项。图1-1 Visual Web Developer 2010 Express中的起始页1.3 创建你的第一个应用程序 你可以使用Visual Basic 或Visual C#作为开发语言来创建应用程序。在本教程中，选择C#来作为开

3、发语言。点击“新建项目”菜单项后，在打开的“新建项目”对话框中，双击左边的“Visual C#”使其成为展开状态，然后点击“Web”，点击右边的“ASP.NET MVC 3 Web 应用程序”，然后在下方的名称文本框中填入应用程序的名称，在本教程中命名为“MvcMovie”,然后点击确定按钮。图1-2 在新建项目对话框中选择ASP.NET MVC3应用程序并为应用程序命名 在接下来打开的“新ASP.NET MVC 3 项目”对话框中，点击选中“Internet 应用程序”，在“视图引擎”下拉框中保持默认的“Razor”选项不作修改（Razor视图是ASP.NET MVC3种新增的一种十分重要的

4、视图类型，使用它可以使得Web应用程序的开发变得更加方便快捷，在后文中将对此进行详细介绍）。图1-3 选择项目模板与视图引擎 点击确定按钮，Visual Web Developer会为你所创建的ASP.NET MVC项目提供一个默认模板，这样的话你就拥有了一个可以立刻运行的应用程序。默认的模板中提供的是一个很简单的显示“欢迎使用 ASP.NET MVC!”文字的应用程序，你可以以此作为你的开发起点。图1-4 Visual Web Developer提供了一个默认的应用程序模板 点击“调试”菜单中的“启动调试”菜单项（该菜单项的快捷键为F5），Visual Web Developer将启动一个内

5、置的服务器，并且在该服务器中打开当前Web应用程序的主页，如图1-5所示。图1-5 ASP.NET MVC3的默认应用程序模板的调试画面 请注意该页面在浏览器中的地址为“http:/localhost:4423/”。其中“localhost”代表了本机上你刚刚创建的Web应用程序的临时网站地址，4423代表了Visual Web Developer使用的一个随机端口，每次调试的时候，Visual Web Developer都会使用这个端口来作为内置服务器的端口号。在各计算机上，该端口号都是不相同的，因为该端口号是Visual Web Developer随机选择的。 在这个模板应用程序的页面的右

6、上角，提供了两个按钮与一个“登录”链接，点击“登录”链接，页面跳转到登录页面，点击“主页”按钮，页面返回到主页，点击“关于”按钮，页面跳转到“关于”页面。 接下来，让我们开始逐步将这个默认的应用程序修改为我们所要的应用程序，在这个过程中逐步了解ASP.NET MVC 3的有关知识。首先，让我们关闭浏览器并开始代码的修改工作。ASP.NET MVC3 快速入门-第二节 添加一个控制器 分类： ASP.NET MVC 2011-04-10 16:24 2127人阅读 评论(7) 收藏 举报 MVC的全称为model-view-controller(模型-视图-控制器)。MVC是一种开发应用程序的模

7、式，这个模式已经具有了很好的框架架构，并且十分容易维护。使用MVC开发出来的应用程序一般包括以下几块内容： 控制器(Controller)：控制器类处理客户端向Web应用程序发出的请求，获取数据，并指定返回给客户端，用来显示处理结果的视图。 模型（Model）：模型类代表了应用程序的数据，这些数据通常具有一个数据验证逻辑，用来使得这些数据必须符合业务逻辑。 视图（View）:视图类是Web应用程序中用来生成并显示HTML格式的服务器端对客户端请求的响应结果的模板文件。 在本教程中，将全面介绍这些概念，并且向你展示如何利用它们来搭建一个应用程序。 首先，让我们来创建一个控制器(controlle

8、r)类。在解决方案资源管理器中，鼠标右击Controllers文件夹，并且点击添加-控制器，如图2-1所示。图2-1 添加控制器 在弹出的“添加控制器”对话框中,将控制器命名为“HelloWorldController”,然后点击添加按钮，如图2-2所示。图2-2 命名控制器 观察解决方案资源管理器中新增加了一个文件，名字为HelloWorldController.cs，并且该文件呈打开状态，如图2-3所示。 修改打开的HelloWorldController.cs文件，在HelloWorldController类中，创建如代码清单2-1中所示的两个方法，控制器将返回一个HTML格式的字符串。

9、 代码清单2-1 在控制器中创建方法public class HelloWorldController : Controller / / GET: /HelloWorld/ public string Index() return 这是我的默认action.; / / GET: /HelloWorld/Welcome/ public string WelCome() return 这是我的Welcome方法.; 在这个修改后的HelloWorldController控制器中，第一个方法名为Index。现在让我们从浏览器中调用该方法。运行应用程序（按F5键或Ctrl+F5键）,在打开的浏览器中的

10、地址栏后面，添加“HelloWorld”路径（譬如，在我的计算机上，浏览器中地址为http:/localhost:4423/HelloWorld），画面显示如图2-4所示。由于在Index方法中，直接返回了一个HTML格式的字符串，所以在浏览器中将该字符串显示出来。图2-4 HelloWorldController控制器中Index方法的运行结果在ASP.NET MVC中，可以根据浏览器中的输入地址来调用不同的控制器或控制七种不同的方法。ASP.NET MVC的默认的映射逻辑使用如下所示的格式来决定应该调用什么控制器或控制器中的什么方法。/Controller/ActionName/Param

11、eters URL地址的第一部分决定调用哪个控制器类，所以“/HelloWorld”映射到HelloWorldController控制器类。第二部分决定调用控制器中的哪个方法。所以“/HelloWorld/Index”将会调用HelloWorldController控制器类的Index方法。由于Index方法是控制器类的默认方法（可以另外指定控制器类的默认方法），所以也可只输入“/HelloWorld”来调用该方法。 在浏览器的地址栏中，输入“http:/localhost:xxxx/HelloWorld/Welcome”，将会调用HelloWorldController控制器类的Welcom

12、e方法，该方法返回“这是我的Welcome方法.”文字，所以浏览器中显示该文字，如图2-5所示。图2-5 HelloWorldController控制器中Welcome方法的运行结果 接下来，让我们修改Welcome方法，以便在URL地址栏中可以传递一些参数给该方法（例如：/HelloWorld/Welcome?name=Scott&numtimes=4)。修改后的代码如下所示。注意这里我们使用了C#的可选参数，当URL地址中没有使用numtimes参数时，该参数被默认设定为1。public string Welcome(string name,int numTimes=1) return H

13、ttpUtility.HtmlEncode(Hello + name + ,NumTimes is: + numTimes); 运行该应用程序，在浏览器中输入“http:/localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4”，运行结果显示如图2-6所示。浏览器自动将URL地址栏中的参数映射成Welcome方法中的传入参数。图2-6 在Welcome方法中使用参数 到现在为止，我们展示了MVC中的“VC”（视图与控制器）部分的工作机制，控制器返回HTML字符串。很显然大多数情况下你不想让控制器直接返回HTML字符串，因为那样的话编码起来

14、就太麻烦了。所以我们需要使用不同的视图模板文件来帮助生成HTML格式的页面文件，在下一节中让我们来看一下如何在ASP.NET MVC3中使用视图。ASP.NET MVC3 快速入门-第三节 添加一个视图 分类： ASP.NET MVC 2011-04-10 16:27 3740人阅读 评论(2) 收藏 举报 3.1 添加一个视图 在本节中我们修改HelloWorldController类，以便使用视图来向客户端展示HTML格式的响应结果。 我们使用ASP.NET MVC3中新增的Razor视图引擎来创建视图。Razor视图模板文件的后缀名为.cshtml,它提供了一种简洁的方式来创建HTML输

15、出流。Razor视图大大减少了在书写视图模板文件时所需要输入的字符，提供了一个最快捷，最简便的编码方式。 这里，我们在HelloWorldController类的Index方法中添加使用一个视图。在修改前的Index方法中返回一个字符串，我们修改这个方法来使它返回一个视图，代码如下所示。public ActionResult Index() return View(); 这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。接着，让我们来添加一个Index方法所使用的视图模板。在Index方法中点击鼠标右键，然后点击“添加视图”，将会弹出一个“添加视图”对话框。图3

16、-1 添加视图图3-2 添加视图对话框 在该对话框中，不做任何修改，直接点击添加按钮，观察解决方案资源管理器中，在MvcMovie项目下的Views文件夹下创建了一个HelloWorld文件夹，并且在该文件夹中创建了一个Index.cshtml文件，同时该文件呈打开状态，如图3-3所示。图3-3 视图模板文件被创建并呈打开状态 让我们在该文件中追加一些文字，代码如代码清单3-1所示。 代码清单3-1 Index.cshtml视图模板文件 ViewBag.Title = 首页;首页这是我的第一个视图模板 运行应用程序，输入地址“http:/localhost:xxxx/HelloWorld”。由

17、于在Index方法中并没有做任何事情，只是简单地一行代码“return View()”,该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。因为我们并没有显式指定使用哪个视图模板文件，所以使用了默认的Views文件夹下的HelloWorld文件夹下的Index.cshtml视图模板文件。该视图模板文件中只有简单的两行文字，在浏览器中的显示结果如图3-4所示。图3-4 在浏览器中显示视图 看上去还不错，但是请注意，该网页的标题为“首页”,但是网页中的大标题文字却为“我的MVC应用程序”，需要修改一下。3.2 修改视图，修改应用程序的页面布局 首先，让我们修改页面大标题中的“我的MVC应

18、用程序”文字。这段文字是所有页面中的公共大标题，在这个应用程序中，虽然所有页面中都显示了这个共同的大标题，但只有一处地方对其进行了设置。打开解决方案资源管理器中Views文件夹下的Shared文件夹下的_Layout.cshtml文件。该文件被称为布局页面，位于公有文件夹Shared下，被所有其他网页所共用。图3-5 公有布局页面 布局模板页允许你统一在一个地方指定整个Web应用程序或Web网站的所有HTML页面的布局方法。请注意文件底部的“RenderBody()”代码行。RenderBody()是一个占位符，代表了所有你创建出来的实际应用的视图页面，在这里统一指定。将布局模板文件中的“我的

19、 MVC 应用程序”修改为“我的 MVCMovie 应用程序”。代码如下所示。 我的 MVCMovie 应用程序 运行应用程序，注意网页中的大标题被修改为“我的 MVCMovie 应用程序”。点击“关于”链接，你可以看见“关于”页面中的大标题也被修改为“我的 MVCMovie 应用程序”。由此可以看出一旦修改了布局页面中的某处地方，该修改将会被应用到所有页面中。图3-6 在布局页面中修改了网页中显示的大标题 完整的_Layout.cshtml文件中的代码如代码清单3-2所示。 代码清单3-2 _Layout.cshtml文件中的完整代码 ViewBag.Title 我的 MVCMovie 应用

20、程序 Html.Partial(_LogOnPartial) Html.ActionLink(主页, Index, Home) Html.ActionLink(关于, About, Home) RenderBody() 现在，让我们修改Index视图页面的标题。 打开Views文件夹下的HelloWorld文件夹下的Index.cshtml文件。这里我们修改两处地方：首先，修改浏览器中的标题，然后修改标签中的小标题文字。修改后代码如代码清单3-3所示。 代码清单3-3 修改后的Index.cshtml视图模板文件 ViewBag.Title = 电影清单;我的电影清单这是我的第一个视图模板 V

21、iewBag对象的Title属性代表了显示该页面时的浏览器中的标题文字。让我们回头看一下布局模板文件，在该文件的区段中的标签中使用了这个值来作为浏览器中的网页标题。同时，通过这种方法，你可以很容易地在你的视图模板文件与布局模板文件之间进行参数的传递。 运行应用程序，在地址栏中输入“http:/localhost:xxxx/HelloWorld”，注意浏览器中的网页标题，页面中的小标题文字都变为修改后的标题文字（如果没有发生变化的话，则可能你的网页被缓存住了，可以按Ctrl+F5键来在重新刷新页面时取消缓存）。 同时也请注意_Layout.cshtml文件中的占位符中的内容被替换成了Index.

22、cshtml视图模板中的内容，所以浏览器中展示的是一个单一的HTML文件。浏览器中的运行结果如图3-7所示。图3-7 修改了标题后的Index视图模板文件 此处，我们的数据（“这是我的第一个视图模板”文字）是被直接书写在文件中的，也就是说我们使用到了MVC应用程序的“V”(视图View)与“C”(控制器Controller)。接下来，我们讲解一下如何创建一个数据库并从该数据库中获取模型数据。3.3 将控制器中的数据传递给视图 在我们使用数据库并介绍模型之前，首先我们介绍一下如何将控制器中的信息传递给视图。浏览器接收到一个URL请求后，将会调用控制器类来进行响应。你可以在控制器类中进行对接收到的

23、页面参数进行处理的代码，你可以在控制器类中书写从数据库中获取数据的代码，你也可以在控制器类中书写代码来决定返回给客户端什么格式的响应文件。控制器可以利用视图模板文件来生成HTML格式的响应文件并显示在浏览器中。 控制器类负责提供视图模板文件在生成HTML格式的响应文件时所需要的任何数据或对象。一个视图模板文件不应该执行任何业务逻辑，也不应该直接和数据库进行交互。它只能和控制器类进行交互，获取控制器类所提供给它的数据，这样可以使你的代码更加清晰，容易维护。 现在在我们的应用程序中，HelloWorldController控制器类中的Welcome方法带有两个参数name与numTimes,Wel

24、come方法直接向浏览器输出这两个参数的参数值。这里，我们修改该方法使其不再直接输出数据，而是使用一个视图模板。该视图模板将生成一个动态的响应流，这意味着我们需要将数据从控制器类传递给视图以便利用该数据来生成该响应流。我们在该控制器类中将视图模板所需要的数据送入一个ViewBag对象中，该对象可以被视图模板直接接收。 打开HelloWorldController.cs文件，修改Welcome方法，在该方法中为ViewBag对象添加一个Message属性与NumTimes属性，并且将属性值分别设定为经过处理后的name参数值与numTimes参数值。ViewBag对象是一个动态对象，你可以为它添

25、加任何属性并赋上属性值。在未赋值之前该属性是不生效的，直到你赋值为止。修改后的HelloWorldController.cs文件中的代码如代码清单3-4所示。 代码清单3-4 修改后的HelloWorldController.cs文件using System.Web;using System.Web.Mvc;namespace MvcMovie.Controllers public class HelloWorldController : Controller / / GET: /HelloWorld/ public ActionResult Index() return View(); /

26、/ GET: /HelloWorld/Welcome/ public ActionResult Welcome(string name, int numTimes = 1) ViewBag.Message = Hello + name; ViewBag.NumTimes = numTimes; return View(); 现在ViewBag对象中已经包含了数据，它将被自动传递给视图。 接下来，我们需要创建一个Welcome视图模板。在“调试”菜单中，点击“生成 MvcMovie”将应用程序进行编译，如图3-8所示。图3-8 编译应用程序 接下来，在Welcome方法中点击鼠标右键，然后点击“

27、添加视图”，弹出对话框如图3-9所示。图3-9 为Welcome方法添加视图 在该对话框中不做任何修改，直接点击添加按钮, View文件夹下的HelloWorld文件假种自动被创建了一个Welcome.cshtml文件，打开该文件，在元素下添加代码，让浏览器显示URL地址中传入的name参数中设定的文字，显示次数等于URL地址中传入的numTimes参数中设定的次数。修改后的Welcome.cshtml文件中的代码如代码清单3-5所示。 代码清单3-5 修改后的Welcome.cshtml文件 ViewBag.Title = Welcome;Welcomefor (int i = 0; i V

28、iewBag.NumTimes; i+) ViewBag.Message 运行应用程序，并且在地址栏中输入“http:/localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4”，该地址栏中的页面参数将会自动传递给控制器。控制器将会把这些参数值放入ViewBag对象中并且传递给视图。视图再在浏览器中显示这些数据。图3-10 视图中显示从控制器类中传递过来的数据 这里，我们使用了模型“M”的一种方式，但是不是数据库的方式。在下一节中，我们将创建一个数据库，并且介绍如何对该数据库中的数据进行处理。ASP.NET MVC3 快速入门-第四节 添加一个模型 分类： ASP.NET MVC 2011-04-10 16:33 3735人阅读 评论(4) 收藏 举报 在本节中我们将追加一些类来管理数据库中的电影。这些类将成为我们的MVC应用程序中的“模型”部分。 我们将使用一个.NET Framework的被称之为“Entity Framework”