[转]ASP.NET MVC 5 - 视图
在本节中，你要去修改HelloWorldController类，使用视图模板文件，在干净利索地封装的过程中：客户端浏览器生成HTML。
您将创建一个视图模板文件，其中使用了ASP.NET MVC 3所引入的Razor视图引擎（Razor view engine）。Razor视图模板文件使用.cshtml文件扩展名，并提供了一个优雅的方式来使用C＃语言创建所要输出的HTML。用Razor编写一个视图模板文件时，将所需的字符和键盘敲击数量降到了最低，并实现了快速，流畅的编码工作流程。
当前在控制器类中的Index方法返回了一个硬编码的字符串。更改Index方法返回一个View对象，如下面的示例代码：
public ActionResult Index()
{
return View();
}
上面的Index方法使用一个视图模板来生成一个HTML返回给浏览器。控制器的方法（也被称为action method(操作方法) ），如上面的Index方法，一般返回一个ActionResult（或从ActionResult所继承的类型），而不是原始的类型，如字符串。
在该项目中，您可以使用的Index方法来添加一个视图模板。要做到这一点，在Views\HelloWorld 文件夹上，单击鼠标右键，然后单击“ 添加“，选择“MVC 5 View Page with (Layout Razor) “。
在”指定项名称(Specify Name for Item)“对话框，输入“Index “，然后单击“确定”。
在“选择布局页(Select a Layout Page)”对话框中，接受缺省“_Layout.cshtml”，并单击”确定“。
在上面的对话框中，左窗格中选择的是“ Views\Shared”共享文件夹布局。如果你在另一个文件夹中有一个自定义布局，你也可以选择它。稍后在本教程中，我们会谈论的布局文件。
您可以在解决方案资源管理器中看到MvcMovie\HelloWorld文件夹和已被创建的MvcMovie\View\HelloWorld\Index.cshtml文件：
添加下面的高亮标记代码。
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
在解决方案资源管理器，找到Index.cshtml文件，右键单击并选择“在浏览器中查看”。
页面检查器教程中会有更多的信息介绍这个工具。
同时，运行应用程序并在浏览器中浏览：HelloWorld控制器（http://localhost:xxxx/HelloWorld“）。在您控制器的Index方法中并没有做太多的工作，它只是执行了return View()，这个方法指定使用一个视图模板文件来Render返回给浏览器的HTML。因为您没有明确指定使用那个视图模板文件，ASP.NET MVC会默认使用\Views\HelloWorld文件夹下的Index.cshtml视图文件。下图显示了在视图文件中硬编码的字符串 "Hello from our View Template!"
看起来很不错吧。但是，请注意，浏览器的标题栏会显示为"Index- My ASP.NET Appli" 并且在页面顶部的大链接会显示为 "Application name.”。 取决于浏览器窗口的大小，您可能需要在右上角，单击“三条杠”，首页（Home），简介（About）联系（Contact）, 注册（Register）和登录（Log in）的链接。
修改视图和布局页
首先，您想要修改在页面顶部的链接 "Application name"。这段文字是每个页面的公用文字，即使这段文字出现在每个页面上，但是实际上它仅保存在工程里的一个地方。在解决方案资源管理器里找到/Views/Shared文件夹，打开_Layout.cshtml文件。此文件被称为布局页面（Layout page），并且其它所有的子页面，都共享使用这个布局页面。
布局模版允许您在一个位置放置占位所需的 HTML 容器，然后将其应用到您网站中所有的网页布局。 查找 @RenderBody(). 您所创建的所有视图页面都被"包装" 在布局页面中来显示，RenderBody只是个占位符。例如，如果您点击“关于(About)”链接，Views\Home\About.cshtml 视图会在RenderBody方法内进行Render。
在布局模板页面内修改ActionLink内容, 把网站标题从 " Application name " 修改为 "MVC Movie”，并修改控制器参数从Home为Movies.
完整的布局文件如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Movie App</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
运行应用程序，您会看到 "MVC Movie "。 单击“ 关于(About)“链接，您可以看到该页面也会显示为"MVC Movie "。 我们可以在布局模版里再修改一次，使得网站里所有网页的标题都同时被修改掉。
打开创建的 Views\HelloWorld\Index.cshtml文件，可以找到如下代码:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
上面的 Razor 代码，显示的设置了布局页面。打开 Views\_ViewStart.cshtml 文件, 它也有同样的Razor 标记代码。Views\_ViewStart.cshtml 文件定义我们使用到的所有视图的通用布局，故你也可在Views\HelloWorld\Index.cshtml文件里面，注释或删除这些代码。
@*@{
Layout = "~/Views/Shared/_Layout.cshtml";
}*@
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
你可以使用Layout属性设置一个不同的布局页面，或者设置为null指明不使用布局文件
现在，让我们来修改Index视图：
打开MvcMovie\Views\HelloWorld\Index.cshtml文件，有两个地方需要进行修改：
· 浏览器上的标题文字
· 其次，二级标题文字 (<h2>元素)。
让它们稍有不同，这样就可以看出到底程序里那部分的代码被修改了。
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
如果要指定HTML的title元素，上面的代码设置了ViewBag对象 （在Index.cshtml视图模板中） 的Title属性。如果您回去看看布局模板的源代码，您会发现该模板会输出此值倒<title>元素中，从而作为我们之前修改过的 HTML <head>里的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Movie App</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
使用此ViewBag方法，您可以轻松地从视图模板传递其它参数给布局模板页面。
运行应用程序，浏览http://localhost:xx/HelloWorld。 浏览器的标题、 主标题和二级标题都已经被修改了。（如果您在浏览器中看不到修改，有可能是页面被缓存了。按 Ctrl + F5 强制浏览器重新请求并加载服务器返回的HTML） 在Index.cshtml视图模版中设置的ViewBag.Title 输出了浏览器的标题，附加的"- Movie App"是在布局模板文件中添加的。
此外还要注意Index.cshtml视图模板中的内容是如何合并到_Layout.cshtml模板，从而形成一个完整的HTML返回到客户端浏览器的。使用布局模板页面，可以很容易进行一个修改并应用到所有页面。
我们这一点（在本例中的"Hello from our View Template!"字符串） 的"数据" 只是一段硬编码。这个MVC 应用程序有了一个"V"（视图），也有了一个"C"（控制器），但还没有"M"(模型)。不过稍后，我们将介绍如何创建一个数据库并检索数据模型。
视图是数据的展示方式，掌握这部分知识才能更好的用于MVC的开发。同时，还可以借助一些开发工具来帮助开发过程。ComponentOne Studio ASP.NET MVC 这款轻量级控件能与Visual Studio无缝集成，完全与MVC6和ASP.NET 5.0兼容，将大幅提高开发效率。
-----------------------------------------------------------------------------------------
《ASP.NET MVC 5 入门指南》12篇文章汇总如下：
4. ASP.NET MVC 5 - 将数据从控制器传递给视图
6. ASP.NET MVC 5 - 创建连接字符串(Connection String)并使用SQL Server LocalDB
8. ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)
9. ASP.NET MVC 5 - 给电影表和模型添加新字段
10. ASP.NET MVC 5 - 给数据模型添加校验器
11. ASP.NET MVC 5 - 查询Details和Delete方法
12. ASP.NET MVC 5 - 使用Wijmo MVC 5模板1分钟创建应用
希望这些文章对感兴趣的朋友有所帮助，另附上PDF版的汇总文档：
《ASP.NET MVC 5 入门指南》PDF版
[转]ASP.NET MVC 5 - 视图的更多相关文章
- ASP.NET MVC 5 - 视图
在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...
- asp.net mvc 部分视图加载区别
ASP.NET MVC 部分视图 ASP.NET(11) 版权声明:本文为博主原创文章,未经博主允许不得转载. [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 ...
- Asp.net MVC Razor视图模版动态渲染PDF，Razor模版生成静态Html
Asp.net MVC Razor视图模版动态渲染PDF,Razor模版生成静态Html 1.前言 上一篇文章我开源了轮子,Asp.net Core 3.1 Razor视图模版动态渲染PDF,然后,很 ...
- ASP.NET MVC部分视图PartialView的使用
在ASP.NET MVC项目中,部分视图PartialVieww使用很广.它实际就是在ASP.NET环境的用户自定义控件UserControl. 在控制器中,创建一个视图操作Action和一个部分视图 ...
- ASP.NET MVC Razor视图引擎攻略
--引子 看下面一段MVC 2.0的代码. <%if (Model != null){%> <p><%＝Model%></p><%}%>&l ...
- ASP.NET Mvc Razor视图语法
在ASP.NET MVC中有两套模版引擎,一套是ASPX,一套是Razor,从事过WebForms开发的朋友们,对于ASPX模版已经很熟悉了,下面我说一下我所熟悉的Razor模版引擎的一些语法,供大家 ...
- ASP.NET MVC 部分视图（转）
[部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 : 1. 可以简写代 ...
- MvcMailer通过ASP.NET MVC Razor视图和基架发送邮件
MvcMailer是一个有趣的组件,您可以使用ASP.NET MVC框架在发送邮件.很重要的是,它使用Razor视图引擎的观点作为电子邮件模板和很容易安装和使用.在本文中你将看到如何安装,设置邮件模板 ...
- 使用asp.net mvc部分视图渲染html
为了提升用户体验,一般我们采用ajax加载数据然后根据数据渲染html,渲染html可以使用前端渲染和服务器端渲染. 前端渲染 使用前端模版引擎或MVC框架,例如underscore.js的templ ...
随机推荐
- OFBiz：解析doRequest()
这里的doRequest()是指RequestHandler中的同名函数: public void doRequest(HttpServletRequest request, HttpServletR ...
- windows+Linux【Composer安装指定版本laravel】
在windows下安装的方法:(php.ini中openssl.dll扩展必须打开,且版本>=5.4) 方法一:使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运 ...
- UML基础——统一建模语言简介
到了21世纪——准确地说是2003年,UML已经获得了业界的认同.在我所见过的专业人员的简历中,75%都声称具备UML的知识.然而,在同绝大多数求职人员面谈之后,可以明显地看出他们并不真正了解UML. ...
- webservice调用的四种方式
因为数据在网络上传输都是通过xml形式的,本质都是把数据封装然后通过xml传输,接收到的也是xml文件,1 和 4 让程序员屏蔽了处理xml文件,而2 和3需要程序员自己写请求体 ,还要处理返回的xm ...
- 【Arduino】超声波模块(HC-SR04)
还好,这个模块有现成的库能够用: https://github.com/bosgood/arduino-playground/tree/master/lib/HCSR04Ultrasonic 下面仅仅 ...
- atitit. 研发管理---如何根据自己的特挑选 产业、行业、职业、岗位与自己发展的关系
atitit. 研发管理---如何根据自己的特挑选 产业.行业.职业.岗位与自己发展的关系 1. 产业及分类 1 2. 二.行业 2 3. 职业概念- 3 4. 职业划分 3 5. 职业兴趣分类 4 ...
- atitit.商业版 源码保护 与 java本地原生代码转换 的方案总结
atitit.商业版 源码保护 与 java本地原生代码转换 的方案总结 1. 为什么虚拟机语言容易被反编译 1 2. 源码泄露的问题问题 1 3. Excelsior JET 1 4. gcj.的流 ...
- 虚拟机下安装centos7方法，修改系统语言为简体中文的方法
说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 虚 ...
- C++const关键字用法
const关键字是C++新引进的关键字,目标是用于定义常量,避免C语言中使用宏定义出现的边际问题,并且const是类型安全的,即const定义的是不可修改值的变量,它是有类型的,但是宏替换只是简单的进 ...
- 替换元素节点replaceChild()
替换元素节点replaceChild() replaceChild 实现子节点(对象)的替换.返回被替换对象的引用. 语法: node.replaceChild (newnode,oldnew ) 参 ...