MVC实例入门经典推荐.docx

1、MVC实例入门经典推荐MVC实例入门初次学习A MVC，因此简单的记录一下自己的学习过程和经历，以便后面学习参考，同时也为后来者做出自己的一点点贡献。第一步：创建一个新的MVC4项目。打开VS2012，在“文件”菜单下选择“新建”下拉菜单下的“项目”，在弹出的“新建项目”对话框中选择Web选项卡，选择ASP.NET MVC 4 Web 应用程序，在名称里输入：MyFirstMvcApplication，点击确定，即完成项目的新建。在稍后弹出的“选择模板”中选择【基本】，然后点击确定，即完成一个MVC项目的创建。如下图所示：默认情况下的项目结构如图所示：创建完成后，我们可以发现，新建项目的同时创

2、建了一个与之同名的解决方案。MVC默认情况下，在新建项目的同时创建一个解决方案。开发者可以在解决方案中任意添加项目。新建完成时，我们可以看到Controllers文件夹、Models文件夹下都是空的，什么也没有；Views文件夹下默认有个Shared文件夹。MVC文件夹介绍可以参看ASP.NET MVC 经典入门教程(推荐阅读)。备注：所有 MVC 应用程序中的文件夹名称都是相等的。MVC 框架基于默认的命名。控制器位于 Controllers 文件夹，视图位于 Views 文件夹，模型位于 Models 文件夹。您不必在应用程序代码中使用文件夹名称。标准化的命名减少了代码量，同时有利于开发者

3、对 MVC 项目的理解。下面是对每个文件夹内容的简要描述：1.App_Data 文件夹App_Data 文件夹用于存储应用程序数据。我们将在本教程稍后的章节向 App_Data 文件夹添加 SQL 数据库。2.Content 文件夹Content 文件夹用于静态文件，比如样式表（CSS 文件）、图表和图像。Visual Web Developer 会自动向 Content 文件夹添加一个themes文件夹。这个 themes 文件夹存放 jQuery 样式和图片。在这个项目中，您可以删除这个主题文件夹。Visual Web Developer 同时向项目添加标准的样式表文件：Content 文

4、件夹中的文件Site.css。这个样式表文件是您希望改变应用程序样式时需要编辑的文件。我们将在本教程的下一章中编辑这个样式表文件 (Site.css)。3.Controllers 文件夹Controllers 文件夹包含负责处理用户输入和响应的控制器类。MVC 要求所有控制器文件的名称以 Controller 结尾。Visual Web Developer 已创建好一个 Home 控制器（用于首页和关于页面）以及一个 Account 控制器（用于登录页面）：我们将在本教程稍后的章节创建更多控制器。4.Models 文件夹Models 文件夹包含表示应用程序模型的类。模型存有并操作应用程序的数据

5、。我们将在本教程稍后的章节创建模型（类）。5.Views 文件夹Views 文件夹存有与应用程序的显示相关的 HTML 文件（用户界面）。Views 文件夹中含有每个控制器对于的一个文件夹。Visual Web Developer 已创建了一个 Account 文件夹、一个 Home 文件夹、一个 Shared 文件夹（在 Views 文件夹内）。Account 文件夹包含用于注册并登录用户帐户的页面。Home 文件夹用于存储诸如首页和关于页之类的应用程序页面。Shared 文件夹用于存储控制器间分享的视图（模板页和布局页）。6.Scripts 文件夹Scripts 文件夹存储应用程序的 Ja

6、vaScript 文件。默认地，Visual Web Developer 在这个文件夹中放置标准的 MVC、Ajax 以及 jQuery 文件：注释：文件 modernizr 是用于在应用程序中支持 HTML5 和 CSS3 的 JavaScript 文件。第二步：在Models文件夹下添加类。操作如图所示：Model文件夹下有一个c# Person.cs文件，在其中添加代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;/这里的namespace名与所创建的项目程序名相同n

7、amespace MvcApplication1.Models /创建一个Person类 public class Person private string addr;/声明一个字符串类型的addr字段 public string Name/声明一个Name属性 get; set; public string Address;/声明一个Address属性 get return this.addr; set this.addr = value; 第三步：在Controllers文件夹下添加Controller。Controllers文件夹下有一个c#TestControllers.cs文件，在

8、其中添加代码如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MyFirstMvcApplication.Controllers public class TestController : Controller /*注意：默认情况下，控制器里只创建一个Index的Action，这样控制器在返回要浏览的视图时会默认去寻找Index视图。如果开发者没有创建Index视图则会报错。本例中可以将Index改为FirstVie

9、w来实现。每个View在控制器中都对应一个action。因此FirstView视图就要在Controller里有相应的Action。如代码所示。*/ public ActionResult FirstView() ViewDataABC = Test; return View(); 代码说明：1. Controllers 文件夹包含负责处理用户输入和响应的控制器类。MVC 要求所有控制器的名称必须以 Controller 结尾。一般Visual Web Developer中已创建好一个 Home 控制器（用于首页和关于页面）以及一个 Account 控制器（用于登录页面）。开发人员在进行MVC

10、设计时，只需要在MVC中Controllers文件夹下添加相应的控制器即可。本例中直接在MVC中添加一个名为Test的控制器，然后再在控制器文件TestController.cs中添加ViewDataABC = Test;而return View();这句代码就是控制器返回要浏览的视图（也就是我们最后运行看到的页面文件）默认状态下（即View()不带参数时）显示的是与你的控制器名字一样的view。当然你也可以自己指定，例如return View(index)就是显示与控制器index名字一样的view。第四步：在Views文件夹下添加View。1.首先在Views文件夹下面新建一个文件夹2.命

11、名新建文件夹注意：新建文件夹的命名一定要与你的Controller命名一样，即二者要同名。如：本例中Controller名字为Test，因此这里新建文件夹命名为Test。3.在新建文件夹中添加View命名为FirstView（注：此处View的命名可任意）4.在FirstView.cshtml文件中添加代码如下： ViewBag.Title = FirstView;/视图框标题ViewDataABCFirstView代码说明：代表在html中嵌入了C#代码，FirstView.cshtml中的cs就是csharp的简称，因此后缀名为.cshtml的文件就表示嵌入了C#代码的html文件。备注：

12、 Views 文件夹Views文件夹存储的是与应用程序显示（用户界面）相关的文件（HTML 文件）。根据语言的不同，这些文件的扩展名可能是 html、asp、aspx、cshtml 以及 vbhtml。Views 文件夹包含与每个控制器相对应的一个同名文件夹。在该同名文件夹下存放着一个与控制器中action同名的View视图文件xx.cshtml.注意：这里的cs表示C Sharp。因此后缀名为.cshtml的文件表示嵌入了C Sharp代码的html文件。嵌入的代码前面要使用符号来进行表示。Visual Web Developer 默认状态下已创建了一个 Account 文件夹、一个 Hom

13、e 文件夹、一个 Shared 文件夹（在 Views 文件夹内）。Account 文件夹包含用于注册并登录用户帐户的页面。Home 文件夹用于存储诸如首页和关于页之类的应用程序页面。Shared 文件夹用于存储控制器间分享的视图（模板页和布局页）。因此开发者在创建控制器时，要注意避开这些已被默认使用的命名，以免产生冲突。链接：1.在MVC中，Controllers是C#类，通常继承了System.Web.Mvc.Controller类，每一个公有的方法我们称为Action Method,这些Action方法通过ASP.NET Routing System(路由系统)跟可配置的URL相关联。为

14、了实现一些Domain Model里面的操作，Controllers里面的语句会被执行，之后选择一个View呈现到客户端。下面的图很好的展现了这样一个过程:从上面的图我们也能清楚的看到，View是不依赖Controller的，也不知道Controller的存在，更加不会发生直接的联系。ASP.NET MVC3提供了一种新的View Engine-Razor，当然以前的aspx视图引擎仍然可以直接用的，在MVC里面，我们可以选择任意的方式去实现Domain Model,而不会有任何的限制。这里也有传统的三层架构的图解过程，如下所示:对比一下，我们也能体会MVC架构的一些优点吧。传统的三层架构也是

15、一个很大的跨越。现在被广泛的应用在了各种业务系统里面，它对应UI的如何实现没有任何限制，不管你是Winform还是Webfrom，或是其他的，都可以应用。在没有太复杂的情况下提供了对关注点的分解。当我们仔细看时，给DAL创建单元测试相对容易些。并且三层架构跟MVC看起来有非常相似的地方，但是MVC跟三层却是完全不同的东西，不要把两者混淆了。按照老赵在MSDN里面的说法(我看过几个相关的MSDN的MVC教程)，MVC是一种呈现模式，而三层是一种架构模式。对应三层：当我们的UI层耦合了按钮事件以后，会使得自动化的单元测试几乎不可能实现。5.MVC也有很多的变体，例如：Model-View-Pres

16、enter Pattern(MVP模式)，Model-View-View Model Pattern(MVVM模式)第五步：调试运行项目文件上右键选择【调试】【启动新实例】，如下图所示：弹出如下框：注意：此时要在端口后面继续输入：/控制器名/视图名，这样才能看到你所想看到的视图。如本例：下面是本例中输入后的结果：说明：上面的MVC代码中，实际上Models中的代码没有起任何作用，它没有与Controllers发生任何传值。范例代码详解例1：上面的代码仅仅展示了Controller与View的传值。可简化如下：TestController.cs文件：using System;using Syst

17、em.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MyFirstMvcApplication.Controllers public class TestController : Controller public ActionResult FirstView() ViewDataABC = Test;/*ViewData用于Dictionary中对数据的查找并建立key-value对，其格式为：ViewDatakey=value。本例中key为ABC字符串,value

18、为常量字符串”Test”，需要注意的是这里的key值可以任意设定，因为当key存在时，新创建的value将对先前的value进行更新替换，而如果这个key不存在，系统会在该key和value之间创建一个key-value对。这样系统在进行字典数据查找时，通过这个key值即可找到这个value。*/ return View(); FirstView.cshtml文件： ViewBag.Title = FirstView;/视图框标题/*在前面的TestController中系统已经在”ABC”和”Test”之间创建了一个key-value对。这样系统在进行字典数据查找时，通过这个key值即可找到

19、这个value。.cshtml文件中的C#代码在服务器端被解析，然后返还给浏览器客户端进行显示。本例中ViewDataABC在服务器端解析后即被替换为字符串“Test”，用户可以在调试运行后，在网页中通过右键选择查看源码来佐证这一点。代表在html中嵌入了C#代码，FirstView.cshtml中的cs就是csharp的简称，因此后缀名为.cshtml的文件就表示嵌入了C#代码的html文件。*/ViewDataABCFirstView实例2HomeController.cs文件using System;using System.Collections.Generic;using Syste

20、m.Linq;using System.Web;using System.Web.Mvc;using Com.IncTech.Website.Models;namespace Com.IncTech.Website.Controllers public class HomeController : Controller / / GET: /Home/ /*Controller在Action里面实现对Model中数据的操作，同时实现对View的返回*/ public ActionResult Index() /定义一个Person的类对象并对该对象进行初始化 Person p = new Per

21、son()Name = Tom, Addr = Shanghai, Age = 25;/*ViewData用于Dictionary中对数据的查找并建立key-value对，其格式为：ViewDatakey=value。本例中key为PersonInfo字符串,value为Person类对象p.需要注意的是这里的key值可以任意设定，因为当key存在时，新创建的value将对先前的value进行更新替换，而如果这个key不存在，系统会在该key和value之间创建一个key-value对。这样系统在进行字典数据查找时，通过这个key值即可找到这个value。*/ ViewDataPersonIn

22、fo = p; return View(); Person.cs文件：using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Com.IncTech.Website.Models public class Person /字段 private string addr; /*定义两个共有属性Name和Age，并通过get和set来实现传值。C#中属性只能进行set和get操作，由这两个操作实现传值，它是系统封装好的两个接口操作，开发时直接操作使用即可，无需知晓其中实现细节

23、。*/ public string Name get; set; public int Age get; set; /*定义一个共有属性Addr，并在属性中对get和set操作进行重载*/ public string Addr get return this.addr; set this.addr = value; /*这里的this指针指向一个Person类对象。当构造函数在进行传值时，它将指向其传参。而这里的value是一个关键字，当构造函数在进行传值时，它将指代其传参*/ Index.cshtml文件：using Com.IncTech.Website.Models;var p = Vi

24、ewDataPersonInfo as Person;/*as Person相当于强制类型转换，即通过ViewData查找其中Key值为“PersonInfo”的Value值，并将其强制转换为一个Person类对象，然后将其赋值给可变参数变量p。在前面的HomeController中已经通过ViewData在“PersonInfo”和Person类对象p之间建立了一个key-value对。var是一个关键字，表示可变参数，它可以是任意类型，在编译时由编译器来具体确定其类型。因此这里的p在编译后会被确定为一个Person类对象，并通过赋值操作，将前面HomeController中实例化的Pers

25、on类对象p赋值给这里的p。*/hello worldp.Namep.Addrp.Age说明：1.从上述代码中可以看出，在MVC中View组件可以通过嵌入C#代码来访问Model组件中的数据，如以下代码所示：using Com.IncTech.Website.Models; var p = ViewDataPersonInfo as Person;Controller组件则在其action中实现对Model中数据的操作，同时实现对View的返回。如以下代码所示：public ActionResult Index() Person p = new Person()Name = Tom, Addr = Shanghai, Age = 25; ViewDataPersonInfo = p; return View(); 只有Model组件是完全独立的。它通过类对数据进行封装和操作，从而实现业务逻辑。2. .cshtml文件中的C#代码在服务器端被解析，然后再返还给客户端进行显示。在.cshtml文件中进行修改后，无需对项目进行重新编译，只需将网页进行运行刷新即可。要注意的是，修改后一定要按Crtl+S进行保存，然后再在浏览器客户端网页按F5进行刷新，即可看到修改后的显示。因为前端语言不像编译类语言，需要编译后才能执行，它是解释执行的，在服务器端解析一次后随即发给浏览器客户端进行执行。