ASP.NET MVC 介绍
这是一个初级的关于ASP.NET MVC的教程,你可以创建一个简单的可以读写数据库的WEP应用程序。
让我们来使用Visual Web Developer 2010 Express来创建第一个ASP.NET MVC Web Application。让我们来创建一个可以添加和显示影片列表的应用程序。
这个简短的教程说明了什么是MVC架构和用VS快速的搭建这个小示例,本文翻译网上一篇关于介绍MVC的文章,如果大家有兴趣的话可以浏览原版的内容。
http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part1 这是原版英文的网址 有什么不正确的地方大家发邮件给我,sales@ezong.com
也可以上我们的论坛http://bbs.51aspx.com
请大家积极发言讨论 共同提高!
你要完成的页面
这是将要建立页面的截图,一个简单的多列表格。
和一个可以添加影片的列表的表单,看截图
你可以学到的东西
这个教程让你学到如何用Visual Studio来建立一个ASP.NET MVC Web Application最基础的知识。你可以学到:
如何创建一个新的ASP.NET MVC项目
如何用SQL Server创建新的数据库
如何创建ASP.NET MVC的控制器和视图
如何检索和显示数据
如何编辑数据和检验数据的有效性
如何更新数据库模式
开始
运行Developer 2010 Express并建立一个新的项目
创建第一个应用程序
用Visual C#来创建程序。现在,从左边的窗口选择Visual C#,然后选择ASP.NET MVC 2 Web Application。项目命名为Movies后单击OK按钮。
如果找不到选项的话再 vs2010中 选择File-》new-》project..-》VisualC# Web然后就能找到图片中的选项
开发环境的右侧是Solution Explorer显示创建应用程序的所有文件夹及文件,左侧是编辑代码的窗口。所有的文件都有开发环境自动生成,我们不需要在动手做什么。
在工具条上点击“运行”按钮
这个绿色的箭头可以编译和在浏览器中启动你的WEB程序
提示:也可以点击键盘上的F5键来实现相同的功能或者点击菜单中的Debug->Start Debugging
Visual Web Developer会启动开发服务器并运行你的程序(这里不需要自己配置和手动操作),然后浏览器将会打开我们程序的主页。注意地址栏中的localhost,它不会像example.com这类地址。因为localhost指的是我们建立并运行我们程序的本地计算机。
模板提供了两个页面,一个访问页面和一个简单的登录页面。让我们来改变一下这个应用程序的运行,然后再其中学一点ASP.NET MVC的知识。好,关闭浏览器,让我们修改一些代码。
添加控制器
MVC代表Model, View, Controller。MVC是一种开发应用程序的模式,可以创建三个部分,每个部分都不同于其他的功能。
Model:应用程序的数据
Views:你的应用程序将使用模板来动态生成HTML相应
Controllers:处理来自URL请求给应用程序,检索数据,然后指定提供响应客户端请求的页面
在这个教程中我们包含了所有的关于MVC的概念和向你展示如何利用它们来建立一个应用程序
让我们来创建一个控制器,右击controllers folder在资源管理视图中然后选择Add Controller
给你的控制器起名为HelloWorldController然后单击Add按钮
注意资源管理视图,名为HelloWorldController.cs被建立,代码显示在编辑视图中。
在HelloWorldController.中创建如下两个方法,我们将直接从控制器返回一个HTML字符串做为示例。
控制器的名字为HelloWorldController,方法的名字为Index。再次运行你的应用程序,点击工具栏上的绿色三角。一旦程序运行成功,改变地址栏中的地址,像http://localhost:xx/HelloWorld xx为端口号,不同的机器可能不同(每次运行也可能不同),这个是电脑自动选择的。现在你的浏览器应该像截图一样。在上边的方法中,我们返回一个字符串到一个叫做Content的方法中。我们告诉系统就返回一些HTML,浏览器完成了操作并将内容展现给我们。
ASP.NET MVC会自动调用不同的控制器类(和在它里面的不同动作方法)根据传来的URL。默认ASP.NET MVC创建的映射逻辑使用了下面的格式来控制代码的运行。
/[Controller]/[ActionName]/[Parameters]
第一部分确定将要被执行的控制器类,所以/HelloWorld映射到HelloWorldController类。第二部分确定了类中被执行的动作方法(Action method),所以/HelloWorld/Index将会触发在HelloWorldcontroller类中Index()方法的执行。注意我们只要访问/HelloWorld这个地址,Index就会被执行。因为Index在控制器中是默认的被调用的方法,如果没有一个方法被明确的制定。
现在,我们访问http://localhost:xx/HelloWorld/Welcome,Welcome方法被执行,然后将方法返回的字符串显示到页面中。
在一次来看/[Controller]/[ActionName]/[Parameters] HelloWorld对应控制器,Welcome对应执行的方法在这一部分中。我们还没有参数在这里边。
接着让我们来修改一下代码,可以通过URL像控制器传递一些信息,例如/HelloWorld/Welcome?name=Scott&numtimes=4接着修改你的Welcome方法,让它包含两个参数,如下图。注意,我们利用c#可选的参数特征,指定numTimes参数默认为1如果它不被传递到URL中。
运
行
你
的
程
序
然
后
访
问
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 ,你可以任意更改参数名后边的值。系统自动的映射到地址栏中你所查询的字符串的方法中的参数。
在上边两个实例中,控制器已经完成了所有的工作,和完成了直接返回HTML。
通常我们不想让控制器直接返回HTML,因为最终的代码会变得非常麻烦。所以我们用分离视图文件来生成HTML的响应。让我们来看一下怎么来做视图。关闭浏览器返回我
们的开发环境。
添加视图
在这一部分我们来看,如何用HelloWorldController类来使用视图模板文件清晰的封装生成的HTML,然后响应到我们的客户端。
用我们Index方法的视图模板来开始吧。我们用的是HelloWorldController类中的Index方法。
当前我们的Index()方法返回了一个非常不好编辑的字符串信息在Controller这个类中。
现在让我们添加一个可以被Index()方法是用的视图模板到我们的项目。这样来做,右击鼠标在Index()方法名字的任意位置然后再弹出的菜单中选择Add View...
这个选项会弹出一个对话框,如图,会给我们提供一些可以选择内容的模板,这些会应用到我们的Index()方法中。现在,一切保持默认状态,然后点击Add按钮。
点击Add之后会有一个新的文件夹和一个文件出现在资源视图中,就是这,我现在有一个HelloWrold文件夹在Views文件夹中,和一个Index.aspx文件在HelloWorld中。
这个新的Index文件已经被打开并且是可编辑状态,添加一些内容如下图所示
运行你的应用程序,然后访问http://localhost:xx/HelloWorld ,在这个示例中,我们控制器里的Index方法仅仅是调用了\"return View()\"这个方法,这个方法指示出我们想要用的返回一个响应到客户端的视图模板。因为我们没有明确的说明想要使用的视图模板的名字,ASP.NET MVC默认使用\\Views\\HelloWorld folder中的Index.aspx视图文件,现在我们看到了视图中固定编码的字符串。如图所示
看起来非常好,注意到没,我们浏览器的标题为Index,页面中的大标题为My MVC Application,让我们来修改一下它们的内容。
更改视图和模板页
首先我们来修改My MVC Application这一部分,这个文本内容是被共享的,它在所有的页面中出现。尽管它出现在我们应用程序的没一个页面中,但实际上,它只是存在于我们代码中的一个位置。打开资源管理视图中的/Views/Shared文件夹,然后打开Site.Master这个文件。它被称作是母版页,它也被其他的页面所共享。
注意如下的内容在这个文件中
这个占位符会显示在所有你创建的页面上,被包装在母版页中。试着修改一下title,然后运行你的程序,访问一下页面。你会发现,这一个改动会影响很多页面。
现在每一个页面都会有一个主要的标题,My MVC Movie Application,它会填充所有页面共享的白色文本。
下面是我们修改了title后Site.Master文件的全部内容
现在,让我们来修改Index页面的title。
打开/HelloWorld/Index.aspx。有两个地方需要修改。首先是浏览器的title,其次是H2标记的头。稍微做下改动后,如下图。
运行你的应用程序,访问/Movies。注意浏览器的标题,已经发生了改变。如图
我们的一部分数据还是硬编码。我们有了控制器,也有了视图,但是还没有数据。稍后将介绍一下如何创建数据库和从数据库中读取数据。
传递一个视图模型
在创建数据库之前让我们先来了解一下视图模型。这些对象代表了一个需要呈现返回到客户端HTML响应的视图模板。他们通常创建和传递通过Controller类到视图模板,应该仅仅只是包含所请求的数据。
回头查看我们所创建的HelloWorld样例,我们的Welcome()行为方法有一个name 和一个 numTimes参数和将它们输出到浏览器。不在用控制器直接呈现响应。让我们创建一个类来保存数据然后可以将数据传递到呈现HTML的视图模板。这样控制器和视图就可以各自维护自己的的工作内容,让我们能更清楚的管理和维护我们的应用程序。
返回来看HelloWorldController.cs这个文件,让我们来添加一个WelcomeViewModel类,并且更改我们的Welcome方法。下图就是更改后的HelloWorldController.cs文件的内容。
尽管Welcome里边有多行代码,其实这个方法仅有两个代码语句,第一个语句将两个参数封装到ViewModel对象中,还有一部分将结果对象返回到视图中。
现在我们需要一个Welcome视图模板。在Welcome方法名字上单击右键,选择Add View。这次我们勾选上Create a strongly-typed view,然后下拉菜单中选择选项如图。这个视图将只会知道WelcomeViewModels,没有其他类型的对象。
提示:在下拉列表中选择了WelcomeViewModel之后,你需要编译一次。
这就是添加视图的对话框。
在
在
一
次
运
行
你
的
程
序
,
然
后
访
问
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4,现在我们可以从URL里获得数据,数据被传递到控制器,我们的控制器将数据封装到视图模型,然后传递到视图中,视图将数据以HTML的形式展现给我们。下图就是演示效果。
这个可以称作是“M”的那种模型,但它不是数据库类型。下面我们来看如何用数据库来创建我们的Movies相关的数据。
创建一个数据库
在这一部分我们用SQL Express database来创建一个可以存储和检索数据的数据库。在Visual Web Developer IDE中选择View | Other Windows | Database Explorer在Data Connection右击并选择Add Connection,或者直接点击创建数据库的图标。看下图
在下面这个对话框中填写\".\\SQLEXPRESS\"作为你的服务器名字,\"Movies\"是数据库的名字。
好,现在我们有了一个空数据库。下面我们要在数据库里边添加一张表,在数据库的资源管理视图中的Tables上右键点击然后添加一个新的数据库表。数据库中的字段参考下图。
然后修改ID字段的属性,如下图
修改完成后,点击工具栏上边的保存图标来保存数据库表,名字为Movie
在Database Explorer视图中右键我们创建的数据库表,然后选择\"Show Table Data\",填入一些内容,看下图
创建模型
现在返回我们的资源管理视图中来,在Models文件夹上右键然后选择Add | New Item
我们将从我们新创建的数据库中创建一个实体模型。这将会在我们的项目中创建一个类的集合,能让我们查询和操作数据库变得很容易。按照下图操作,取名字为Movies.edmx。
然后点击添加按钮,将会打开\"Entity Data Model Wizard\"这个对话框。
选择我们创建的数据库,然后选择我们需要的数据库表。
现在我们能在实体框架设计页看到我们选择的数据库表,然后从代码中访问它。
这个类将我们的数据库表关联起来,并且保持一致。默认的名字和映射约定我们都保持默认并保存。
现在我们做一些真实的数据。
在控制器中访问数据模型
在Controllers folder文件夹中右键,来创建一个MoviesController类,写入一些代码,这些代码可以检索数据库中的内容,并且能通过视图模板返回到浏览器中。
这个操作会在我们项目的\\Controller中创建一个MoviesController.cs文件。让我们来修改代码,在数据库中读取我们想要得到的数据。
我们执行了一个LINQ查询,将检索出1984年6月以后发布的电影。我们需要一个视图模板来呈现这个影片列表。在Index方法上右键选择添加视图并创建。
在这个视图的对话框中我们将会指出我们要传递一个List 记住,添加了这个视图之后要再次编译应用程序。 点击添加之后编译器自动为我们生成视图的代码,我们可以修改一下 运行程序,在地址栏中访问/Movies。现在,我们通过控制器中的简单查询完成了查询数据库的操作和将数据返回到视图并呈现到浏览器。 如果我们并不想用Edit, Details 和Delete这三个命令,这三个命令是编译器自动帮我们生成的。打开/Movies/Index.aspx然后删除不需要的代码。 修改后的代码如下 修改了不需要的链接以后,在次访问页面 现在Create New还不能使用,下面我们来添加这个功能。 添加Create Method和Create Viwe 这一部分我们将会实现在数据库中添加一个新的Movie列表。创建一个包含表单的页面,并提供Movies信息相关的内容,供用户填写。我们在MoviesController 这个类中添加两个Create方法。一个方法来显示表单的页面,另一个方法负责处理填写的数据并将数提交到服务器中,然后保存在我们的数据库。 下面是我们实现的代码。 接下来我们创建一个包含用户表单的视图模板。在第一个Create方法的名字上右击,然后选择添加模板。 We'll select that we are going to pass the view template a \"Movie\" as its view data class, and indicate that we want to \"scaffold\" a \"Create\" template. 点击Add之后,\\Movies\\Create.aspx将被创建,为我们生成了一些代码如图 因为数据库中已经存在一个ID,所以删除上边视图中关于ID的标签。 接下来运行程序,访问/Movies这个页面,然后点击Create转到Movies添加的页面中。 点击提交按钮,将通过HTTP POST提交表单中的数据到/Movies/Create方法 来看一下这个方法,它将一个Movie对象作为了参数 这个Movie对象传递了Create action方法的[HttpPost] version,我们将它保存在数据库中,接着页面跳通过Index方法跳转。添加后的效果 到此算是结束了吧 后便还有要验证数据有效性的部分 有兴趣的同学可以查看一下原版地址是 http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part7 这个例子只是用编译器实现了简单的MVC框架,想要更深入的了解更多MVC架构的知识,还需要翻阅更多的资料 希望大家有时间多到我们网站http://bbs.51aspx.com 的论坛上发言,提问,这样才有助于大家水平的提高。 希望这个文档能帮助大家理解一点MVC的知识 因篇幅问题不能全部显示,请点此查看更多更全内容标签下的内容,如My Movie List。