新增一个视图(View)（ASP.NET MVC3系列文章三）

最新推荐文章于 2024-08-18 23:49:39 发布

行游客

最新推荐文章于 2024-08-18 23:49:39 发布

阅读量2.8k

点赞数

分类专栏： ASP.NET MVC 文章标签： mvc asp.net 浏览器 html razor application

ASP.NET 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

MVC

10 篇文章 0 订阅

订阅专栏

原址：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和一个numTimes参数，然后直接将输出结果返回给浏览器，相当于是在控制器(Controller)中返回字符串。现在，让我们改变这个控制器(Controller)去使用一个视图(View)模板，这个视图(View)模板将生成一个动态的响应，这意味着为了生成这个响应，您需要从控制器(Controller)中输入一些合适的数据返回给视图(View)，要做到这一点，您可以使用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".

行游客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
新增一个视图(View)（ASP.NET MVC3系列文章三）

原址：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应用
复制链接

扫一扫

专栏目录