C# MVC 自学笔记—4 添加视图
2013-09-11 19:37
260 查看
==============================翻译==============================
在本节中，你将要修改
您将创建一个使用介绍与 ASP.NET MVC 3 的Razor 视图引擎的视图模板文件。基于 razor 视图模板有.cshtml文件扩展名，并提供优雅的方式来创建 HTML 输出使用的 C#。Razor 将编写视图模板所需的字符数和击键数降至最低，并使编码工作流快速、流畅。
目前该
上面的
在项目中，添加一个视图模板，您可以使用与该
出现添加视图对话框。保留缺省值的方式并单击添加按钮：
创建的MvcMovie\Views\HelloWorld文件夹和MvcMovie\Views\HelloWorld\Index.cshtml文件。你可以看到他们在解决方案资源管理器中:
下面显示所创建的 Index.cshtml 文件：
在
下面显示了完整的MvcMovie\Views\HelloWorld\Index.cshtml文件。
如果您使用的是 Visual Studio 2012，请在解决方案资源管理器中右键单击Index.cshtml 文件，然后选择在页面检查器中查看.
页检查器教程包含了这一新工具的详细信息。
或者，运行应用程序并浏览到的
看上去很不错。但是，请注意浏览器的标题栏显示"索引我 ASP.NET A"和页面顶部的大链接说"您的徽标在这里"。下面的链接"您的徽标在这里"。 注册和日志中的链接，和下面链接到首页，约和联系页面。让我们改变其中一些。
布局模板允许您在一个地方指定站点的 HTML 容器布局，然后将其应用在您的网站中的多个网页之间。找到
更改网站标题标题中的"MVC 电影"到布局模板从"你的 logo 在这里"。
标题元素的内容替换为以下标记：
运行该应用程序，并注意它现在说的"MVC 电影"。单击 关于 链接，也可以看到该页面如何显示"MVC 电影"。我们能够一次在布局模板进行更改，在该网站上的所有页面有都反映新的标题。
现在，让我们更改索引视图的标题。
打开MvcMovie\Views\HelloWorld\Index.cshtml。有两个地方可以更改：一个是显示在浏览器标题中的文本，另一个是显示在二级标题中的文本（
若要指示显示的 HTML 标题，上面的代码设置
运行该应用程序并浏览到http://localhost:xx/HelloWorld。请注意，浏览器的标题，主标题和二级标题已更改。（如果看不到更改浏览器中的，您可能查看缓存的内容。按 Ctrl + F5 在浏览器强制从服务器加载响应）。浏览器的标题创建的
此外请注意如何Index.cshtml视图模板中的内容被合并了与_Layout.cshtml视图模板和单个 HTML 响应被发送到浏览器。布局模板，可真的很容易进行更改以应用跨所有应用程序中的页。
（在本例中的"从我们的视图模板 Hello!"消息） 中的"数据"我们一点是硬编码的不过。MVC 应用程序中有一个"V"（视图） 和你有一个"C"（控制器），但没有"M"（模型） 尚未。不久，我们就会走过如何创建数据库并从中检索模型数据。
控制器负责提供任何数据或对象必需的一个视图模板来呈现到浏览器的响应。最佳做法是：一个视图模板应永远不执行业务逻辑或与数据库直接进行交互。相反，一个视图模板应该只能使用由控制器提供给它的数据工作。保持这种"关注分离"可帮助保持您的代码的清洁、 可测试和更易维护。
目前，在
返回到HelloWorldController.cs文件和更改的
现在的
下一步，你需要一个欢迎视图模板 ！在生成菜单中，选择生成 MvcMovie ，以确保编译项目。
在
这里是添加视图对话框中的样子：
单击添加，然后将下面的代码在
运行该应用程序并浏览到以下 URL：
http://localhost:xx/HelloWorld/欢迎? 名称 = 斯科特 & numtimes = 4
现在的数据是采取从 URL 和传递给使用模型联编程序的控制器。控制器将数据打包成一个
在上面的示例中，我们使用一个
请参阅博客动态 V 强类型化视图的详细信息。
嗯，那是"M"的一种模型，但不是数据库的那种。让我们利用所学的知识来创建一个影片的数据库。
==============================翻译==============================
控制器负责提供任何数据或对象必需的一个视图模板来呈现到浏览器的响应。
最佳做法是：一个视图模板应永远不执行业务逻辑或与数据库直接进行交互。相反，
一个视图模板应该只能使用由控制器提供给它的数据工作。
保持这种"关注分离"可帮助保持您的代码的清洁、 可测试和更易维护。
这段话很重要，这样主要的业务逻辑保留在 控制器层，为以后的维护比较方便
viewbag 翻译成视图包 比较安全
viewbag 就好像我们的临时全局变量一样 可以临时存放N多的东西
在本节中，你将要修改
HelloWorldController类，以便使用视图模板文件来干净地封装生成客户端 HTML 响应的过程。
您将创建一个使用介绍与 ASP.NET MVC 3 的Razor 视图引擎的视图模板文件。基于 razor 视图模板有.cshtml文件扩展名，并提供优雅的方式来创建 HTML 输出使用的 C#。Razor 将编写视图模板所需的字符数和击键数降至最低，并使编码工作流快速、流畅。
目前该
Index方法返回一条消息，是在控制器类中硬编码的字符串。更改
Index方法，以返回一个
View对象，如以下代码所示：
publicActionResultIndex(){returnView();}上面的
Index方法使用一个视图模板来生成 HTML 响应到浏览器。控制器方法 （也称为操作方法），如上述，
Index方法通常返回一个（或从一个派生的类），不是基元类型喜欢的字符串。
在项目中，添加一个视图模板，您可以使用与该
Index方法。执行此操作，
Index方法内单击鼠标右键，并单击添加视图.
出现添加视图对话框。保留缺省值的方式并单击添加按钮：
创建的MvcMovie\Views\HelloWorld文件夹和MvcMovie\Views\HelloWorld\Index.cshtml文件。你可以看到他们在解决方案资源管理器中:
下面显示所创建的 Index.cshtml 文件：
在
<h2>标记下添加下面的 HTML 代码。
<p>Hello from our View Template!</p>
下面显示了完整的MvcMovie\Views\HelloWorld\Index.cshtml文件。
@{ViewBag.Title="Index";}<h2>Index</h2><p>Hello from our View Template!</p>如果您使用的是 Visual Studio 2012，请在解决方案资源管理器中右键单击Index.cshtml 文件，然后选择在页面检查器中查看.
页检查器教程包含了这一新工具的详细信息。
或者，运行应用程序并浏览到的
HelloWorld控制器 （http://localhost:xxxx/HelloWorld)。在您的控制器中的
Index方法没做很多工作 ；它只是执行
return View()语句，其中指定该方法应使用一个视图模板文件来呈现到浏览器的响应。因为您不显式指定要使用的视图模板文件的名称，ASP.NET MVC 中默认为\Views\HelloWorld文件夹中使用Index.cshtml视图文件。下面的图像显示的字符串"Hello 从我们的视图模板!"在视图中硬编码。
看上去很不错。但是，请注意浏览器的标题栏显示"索引我 ASP.NET A"和页面顶部的大链接说"您的徽标在这里"。下面的链接"您的徽标在这里"。 注册和日志中的链接，和下面链接到首页，约和联系页面。让我们改变其中一些。
更改视图和布局页面
第一，您想要更改"您的徽标这里."在页面的顶部标题。该文本是常见的每一页。它是实际实现的在项目中，只有一个地方即使它出现在应用程序中的每一页上。转到/Views/Shared文件夹中的解决方案资源管理器并打开_Layout.cshtml文件。此文件被称为布局页面，它是所有其他页使用共享"壳"。布局模板允许您在一个地方指定站点的 HTML 容器布局，然后将其应用在您的网站中的多个网页之间。找到
@RenderBody()行。
RenderBody是在您创建的所有视图特定的页面都出现，在布局页面中的"包装"的占位符。例如，如果您选择关于链接，在
RenderBody方法内呈现Views\Home\About.cshtml视图。
更改网站标题标题中的"MVC 电影"到布局模板从"你的 logo 在这里"。
<divclass="float-left"><pclass="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p></div>标题元素的内容替换为以下标记：
<title>@ViewBag.Title - Movie App</title>
运行该应用程序，并注意它现在说的"MVC 电影"。单击 关于 链接，也可以看到该页面如何显示"MVC 电影"。我们能够一次在布局模板进行更改，在该网站上的所有页面有都反映新的标题。
现在，让我们更改索引视图的标题。
打开MvcMovie\Views\HelloWorld\Index.cshtml。有两个地方可以更改：一个是显示在浏览器标题中的文本，另一个是显示在二级标题中的文本（
<h2>元素）。所以你可以看到哪位代码更改应用程序的哪一部分，你要让他们稍有不同。
@{ViewBag.Title="Movie List";}<h2>MyMovieList</h2><p>Hello from our View Template!</p>若要指示显示的 HTML 标题，上面的代码设置
ViewBag对象 （这是Index.cshtml视图模板中） 的
Title属性。如果你回看布局模板的源代码，您会发现该模板使用此值
<title>元素中作为我们以前修改过的 HTML
<head>节的一部分。使用此
ViewBag方法，您可以轻松地传递其他参数之间您的视图模板和您的布局文件。
运行该应用程序并浏览到http://localhost:xx/HelloWorld。请注意，浏览器的标题，主标题和二级标题已更改。（如果看不到更改浏览器中的，您可能查看缓存的内容。按 Ctrl + F5 在浏览器强制从服务器加载响应）。浏览器的标题创建的
ViewBag.Title我们在Index.cshtml视图模板和附加设置"-电影 App"在布局文件中添加。
此外请注意如何Index.cshtml视图模板中的内容被合并了与_Layout.cshtml视图模板和单个 HTML 响应被发送到浏览器。布局模板，可真的很容易进行更改以应用跨所有应用程序中的页。
（在本例中的"从我们的视图模板 Hello!"消息） 中的"数据"我们一点是硬编码的不过。MVC 应用程序中有一个"V"（视图） 和你有一个"C"（控制器），但没有"M"（模型） 尚未。不久，我们就会走过如何创建数据库并从中检索模型数据。
将数据从控制器传递到视图
不过，在转到数据库并讨论模型之前，让我们先了解一下将信息从控制器传递到视图。控制器类调用传入的 URL 请求的响应。控制器类是响应的哪里你写处理传入的浏览器的代码请求，从数据库中检索数据和最终决定何种类型发送回浏览器。查看模板然后可从控制器生成并设置其格式到浏览器的 HTML 响应。控制器负责提供任何数据或对象必需的一个视图模板来呈现到浏览器的响应。最佳做法是：一个视图模板应永远不执行业务逻辑或与数据库直接进行交互。相反，一个视图模板应该只能使用由控制器提供给它的数据工作。保持这种"关注分离"可帮助保持您的代码的清洁、 可测试和更易维护。
目前，在
HelloWorldController类中的
Welcome的操作方法需要一个
name和一个
numTimes参数，然后输出直接到浏览器的值。而不是有呈现此响应作为字符串的控制器，让我们改变的控制器，而使用一个视图模板。该视图模板将生成动态响应，这意味着你需要传递的数据的适当位从控制器到视图以便生成响应。你可以通过把视图模板需要的动态数据 （参数） 放在一个
ViewBag对象，然后，视图模板可以访问对象的控制器。
返回到HelloWorldController.cs文件和更改的
Welcome的方法，将一个
Message和
NumTimes值添加到
ViewBag对象。
ViewBag是一个动态的对象，这意味着你可以随便你向它提出 ；在添加属性之前，
ViewBag对象没有已定义的属性。ASP.NET MVC 模型绑定系统自动将地址栏的查询字符串中的命名参数（
name和
numTimes）映射到您的方法中的参数。完整的HelloWorldController.cs文件看起来像这样：
usingSystem.Web;usingSystem.Web.Mvc;namespaceMvcMovie.Controllers{publicclassHelloWorldController:Controller{publicActionResultIndex(){returnView();}publicActionResultWelcome(string name,int numTimes =1){ViewBag.Message="Hello "+ name;ViewBag.NumTimes= numTimes;returnView();}}}现在的
ViewBag对象包含将自动传递给视图的数据。
下一步，你需要一个欢迎视图模板 ！在生成菜单中，选择生成 MvcMovie ，以确保编译项目。
在
Welcome方法内右键单击然后单击添加视图.
这里是添加视图对话框中的样子：
单击添加，然后将下面的代码在
<h2>元素下添加新的Welcome.cshtml文件中。您将创建一个循环，多少倍，用户说它应该说"Hello"。下面显示了完整的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/欢迎? 名称 = 斯科特 & numtimes = 4
现在的数据是采取从 URL 和传递给使用模型联编程序的控制器。控制器将数据打包成一个
ViewBag对象，并将该对象传递给视图。视图作为 HTML 然后显示该用户的数据。
在上面的示例中，我们使用一个
ViewBag对象，将数据从控制器传递到视图。后者在本教程中，我们将使用一个视图模型将数据从控制器传递到视图。将数据传递到视图模型方法优于一般多视图袋方法。
请参阅博客动态 V 强类型化视图的详细信息。
嗯，那是"M"的一种模型，但不是数据库的那种。让我们利用所学的知识来创建一个影片的数据库。
==============================翻译==============================
控制器负责提供任何数据或对象必需的一个视图模板来呈现到浏览器的响应。
最佳做法是：一个视图模板应永远不执行业务逻辑或与数据库直接进行交互。相反，
一个视图模板应该只能使用由控制器提供给它的数据工作。
保持这种"关注分离"可帮助保持您的代码的清洁、 可测试和更易维护。
这段话很重要，这样主要的业务逻辑保留在 控制器层，为以后的维护比较方便
viewbag 翻译成视图包 比较安全
viewbag 就好像我们的临时全局变量一样 可以临时存放N多的东西
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- C# MVC 自学笔记—4 添加视图
- C# MVC 自学笔记—6 编辑方法和编辑视图
- C# MVC 自学笔记—7 将新字段添加到的电影模型和表
- C# MVC 自学笔记—2 MVC Movie简介
- C#陈广自学视频笔记5
- C# MVC 自学笔记—5 添加模型
- 徐CC , Unity +C# 自学笔记1
- C#自学快速入门经典笔记心得
- asp.net mvc在添加视图时候看不到模型类的解决办法
- C#之消息队列之自学笔记
- phonegap3.1.0自学笔记02_添加插件
- Asp.net MVC]Asp.net MVC5系列——添加视图
- Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法（mvc部分视图的添加）
- C# 实现向浏览器的兼容性视图列表中添加、删除网站和检查网站是否在兼容性网站列表中
- .net系统自学笔记——C#基础
- ASP.NET MVC学习笔记-Routing及视图引挚解析原理
- ASP.Net MVC开发基础学习笔记（3）：Razor视图引擎、控制器与路由机制学习
- vs2013中，自定义mvc 添加视图脚手架
- C# mvc中为Controller或Action添加定制特性实现登录验证