【asp源码栏目提醒】:文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。
网学会员整理了asp源码-ASP_NET_MVC3中文版教程 - 软件工程的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!
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并且在起始页start page中选择“新建项目”。
Visual Web Developer 是一个集成开发环境,你可以使用它来进行各种应用程序的开发。
在 Visual Web Developer 的菜单的下面有一个工具条,可以直接点击工具条中的各个工具按钮来进行各种操作,也可以直接点击菜单中的各个菜单项来进行各种操作,此处我们点击“文件”菜单中的“新建项目”菜单项。
图 1-1 Visual Web Developer 2010 Express 中的起始页1.3 创建你的第一个应用程序 你可以使用 Visual Basic 或 Visual C作为开发语言来创建应用程序。
在本教程中,选择 C来作为开发语言。
点击“新建项目”菜单项后,在打开的“新建项目”对话框中,双击左边的“Visual C”使其成为展开状态,然后点击“Web”,点击右边的“
ASP.NET MVC3 Web 应用程序”,然后在下方的名称文本框中填入应用程序的名称,在本教程中命名为“MvcMovie”然后点击确定按钮。
图 1-2 在新建项目对话框中选择
ASP.NET MVC3 应用程序并为应用程序命名 在接下来打开的“新
ASP.NET MVC 3 项目”对话框中,点击选中“Internet 应用程序”,在“视图引擎”下拉框中保持默认的“Razor”选项不作修改 (Razor 视图是
ASP.NETMVC3 种新增的一种十分重要的视图类型,使用它可以使得 Web 应用程序的开发变得更加方便快捷,在后文中将对此进行详细介绍)。
图 1-3 选择项目模板与视图引擎 点击确定按钮,Visual Web Developer 会为你所创建的
ASP.NET MVC 项目提供一个默认模板,这样的话你就拥有了一个可以立刻运行的应用程序。
默认的模板中提供的是一个很简单的显示“欢迎使用
ASP.NET MVC”文字的应用程序,你可以以此作为你的开发起点。
图 1-4 Visual Web Developer 提供了一个默认的应用程序模板 点击“调试”菜单中的“启动调试”菜单项(该菜单项的快捷键为 F5),Visual WebDeveloper 将启动一个内置的服务器,并且在该服务器中打开当前 Web 应用程序的主页,如图 1-5 所示。
图 1-5
ASP.NET MVC3 的默认应用程序模板的调试画面 请注意该页面在浏览器中的地址为“http://localhost:4423/”。
其中“localhost”代表了本机上你刚刚创建的 Web 应用程序的临时网站地址,4423 代表了 Visual WebDeveloper 使用的一个随机端口,每次调试的时候,Visual Web Developer 都会使用这个端口来作为内置服务器的端口号。
在各计算机上,该端口号都是不相同的,因为该端口号是Visual Web Developer 随机选择的。
在这个模板应用程序的页面的右上角,提供了两个按钮与一个“登录”链接,点击“登录”链接,页面跳转到登录页面,点击“主页”按钮,页面返回到主页,点击“关于”按钮,页面跳转到“关于”页面。
接下来,让我们开始逐步将这个默认的应用程序修改为我们所要的应用程序,在这个过程中逐步了解
ASP.NET MVC 3 的有关知识。
首先,让我们关闭浏览器并开始代码的修改工作。
第二节 添加一个控制器 MVC 的全称为 model-view-controller模型-视图-控制器。
MVC 是一种开发应用程序的模式,这个模式已经具有了很好的框架架构,并且十分容易维护。
使用 MVC 开发出来的应用程序一般包括以下几块内容: 控制器Controller:控制器类处理客户端向 Web 应用程序发出的请求,获取数据, 并指定返回给客户端,用来显示处理结果的视图。
模型(Model):模型类代表了应用程序的数据,这些数据通常具有一个数据验证 逻辑,用来使得这些数据必须符合业务逻辑。
视图(View):视图类是 Web 应用程序中用来生成并显示 HTML 格式的服务器端对客 户端请求的响应结果的模板文件。
在本教程中,将全面介绍这些概念,并且向你展示如何利用它们来搭建一个应用程序。
首先,让我们来创建一个控制器controller类。
在解决方案资源管理器中,鼠标右击Controllers 文件夹,并且点击添加-gt控制器,如图 2-1 所示。
图 2-1 添加控制器 在弹出的“添加控制器”对话框中将控制器命名为“HelloWorldController”然后点击添加按钮,如图 2-2 所示。
图 2-2 命名控制器 观察解决方案资源管理器中新增加了一个文件,名字为 HelloWorldController.cs,并且该文件呈打开状态,如图 2-3 所示。
图 2-3 控制器代码 修改打开的 HelloWorldController.cs 文件,在 HelloWorldController 类中,创建如代码清单 2-1 中所示的两个方法,控制器将返回一个 HTML 格式的字符串。
代码 2-1 控制器中创建方法 public class HelloWorldController : Controller // // GET: /HelloWorld/ public string Index return quot这是我的ltbgt默认lt/bgtaction...quot // // GET: /HelloWorld/Welcome/ public string WelCome return quot这是我的 Welcome 方法...quot 在这个修改后的 HelloWorldController 控制器中,第一个方法名为 Index。
现在让我们从浏览器中调用该方法。
运行应用程序(按 F5 键或 CtrlF5 键)在打开的浏览器中的地址栏后面,添加“HelloWorld”路径(譬如,在我的计算机上,浏览器中地址为http://localhost:4423/HelloWorld),画面显示如图 2-4 所示。
由于在 Index 方法中,直接返回了一个 HTML 格式的字符串,所以在浏览器中将该字符串显示出来。
图 2-4 HelloWorldController 控制器中 Index 方法的运行结果 在
ASP.NET MVC 中,可以根据浏览器中的输入地址来调用不同的控制器或控制七种不同的方法。
ASP.NET MVC 的默认的映射逻辑使用如下所示的格式来决定应该调用什么控制器或控制器中的什么方法。
/Controller/ActionName/Parameters URL 地址的第一部分决定调用哪个控制器类,所以“/HelloWorld”映射到HelloWorldController 控制器类。
第二部分决定调用控制器中的哪个方法。
所以“/HelloWorld/Index”将会调用 HelloWorldController 控制器类的 Index 方法。
由于Index 方法是控制器类的默认方法(可以另外指定控制器类的默认方法),所以也可只输入“/HelloWorld”来调用该方法。
在浏览器的地址栏中,输入“http://localhost:xxxx/HelloWorld/Welcome”,将会调用HelloWorldController 控制器类的 Welcome 方法,该方法返回“这是我的 Welcome 方法...”文字,所以浏览器中显示该文字,如图 2-5 所示。
图 2-5 HelloWorldController 控制器中 Welcome 方法的运行结果 接下来,让我们修改 Welcome 方法,以便在 URL 地址栏中可以传递一些参数给该方法(例如:/HelloWorld/WelcomenameScottampnumtimes4。
修改后的代码如下所示。
注意这里我们使用了 C的可选参数,当 URL 地址中没有使用 numtimes 参数时,该参数被默认设定为 1。
public string Welcomestring name int numTimes1 return HttpUtility.HtmlEncodequotHello quot name quotNumTimes is:quot numTimes 运行该应用程序,在浏览器中输入“http://localhost:xxxx/HelloWorld/WelcomenameScottampnumtimes4”,运行结果显示如图 2-6 所示。
浏览器自动将 URL 地址栏中的参数映射成 Welcome 方法中的传入参数。
图 2-6 在 Welcome 方法中使用参数 到现在为止,我们展示了 MVC 中的“VC”(视图与控制器)部分的工作机制,控制器返回 HTML 字符串。
很显然大多数情况下你不想让控制器直接返回 HTML 字符串,因为那样的话编码起来就太麻烦了。
所以我们需要使用不同的视图模板文件来帮助生成 HTML格式的页面文件,在下一节中让我们来看一下如何在
ASP.NET MVC3 中使用视图。
第三节 添加一个视图3.1 添加一个视图 在本节中我们修改 HelloWorldController 类,以便使用视图来向客户端展示 HTML 格式的响应结果。
我们使用
ASP.NET MVC3 中新增的 Razor 视图引擎来创建视图。
Razor 视图模板文件的后缀名为.cshtml它提供了一种简洁的方式来创建 HTML 输出流。
Razor 视图大大减少了在书写视图模板文件时所需要输入的字符,提供了一个最快捷,最简便的编码方式。
这里,我们在 HelloWorldController 类的 Index 方法中添加使用一个视图。
在修改前的Index 方法中返回一个字符串,我们修改这个方法来使它返回一个视图,代码如下所示。
public ActionResult Index return View 这段代码表示 Index 方法使用一个视图模板来在浏览器中生成 HTML 格式的页面文件。
接着,让我们来添加一个 Index 方法所使用的视图模板。
在 Index 方法中点击鼠标右键,然后点击“添加视图”,将会弹出一个“添加视图”对话框。
图 3-1 添加视图 图 3-2 添加视图对话框 在该对话框中,不做任何修改,直接点击添加按钮,观察解决方案资源管理器中,在MvcMovie 项目下的 Views 文件夹下创建了一个 HelloWorld 文件夹,并且在该文件夹中创建了一个 Index.cshtml 文件,同时该文件呈打开状态,如图 3-3 所示。
图 3-3 视图模板文件被创建并呈打开状态 让我们在该文件中追加一些文字,代码如代码清单 3-1 所示。
代码 3-1 Index.cshtml 视图模板文件 ViewBag.Title quot首页quot lth2gt首页lt/h2gt ltpgt这是我的第一个视图模板lt/pgt 运行应用程序,输入地址“http://localhost:xxxx/HelloWorld”。
由于在 Index 方法中并没有做任何事情,只是简单地一行代码“return View”该行代码表示我们使用一个视图模板文件来在浏览器中展示响应结果。
因为我们并没有显式指定使用哪个视图模板文件, 所以使用了默认的 Views 文件夹下的 HelloWorld 文件夹下的 Index.cshtml 视图模板文件。
该视图模板文件中只有简单的两行文字,在浏览器中的显示结果如图 3-4 所示。
图 3-4 在浏览器中显示视图 看上去还不错,但是请注意,该网页的标题为“首页”但是网页中的大标题文字却为“我的 MVC 应用程序”,需要修改一下。
3.2 修改视图--修改应用程序的页面布局 首先,让我们修改页面大标题中的“我的 MVC 应用程序”文字。
这段文字是所有页面中的公共大标题,在这个应用程序中,虽然所有页面中都显示了这个共同的大标题,但只有一处地方对其进行了设置。
打开解决方案资源管理器中 Views 文件夹下的 Shared 文件夹下的_Layout.cshtml 文件。
该文件被称为布局页面,位于公有文件夹 Shared 下,被所有其他网页所共用。
图 3-5 公有布局页面 布局模板页允许你统一在一个地方指定整个 Web 应用程序或 Web 网站的所有 HTML页面的布局方法。
请注意文件底部的“RenderBody”代码行。
RenderBody是一个占位符,代表了所有你创建出来的实际应用的视图页面,在这里统一指定。
将布局模板文件中的“我的 MVC 应用程序”修改为“我的 MVCMovie 应用程序”。
代码如下所示。
ltdiv idquottitlequotgt lth1gt我的 MVCMovie 应用程序lt/h1gt lt/divgt 运行应用程序,注意网页中的大标题被修改为“我的 MVCMovie 应用程序”。
点击“关于”链接,你可以看见“关于”页面中的大标题也被修改为“我的 MVCMovie 应用程序”。
由此可以看出一旦修改了布局页面中的某处地方,该修改将会被应用到所有页面中。
图 3-6 在布局页面中修改了网页中显示的大标题 完整的_Layout.cshtml 文件中的代码如代码清单 3-2 所示。
代码清单 3-2 _Layout.cshtml 文件中的完整代码ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta http-equivquotContent-Typequot contentquottext/html charsetutf-8quot/gt lttitlegtViewBag.Titlelt/titlegt ltlink hrefquotUrl.Contentquot/Content/Site.cssquotquot relquotstylesheetquot typequottext/cssquot /gt ltscript srcquotUrl.Contentquot/Scripts/jquery-1.4.4.min.jsquotquot typequottext/javascriptquotgtlt/scriptgtlt/headgtltbodygt ltdiv classquotpagequotgt ltdiv idquotheaderquotgt ltdiv idquottitlequotgt lth1gt我的 MVCMovie 应用程序lt/h1gt lt/divgt ltdiv idquotlogindisplayquotgt Html.Partialquot_LogOnPartialquot lt/divgt ltdiv idquotmenucontainerquotgt ltul idquotmenuquotgt ltligtHtml.ActionLinkquot主页quot quotIndexquot quotHomequotlt/ligt ltligtHtml.ActionLinkquot关于quot quotAboutquot quotHomequotlt/ligt lt/ulgt lt/divgt lt/divgt ltdiv idquotmainquotgt RenderBody ltdiv idquotfooterquotgt lt/divgt lt/divgt lt/divgt lt/bodygt lt/htmlgt 现在,让我们修改 Index 视图页面的标题。
打开 Views 文件夹下的 HelloWorld 文件夹下的 Index.cshtml 文件。
这里我们修改两处地方:首先,修改浏览器中的标题,然后修改lth2gt标签中的小标题文字。
修改后代码如代码清单 3-3 所示。
代码清单 3-3 修改后的 Index.cshtml 视图模板文件 ViewBag.Title quot电影清单quot lth2gt我的电影清单lt/h2gt ltpgt这是我的第一个视图模板lt/pgt ViewBag 对象的 Title 属性代表了显示该页面时的浏览器中的标题文字。
让我们回头看一下布局模板文件,在该文件的ltheadgt区段中的lttitlegt标签中使用了这个值来作为浏览器中的网页标题。
同时,通过这种方法,你可以很容易地在你的视图模板文件与布局模板文件之间进行参数的传递。
运行应用程序,在地址栏中输入“http://localhost:xxxx/HelloWorld”,注意浏览器中的网页标题,页面中的小标题文字都变为修改后的标题文字(如果没有发生变化的话,则可能你的网页被缓存住了,可以按 CtrlF5 键来在重新刷新页面时取消缓存)。
同时也请注意_Layout.cshtml 文件中的占位符中的内容被替换成了 Index.cshtml 视图模板中的内容,所以浏览器中展示的是一个单一的 HTML 文件。
浏览器中的运行结果如图 3-7所示。
图 3-7 修改了标题后的 Index 视图模板文件 此处,我们的数据(“这是我的第一个视图模板”文字)是被直接书写在文件中的,也就是说我们使用到了 MVC 应用程序的“V”视图 View与“C”控制器 Controller。
接下来,我们讲解一下如何创建一个数据库并从该数据库中获取模型数据。
3.3 将控制器中的数据传递给视图 在我们使用数据库并介绍模型之前,首先我们介绍一下如何将控制器中的信息传递给视图。
浏览器接收到一个 URL 请求后,将会调用控制器类来进行响应。
你可以在控制器类中进行对接收到的页面参数进行处理的代码,你可以在控制器类中书写从数据库中获取数据的代码,你也可以在控制器类中书写代码来决定返回给客户端什么格式的响应文件。
控制器可以利用视图模板文件来生成 HTML 格式的响应文件并显示在浏览器中。
控制器类负责提供视图模板文件在生成 HTML 格式的响应文件时所需要的任何数据或对象。
一个视图模板文件不应该执行任何业务逻辑,也不应该直接和数据库进行交互。
它只能和控制器类进行交互,获取控制器类所提供给它的数据,这样可以使你的代码更加清晰,容易维护。
现在在我们的应用程序中,HelloWorldController 控制器类中的 Welcome 方法带有两个参数—name 与 numTimesWelcome 方法直接向浏览器输出这两个参数的参数值。
这里,我们修改该方法使其不再直接输出数据,而是使用一个视图模板。
该视图模板将生成一个动态的响应流,这意味着我们需要将数据从控制器类传递给视图以便利用该数据来生成该响应流。
我们在该控制器类中将视图模板所需要的数据送入一个 ViewBag 对象中,该对象可以被视图模板直接接收。
打开 HelloWorldController.cs 文件,修改 Welcome 方法,在该方法中为 ViewBag 对象添加一个 Message 属性与 NumTimes 属性,并且将属性值分别设定为经过处理后的 name 参数值与 numTimes 参数值。
ViewBag 对象是一个动态对象,你可以为它添加任何属性并赋上属性值。
在未赋值之前该属性是不生效的,直到你赋值为止。
修改后的 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 // // GET: /HelloWorld/Welcome/ public ActionResult Welcomestring name int numTimes 1 ViewBag.Message quotHello quot name ViewBag.NumTimes numTimes return View 现在 ViewBag 对象中已经包含了数据,它将被自动传递给视图。
接下来,我们需要创建一个 Welcome 视图模板。
在“调试”菜单中,点击“生成 MvcMovie”将应用程序进行编译,如图 3-8 所示。
图 3-8 编译应用程序 接下来,在 Welcome 方法中点击鼠标右键,然后点击“添加视图”,弹出对话框如图 3-9所示。
图 3-9 为 Welcome 方法添加视图 在该对话框中不做任何修改,直接点击添加按钮 View 文件夹下的 HelloWorld 文件夹中自动被创建了一个 Welcome.cshtml 文件,打开该文件,在lth2gt元素下添加代码,让浏览器 显示次数等于 URL 地址中传入的 numTimes显示 URL 地址中传入的 name 参数中设定的文字,参数中设定的次数。
修改后的 Welcome.cshtml 文件中的代码如代码清单 3-5 所示。
代码清单 3-5 修改后的 Welcome.cshtml 文件 ViewBag.Title quotWelcomequot lth2gtWelcomelt/h2gt ltulgt for int i 0 i lt ViewBag.NumTimes i ltligtViewBag.Messagelt/ligt lt/ulgt 运行应用程序,并且在地址栏中输入“http://localhost:xx/HelloWorld/WelcomenameScottampnumtimes4”,该地址栏中的页面参数将会自动传递给控制器。
控制器将会把这些参数值放入 ViewBag 对象中并且传递给视图。
视图再在浏览器中显示这些数据。
图 3-10 视图中显示从控制器类中传递过来的数据 这里,我们使用了模型“M”的一种方式,但是不是数据库的方式。
在下一节中,我们将创建一个数据库,并且介绍如何对该数据库中的数据进行处理。
第四节 添加一个模型 在本节中我们将追加一些类来管理数据库中的电影。
这些类将成为我们的 MVC 应用程序中的“模型”部分。
我们将使用一个.NET Framework 的被称之为“Entity Framework”的数据访问技术来定义这些模型类,并使用这些类来进行操作。
Entity Framework(通常被简称为“EF”)支持一个被称之为“code-first”的开发范例。
Code-first 允许你通过书写一些简单的类来创建模型对象。
你可以通过访问这些类的方式来访问数据库,这是一种非常方便快捷的开发模式。
4.1 利.