本文作者是Rick Anderson 下面的是原文网址
http://www.asp.net/mvc/tutorials/getting-started-with-aspnet-mvc3/cs/adding-a-view
By Rick Anderson, Rick Anderson works as a programmer writer for Microsoft, focusing on ASP.NET MVC, jQuery and Entity Framework. He enjoys working with the top contributors in the ASP.NET MVC forum.
本教程会教你使用微软 Visual Web Developer2010 express2010sp1来建立一个ASP.NETmvc web 应用程序,Visual Web Developer2010 express2010sp1是 Microsoft Visual Studio 的免费版。在开始之前,请确保您已经安装了下面列出的前提条件。您可以通过单击下面的链接来安装所有这些软件: Web 平台安装程序。或者,您可以使用下面的链接单独安装这些系统必备的组件:
(第一个的用处不大,只要有vs2010应该就不用下第一个了,但是第二个是一定要下的,不然后面有一些地方就和教程的界面不一样了,第三个我想说vs2010里没有(至少我这个米有。。。。)
Sql Server Compact 4.0相比3.5版本增强了很多,支持Entity Framework 4.1,对于轻量级应用来讲,使用Sql Server Compact 4.0是个很好的选择,而且部署相当方便,不需要Sql Server Compact 4.0的安装包,仅需要发布相关的dll以及web.config配置即可。
具体看这篇文章
)
如果您使用 Visual Studio 2010 的而不是Visual Web Developer 2010,安装系统必备组件通过单击下面的链接: Visual Studio 2010 的必备组件.
本教程的源代码下载下载 C# 版本。如果您更喜欢 Visual Basic,切换到本教程的Visual Basic 版本。
MVC 代表模型-视图-控制器。MVC 是一种易于架构和维护的开发应用程序的模式。基于 MVC 的应用程序包含:
我们在此教程系列中会覆盖所有这些概念,并向您展示如何使用它们来构建应用程序。
在本节中你就将会学到通过修改HelloWorldController
类来使用视图模板文件轻松地封装对客户端生成 HTML 响应的过程。
您将创建一个基于新的Razor 视图引擎( ASP.NET MVC 3中引入)的视图模板文件。基于Razor的视图模板文件扩展名为.cshtml,让我们使用 C#语言来让它提供一种优雅的方法创建 HTML 输出流。Razor的好处就是它将我们写一个视图模板所需的字符和击键次数降至最低,并使编码工作变的快速、流畅。(这是真的假的。。。。)
让我们从HelloWorldController
类中的视图模板的Index
方法开始。目前该Index
方法返回一条在控制器类中硬编码的字符串。更改Index
方法,来让它返回一个View
对象,如下所示:
public ActionResult Index() { return View(); }
此代码使用一个视图模板来生成 HTML 响应到浏览器。在项目中,添加一个让您可以使用Index方
法的视图模板。要做到这一点,在Index方
法内单击鼠标右键,然后单击添加视图.
此时将出现添加视图对话框。保留默认值并单击添加按钮:
MvcMovie\Views\HelloWorld文件夹和MvcMovie\Views\HelloWorld\Index.cshtml的文件已经被创建了。你可以在解决方案资源管理器中看到他们:
下面显示被创建的Index.cshtml文件:
在 <h2>
标签下添加一些 HTML。修改后的MvcMovie\Views\HelloWorld\Index.cshtml文件如下所示。
@{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>
运行该应用程序,浏览HelloWorld
控制器 (http://localhost:xxxx/HelloWorld)。您的控制器中的Index
方法没有做啥太多事情 ;它只是运行了return View()语句
,它指定方法应使用视图模板文件来呈现响应给浏览器。因为您没有显式指定要使用的视图模板文件的名称,ASP.NET MVC 默认使用\Views\HelloWorld文件夹中的Index.cshtml视图文件。下图显示在视图中写好的字符串。
看起来相当不错。但是,请注意浏览器的标题栏显示的是"Index",在页面上的大标题显示的是:"My MVC Application"。让我们把这些改掉,因为我们是在做一个电影商店。
首先,您想要更改页面顶部的"My MVC Application"标题。该文本在每一页中都能见到。尽管它出现在应用程序中的每一页上但它实际上在项目中只有一个地方出现。转到解决方案资源管理器中的/Views/Shared文件夹并打开_Layout.cshtml文件。此文件被称为一个布局页面,它就是所有其他页都使用的"模板"的。
布局页面允许您在一个地方指定您的站点的 HTML 容器布局,然后将其应用在您站点中的多个页面上。请注意该文件的底部附近的@RenderBody()
。RenderBody
是在布局页面出现,它相当于一个占位符,您创建的所有特定视图的页面都在这显示。接下来在布局模板中把"My MVC Application"这个标题改成"MVC Movie App"。
<div id="title"> <h1>MVC Movie App</h1> </div>
运行该应用程序,并注意现在它的标题已经变成"MVC Movie App"。单击关于链接您将看到该页面的标题也是"MVC Movie App"。布局页面一发生变化,该站点的所有页面也会随之发生变化。
完整的_Layout.cshtml文件如下所示:
<!DOCTYPE html> <html> <head> <metacharset="utf-8"/> <title>@ViewBag.Title</title> <linkhref="@Url.Content("~/Content/Site.css")"rel="stylesheet"type="text/css"/> <scriptsrc="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"type="text/javascript"></script> <scriptsrc="@Url.Content("~/Scripts/modernizr-1.7.min.js")"type="text/javascript"></script> </head> <body> <divclass="page"> <header> <divid="title"> <h1>MVC Movie App</h1> </div> <divid="logindisplay"> @Html.Partial("_LogOnPartial") </div> <nav> <ulid="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </nav> </header> <sectionid="main"> @RenderBody() </section> <footer> </footer> </div> </body> </html>
现在,让我们来更改Index页 (视图) 的标题。
打开MvcMovie\Views\HelloWorld\Index.cshtml。有两个地方需要更改: 第一,显示在浏览器的标题和二级标题 ( <h2>
元素)处的标题。尝试改变他们你就可以明白每块代码对应应用程序的哪个部分。
@{ ViewBag.Title = "Movie List"; } <h2>My Movie List</h2> <p>Hello from our View Template!</p>
为了指示要显示的 HTML 标题,上面的代码设置了ViewBag
对象 (这是在Index.cshtml视图模板中) 的Title
属性。如果你回去看看布局页面的源代码,你会发现布局页面在<title>
元素中使用此值作为 HTML 的<head>
节的一部分。使用这种方法,您可以在您的视图模板与您的布局页面中轻松地传递其他参数。
运行该应用程序,浏览http://localhost:xx/HelloWorld。应该能注意到浏览器的标题、 主标题和二级标题已经更改了。(如果您看不到该页面在浏览器中的更改,您可能是正在查看缓存的内容。在浏览器中按 Ctrl + F5 ,从服务器重新加载该页面。)
此外注意到Index.cshtml视图模板中的内容与_Layout.cshtml视图模板合并的方式和单个 HTML 响应发送到浏览器。布局页面使改变应用程序中的所有页面的公共部分变的很容易。
尽管我们那一点"数据"(在本例中是"Hello from our View Template!"消息) 是硬编码的。但MVC 的应用程序总算有了"V"(视图),而且你已经有了"C"(控制器),但是还没有"M"(模型) 。不久,我们就会学会如何创建数据库并从中检索模型中的数据。
在我们建立数据库并谈谈模型之前,让我们先明白怎样把控制器的信息传递给视图。一旦传入了 URL 请求,控制器类将被调用并对此进行响应。您在控制器类中编写的代码会处理传入的参数,从数据库中检索数据并最终决定将哪种类型的响应发送回浏览器。然后视图模板可从控制器生成并设置其格式到浏览器的 HTML 响应。
控制器负责为一个视图模板提供为使其响应浏览器的请求所需的任何数据或对象。一个视图模板应该永远不会执行业务逻辑或直接与数据库进行交互。相反,它应该只处理控制器向它提供的数据。保持这种"关注分离"可以使您的代码简结并且更易维护。
现在, HelloWorldController
类中的Welcome
方法需要一个name
和一个numTimes
参数来直接向浏览器输出值。而不是像现在这样直接呈现一个写好的字符串,让我们来修改控制器从而使用一个新的视图模板。这个视图模板将生成动态响应,这意味着您需要将相应的数据从控制器传递给视图,以便生成响应。您可以把视图模板需要的动态数据放在一个ViewBag
对象传递给视图,然后就可以访问视图模板了。
返回到HelloWorldController.cs文件并更改其中Welcome
的方法来将Message
和NumTimes
的值添加到ViewBag
对象。ViewBag
是一个动态的对象,这意味着你想往里面搁啥都行;直到你往ViewBag
对象里面加入了东西它才有已定义的属性,。完整的HelloWorldController.cs文件看起来像这样:
using System.Web; using System.Web.Mvc; namespace MvcMovie.Controllers { public class HelloWorldController : Controller { public ActionResult Index() { return View(); } public ActionResult Welcome(string name, int numTimes = 1) { ViewBag.Message = "Hello " + name; ViewBag.NumTimes = numTimes; return View(); } } }
现在的ViewBag
对象里包含着将自动传递到对应视图的数据。
下一步,你需要一个Welcome的视图模板 !在调试菜单中,选择生成 MvcMovie ,以确保项目被编译。
然后在Welcome
的方法内右键单击然后单击添加视图。下面就是是添加视图对话框的样子:
单击添加,然后在新的Welcome.cshtml文件中的<h2>
元素下添加下列代码。您将创建一个由用户决定它应该输出多少遍"你好"的循环。下面显示了完整的Welcome.cshtml文件。
@{ ViewBag.Title = "Welcome"; } <h2>Welcome</h2> <ul> @for (int i=0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </ul>
运行该应用程序,浏览以下 URL:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
现在的数据是从 URL 取得并自动传递到控制器。控制器把数据打包到一个ViewBag
对象中,并将该对象传递给视图。然后该视图以 html 格式向用户显示数据。
嗯,这是一种"M"的模式,但不是使用了数据库的那种。让我们学会之前的这些并创建一个电影的数据库。
啊啊啊啊啊啊啊啊啊啊啊,这一篇真长,看起来太费劲了。。。。各位走过的路过的,觉得我这翻译的有啥不足,还请您告诉我,谢谢啦