原址:http://www.asp.net/mvc/tutorials/getting-started-with-aspnet-mvc3/getting-started-with-mvc3-part3-cs
这个教程将会使用Microsoft Visual Web Developer 2010 Express Service Pack 1来教会您构建一个基于ASP.NET MVC Web应用。 在您开始之前,请确保已经安装了下面罗列的必备条件。您可以点击接下来的链接来下载它们:Web Platform Installer。或者您可以使用下面的链接来单个安装:
- Visual Studio Web Developer Express SP1 prerequisites
- ASP.NET MVC 3 Tools Update
- SQL Server Compact 4.0(runtime + tools support)
如果您使用的是Visual Studio 2010, 可以点击接下来的链接来安装这些必备条件: Visual Studio 2010 prerequisites.
在这个Visual Web Developer项目中将会全程使用c#. Download the C# version.。如果您比较擅长VB, 可以在这个教程中改为VB Visual Basic version
在这节章节中,您将修改HelloWorldController
类,使用view模板文件来生成干净的HTML代码,响应客户端的请求。您将在ASP.NET MVC3中使用新的Razor view引擎创建一个视图(view)模板文件。基于Razor引擎的扩展文件名是.cshtml ,并且在书写视图(view)模板的时候,提供一种优雅的方式,来使用C# Razor创建HTML输出,以此最大程度的减少字符和必须敲击键盘的次数, 这样就能够提供一种更快更流畅的开发过程。
这里先给HelloWorldController
类的Index方法添加一个视图(view)模板。在控制器(controller)类中,当前的Index方法是用硬编码的方式返回一段字符串信息。改变一下Index方法,返回一个视图(view)对象,如下所示:.
public ActionResult Index() { return View(); }
这段代码使用了一个视图(view)模板去生成一段HTML,将响应返回给浏览器。在项目中,您能给Index方法添加一个视图(view)模板,要做到这点,请在Index方法内右键并选择Add View。
在Add View对话框弹出以后,使用默认设置,然后单击Add按钮:
您能看到,在Solution Explorer中,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
controller (http://localhost:xxxx/HelloWorld). 这时,在您的控制器(controller)中的Index方法没有很好的工作;它简单的返回了View(),这种方式指定了使用一个视图(view)模板文件去呈现一个响应给客户端。因为您不能在使用中明确的指定这个视图(view)模板的名称, 所以ASP.NET MVC默认的使用\Views\HelloWorld文件夹中的Index.cshtml 视图(view)文件。 下面的图片展示了在视图(view)中硬编码了一段字符串。
看起来相当不错。 然而,您会注意到,浏览器的标题显示的是“Index”,并且文中的大标题显示的是“My MVC Application。”让我们对这些内容进行一些调整。
改变view和布局页面
首先,您想要改变一下页面顶部的标题“My MVC Application”。 这是一段页面共用文本,虽然它出现在应用中的每个页面,但它通常只会出现在工程中的一个固定位置。在Solution Explorer 中,打开/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"。单击About链接, 你会看到这个页面也显示了“MVC Movie App“。 我们可以在布局模板中再次改变这个标题,您会发现所有的页面的标题都变成新的了。
下面是完成后的_Layout.cshtml文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
现在,改变一下Index页面(视图(view))中的标题。
打开MvcMovie\Views\HelloWorld\Index.cshtml文件。 有两个地方需要修改: 第一个是浏览器中出现的标题,第二个是<h2>标签中的文本。您将会稍微的改变它们,因此您会看到应用中的一些代码发生了改变。
@{ ViewBag.Title = "Movie List"; } <h2>My Movie List</h2> <p>Hello from our View Template!</p>
为了在不同的页面中显示不同的标题, 上面的代码利用ViewBag对象的特性在Index.cshtml视图模板中设置了一个标题。如果您看看布局模板中的源代码,您将会注意到,您使用的模板中<head>标签的<title>标签中使用了这种方式。 使用这种方法,您能容易的在视图(view)模板和布局模板之间传递参数。
启动应用和浏览器,链接到http://localhost:xx/HelloWorld.注意现在浏览器的标题,大小标题都发生了变化。 (如果您的浏览器中没有看到变化,可能是页面被缓存了,这时候,在浏览器中按Ctrl+F5去重新刷新一下页面。)
同时您也注意到Index.cshtml view模板是混杂了_Layout.cshtml view模板和一个简单HTML响应,然后发送给浏览器。布局模板让您可以更加容易的修改页面之间的相关内容。
我们的一些“数据”(指的是这个例子中的"Hello from our View Template!" 信息)是通过硬编码实现的,虽然,MVC应用中有一个“V”和一个“C”,但我们的应用中至今没有一个“M”。很快,我们将创建一个数据库并且返回模型(Model)数据。
从Controller中传递数据给View
在我们创建一个数据库和谈论模型(Model)之前,首先我们来谈谈怎么把信息从控制器(Controller)传递到视图(View)。在一个URL请求被引进以后,会有一个控制器(Controller)类被调用,一个控制器(Controler)类是用来引进一些参数 ,然后执行一些逻辑,最后把相关的数据以不同的响应方式返回,视图(View)模板则会根据控制器(Controller)的数据来生成和格式化一段HTML返回给浏览器。
控制器(Controllers)担负着提供视图(View)模板中必须用到的数据或对象,然后响应给浏览器, 一个视图(View)模板绝不会直接的执行业务逻辑和操作一个数据库,它只会根据控制器(Controller)中传递的数据执行一些操作,这种分离方式会让您的代码变得更加整洁和提高可维护性。
当前的HelloWorldController
类中的Welcome
方法接收一个name和一个
参数,然后直接将输出结果返回给浏览器,相当于是在控制器(Controller)中返回字符串。现在,让我们改变这个控制器(Controller)去使用一个视图(View)模板, 这个视图(View)模板将生成一个动态的响应,这意味着为了生成这个响应,您需要从控制器(Controller)中输入一些合适的数据返回给视图(View), 要做到这一点,您可以使用numTimes
ViewBag
这个对象,在控制器(Controller)中给它动态的赋值,然后在视图(View)模板中对ViewBag对象进行读取操作。
打开HelloWorldController.cs文件,然后改善一下Welcome方法,增加两个ViewBag值,一个是Message,一个是NumTimes,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对象包含的数据将会自动的传送到视图(View)。
接下来,您需要一个Welcome View模板!在Debug菜单中,选择Build MvcMovie 去对项目执行一次编译。
在Welcome方法内右键鼠标,选择Add View. 下面是弹出后的Add View对话框:
单击Add, 然后在newWelcome.cshtml 文件中的<h2>标签下面添加下面的代码。 您将会创建一个输出很多次“Hello”的循环。完成后的completeWelcome.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自动的传送到控制器(Controller),这个Controller将数据打包到一个ViewBag对象中,然后传送到视图(View),View将数据解析成HTML,最后呈现给用户:
很不错,这个模型(Model)是一种类型的“M”,但不是数据库类型。我们会在接下来的章节中会学习到如何使用一个数据库来创建一个"M".