3快速入门-第一节概述

(2011-02-2320:57:18)

转载

标签：

web应用程序

分类：3

1.1本教程的学习内容

在本教程中，你将学会如下内容：

如何创建一个的工程。

如何创建的控制器（controller）与视图(view)。

如何使用EntityFrameworkcode-first范例来创建一个新的数据库。

如何获取和显示数据。

如何编辑数据并且进行数据的有效性验证。

1.2创建工程

如果要创建一个3的工程时，首先运行VisualWebDeveloper2010Express

（本教程中简称“VisualWebDeveloper”）,并且在起始页(startpage)中选择“新建项

目”。

VisualWebDeveloper是一个集成开发环境，你可以使用它来进行各种应用程序的开发。

在VisualWebDeveloper的菜单的下面有一个工具条，可以直接点击工具条中的各个工具

按钮来进行各种操作，也可以直接点击菜单中的各个菜单项来进行各种操作，此处我们点击

“文件”菜单中的“新建项目”菜单项。

图1-1VisualWebDeveloper2010Express中的起始页

1.3创建你的第一个应用程序

你可以使用VisualBasic或VisualC#作为开发语言来创建应用程序。在本教程中，

选择C#来作为开发语言。点击“新建项目”菜单项后，在打开的“新建项目”对话框中，

双击左边的“VisualC#”使其成为展开状态，然后点击“Web”，点击右边的“

3Web应用程序”，然后在下方的名称文本框中填入应用程序的名称，在本教程中命名为

“MvcMovie”,然后点击确定按钮。

图1-2在新建项目对话框中选择3应用程序并为应用程序命名

在接下来打开的“新3项目”对话框中，点击选中“Internet应用程

序”，在“视图引擎”下拉框中保持默认的“Razor”选项不作修改（Razor视图是

MVC3种新增的一种十分重要的视图类型，使用它可以使得Web应用程序的开发变得更加方

便快捷，在后文中将对此进行详细介绍）。

图1-3选择项目模板与视图引擎

点击确定按钮，VisualWebDeveloper会为你所创建的项目提供一个默

认模板，这样的话你就拥有了一个可以立刻运行的应用程序。默认的模板中提供的是一个很

简单的显示“欢迎使用!”文字的应用程序，你可以以此作为你的开发起点。

图1-4VisualWebDeveloper提供了一个默认的应用程序模板

点击“调试”菜单中的“启动调试”菜单项（该菜单项的快捷键为F5），VisualWeb

Developer将启动一个内置的服务器，并且在该服务器中打开当前Web应用程序的主页，如

图1-5所示。

图3的默认应用程序模板的调试画面

请注意该页面在浏览器中的地址为“http://localhost:4423/”。其中“localhost”

代表了本机上你刚刚创建的Web应用程序的临时网站地址，4423代表了VisualWeb

Developer使用的一个随机端口，每次调试的时候，VisualWebDeveloper都会使用这个端

口来作为内置服务器的端口号。在各计算机上，该端口号都是不相同的，因为该端口号是

VisualWebDeveloper随机选择的。

在这个模板应用程序的页面的右上角，提供了两个按钮与一个“登录”链接，点击“登

录”链接，页面跳转到登录页面，点击“主页”按钮，页面返回到主页，点击“关于”按钮，

页面跳转到“关于”页面。

接下来，让我们开始逐步将这个默认的应用程序修改为我们所要的应用程序，在这个过

程中逐步了解3的有关知识。首先，让我们关闭浏览器并开始代码的修改工作。

3快速入门--第二节添加一个控制器

(2011-02-2419:39:57)

转载

标签：

控制器

杂谈

分类：3

MVC的全称为model-view-controller(模型-视图-控制器)。MVC是一种开发应用程序

的模式，这个模式已经具有了很好的框架架构，并且十分容易维护。使用MVC开发出来的应

用程序一般包括以下几块内容：

控制器(Controller)：控制器类处理客户端向Web应用程序发出的请求，获取数据，

并指定返回给客户端，用来显示处理结果的视图。

模型（Model）：模型类代表了应用程序的数据，这些数据通常具有一个数据验证逻

辑，用来使得这些数据必须符合业务逻辑。

视图（View）:视图类是Web应用程序中用来生成并显示HTML格式的服务器端对客

户端请求的响应结果的模板文件。

在本教程中，将全面介绍这些概念，并且向你展示如何利用它们来搭建一个应用程序。

首先，让我们来创建一个控制器(controller)类。在解决方案资源管理器中，鼠标右击

Controllers文件夹，并且点击添加-〉控制器，如图2-1所示。

图2-1添加控制器

在弹出的“添加控制器”对话框中,将控制器命名为“HelloWorldController”,然后

点击添加按钮，如图2-2所示。

图2-2命名控制器

观察解决方案资源管理器中新增加了一个文件，名字为，并

且该文件呈打开状态，如图2-3所示。

修改打开的文件，在HelloWorldController类中，创建如

代码清单2-1中所示的两个方法，控制器将返回一个HTML格式的字符串。

代码清单2-1在控制器中创建方法

publicclassHelloWorldController:Controller

{

//

//GET:/HelloWorld/

publicstringIndex()

{

return"这是我的默认action...";

}

//

//GET:/HelloWorld/Welcome/

publicstringWelCome()

{

return"这是我的Welcome方法...";

}

}

在这个修改后的HelloWorldController控制器中，第一个方法名为Index。现在让我

们从浏览器中调用该方法。运行应用程序（按F5键或Ctrl+F5键）,在打开的浏览器中的地

址栏后面，添加“HelloWorld”路径（譬如，在我的计算机上，浏览器中地址为

http://localhost:4423/HelloWorld），画面显示如图2-4所示。由于在Index方法中，直

接返回了一个HTML格式的字符串，所以在浏览器中将该字符串显示出来。

图2-4HelloWorldController控制器中Index方法的运行结果

在中，可以根据浏览器中的输入地址来调用不同的控制器或控制七种不同

的方法。的默认的映射逻辑使用如下所示的格式来决定应该调用什么控制器或

控制器中的什么方法。

/[Controller]/[ActionName]/[Parameters]

URL地址的第一部分决定调用哪个控制器类，所以“/HelloWorld”映射到

HelloWorldController控制器类。第二部分决定调用控制器中的哪个方法。所以

“/HelloWorld/Index”将会调用HelloWorldController控制器类的Index方法。由于

Index方法是控制器类的默认方法（可以另外指定控制器类的默认方法），所以也可只输入

“/HelloWorld”来调用该方法。

在浏览器的地址栏中，输入“http://localhost:xxxx/HelloWorld/Welcome”，将会调

用HelloWorldController控制器类的Welcome方法，该方法返回“这是我的Welcome方

法...”文字，所以浏览器中显示该文字，如图2-5所示。

图2-5HelloWorldController控制器中Welcome方法的运行结果

接下来，让我们修改Welcome方法，以便在URL地址栏中可以传递一些参数给该方法（例

如：/HelloWorld/Welcome?name=Scott&numtimes=4)。修改后的代码如下所示。注意这里我

们使用了C#的可选参数，当URL地址中没有使用numtimes参数时，该参数被默认设定为1。

publicstringWelcome(stringname,intnumTimes=1)

{

code("Hello"+name+",NumTimesis:"+numTimes);

}

运行该应用程序，在浏览器中输入

“http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4”，运行结果显示

如图2-6所示。浏览器自动将URL地址栏中的参数映射成Welcome方法中的传入参数。

图2-6在Welcome方法中使用参数

到现在为止，我们展示了MVC中的“VC”（视图与控制器）部分的工作机制，控制器返

回HTML字符串。很显然大多数情况下你不想让控制器直接返回HTML字符串，因为那样的话

编码起来就太麻烦了。所以我们需要使用不同的视图模板文件来帮助生成HTML格式的页面

文件，在下一节中让我们来看一下如何在3中使用视图。

3快速入门-第三节添加一个视图

(2011-02-2618:58:25)

转载

标签：分类：3

视图

模板

应用程序

控制器

3.1添加一个视图

在本节中我们修改HelloWorldController类，以便使用视图来向客户端展示HTML格式

的响应结果。

我们使用3中新增的Razor视图引擎来创建视图。Razor视图模板文件的后缀

名为.cshtml,它提供了一种简洁的方式来创建HTML输出流。Razor视图大大减少了在书写

视图模板文件时所需要输入的字符，提供了一个最快捷，最简便的编码方式。

这里，我们在HelloWorldController类的Index方法中添加使用一个视图。在修改前

的Index方法中返回一个字符串，我们修改这个方法来使它返回一个视图，代码如下所示。

publicActionResultIndex()

{

returnView();

}

这段代码表示Index方法使用一个视图模板来在浏览器中生成HTML格式的页面文件。

接着，让我们来添加一个Index方法所使用的视图模板。在Index方法中点击鼠标右键，然

后点击“添加视图”，将会弹出一个“添加视图”对话框。

图3-1添加视图

图3-2添加视图对话框

在该对话框中，不做任何修改，直接点击添加按钮，观察解决方案资源管理器中，在

MvcMovie项目下的Views文件夹下创建了一个HelloWorld文件夹，并且在该文件夹中创建

了一个文件，同时该文件呈打开状态，如图3-3所示。

图3-3视图模板文件被创建并呈打开状态

让我们在该文件中追加一些文字，代码如代码清单3-1所示。

代码清单视图模板文件

@{

="首页";

}

首页

这是我的第一个视图模板

运行应用程序，输入地址“http://localhost:xxxx/HelloWorld”。由于在Index方法

中并没有做任何事情，只是简单地一行代码—“returnView()”,该行代码表示我们使用一

个视图模板文件来在浏览器中展示响应结果。因为我们并没有显式指定使用哪个视图模板文

件，所以使用了默认的Views文件夹下的HelloWorld文件夹下的视图模板文

件。该视图模板文件中只有简单的两行文字，在浏览器中的显示结果如图3-4所示。

图3-4在浏览器中显示视图

看上去还不错，但是请注意，该网页的标题为“首页”,但是网页中的大标题文字却为

“我的MVC应用程序”，需要修改一下。

3.2修改视图，修改应用程序的页面布局

首先，让我们修改页面大标题中的“我的MVC应用程序”文字。这段文字是所有页面中

的公共大标题，在这个应用程序中，虽然所有页面中都显示了这个共同的大标题，但只有一

处地方对其进行了设置。打开解决方案资源管理器中Views文件夹下的Shared文件夹下的

_文件。该文件被称为布局页面，位于公有文件夹Shared下，被所有其他网

页所共用。

图3-5公有布局页面

布局模板页允许你统一在一个地方指定整个Web应用程序或Web网站的所有HTML页面

的布局方法。请注意文件底部的“@RenderBody()”代码行。@RenderBody()是一个占位符，

代表了所有你创建出来的实际应用的视图页面，在这里统一指定。将布局模板文件中的“我

的MVC应用程序”修改为“我的MVCMovie应用程序”。代码如下所示。

我的MVCMovie应用程序