文档章节

ASP.NET MVC 5 - 视图

葡萄城技术团队
 葡萄城技术团队
发布于 2014/06/11 12:18
字数 1997
阅读 113
收藏 0

在本节中,你要去修改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)

image

在”指定项名称(Specify Name for Item)对话框,输入“Index “,然后单击“确定”。

image

在“选择布局页(Select a Layout Page)”对话框中,接受缺省_Layout.cshtml”,并单击”确定“。

image

在上面的对话框中,左窗格中选择的是“ Views\Shared”共享文件夹布局。如果你在另一个文件夹中有一个自定义布局,你也可以选择它。稍后在本教程中,我们会谈论的布局文件。

您可以在解决方案资源管理器中看到MvcMovie\HelloWorld文件夹和已被创建的MvcMovie\View\HelloWorld\Index.cshtml文件:

image

添加下面的高亮标记代码。

 

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
Hello from our View Template!

 

在解决方案资源管理器,找到Index.cshtml文件,右键单击并选择“在浏览器中查看”。

页面检查器教程中会有更多的信息介绍这个工具。

image

同时,运行应用程序并在浏览器中浏览:HelloWorld控制器(http://localhost:xxxx/HelloWorld“)。在您控制器的Index方法中并没有做太多的工作,它只是执行了return View(),这个方法指定使用一个视图模板文件来Render返回给浏览器的HTML。因为您没有明确指定使用那个视图模板文件,ASP.NET MVC会默认使用\Views\HelloWorld文件夹下的Index.cshtml视图文件。下图显示了在视图文件中硬编码的字符串 "Hello from our View Template!"

image

看起来很不错吧。但是,请注意,浏览器的标题栏会显示为"Index- My ASP.NET Appli" 并且在页面顶部的大链接会显示为 "Application name.”。 取决于浏览器窗口的大小,您可能需要在右上角,单击“三条杠”,首页(Home),简介(About)联系(Contact), 注册(Register)和登录(Log in)的链接。

修改视图和布局页

首先,您想要修改在页面顶部的链接 "Application name"。这段文字是每个页面的公用文字,即使这段文字出现在每个页面上,但是实际上它仅保存在工程里的一个地方。在解决方案资源管理器里找到/Views/Shared文件夹,打开_Layout.cshtml文件。此文件被称为布局页面(Layout page),并且其它所有的子页面,都共享使用这个布局页面。  

image

 

 

 

布局模版允许您在一个位置放置占位所需的 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=" 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>
&copy; @DateTime.Now.Year - My ASP.NET Application
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

 

运行应用程序,您会看到 "MVC Movie "。 单击“ 关于(About)链接,您可以看到该页面也会显示为"MVC Movie "。 我们可以在布局模版里再修改一次,使得网站里所有网页的标题都同时被修改掉。

image

打开创建的 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>
Hello from our View Template!

 

你可以使用Layout属性设置一个不同的布局页面,或者设置为null指明不使用布局文件

现在,让我们来修改Index视图:

打开MvcMovie\Views\HelloWorld\Index.cshtml文件,有两个地方需要进行修改:

・ 浏览器上的标题文字

・ 其次,二级标题文字 (<h2>元素)。

让它们稍有不同,这样就可以看出到底程序里那部分的代码被修改了。

 

@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
Hello from our View Template!

 

如果要指定HTML的title元素,上面的代码设置了ViewBag对象 (在Index.cshtml视图模板中) 的Title属性。如果您回去看看布局模板的源代码,您会发现该模板会输出此值倒<title>元素中,从而作为我们之前修改过的 HTML <head>里的一部分。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content=" 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返回到客户端浏览器的。使用布局模板页面,可以很容易进行一个修改并应用到所有页面。

image

我们这一点(在本例中的"Hello from our View Template!"字符串) 的"数据" 只是一段硬编码。这个MVC 应用程序有了一个"V"(视图),也有了一个"C"(控制器),但还没有"M"(模型)。不过稍后,我们将介绍如何创建一个数据库并检索数据模型。

视图是数据的展示方式,掌握这部分知识才能更好的用于MVC的开发。同时,还可以借助一些开发工具来帮助开发过程。ComponentOne Studio ASP.NET MVC 这款轻量级控件能与Visual Studio无缝集成,完全与MVC6和ASP.NET 5.0兼容,将大幅提高开发效率。

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 364
博文 506
码字总数 736540
作品 17
西安
高级程序员
私信 提问
自学MVC看这里——全网最全ASP.NET MVC 教程汇总

MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC技术的学习者提供一个整合学习入口。本文从Why,W...

葡萄城控件技术团队
2016/08/18
204
0
ASP.NET MVC 5 入门指南汇总

经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章。其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解,全文最终...

葡萄城控件技术团队
2014/06/11
0
0
ASP.NET MVC 随笔汇总

ASP.NET MVC 随笔汇总 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的。 学前篇之: ASP.NET MVC学前篇之扩展方法、链式编程 ASP.NET MVC学前篇之Lambda表达式、...

jinyuan0829
2014/08/03
0
0
ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

一、前言 1、本教程主要内容 ASP.NET Core MVC 视图引擎(Razor)简介 ASP.NET Core MVC 视图(Razor)ViewData使用示例 ASP.NET Core MVC 视图(Razor)ViewBag使用示例 ASP.NET Core NVC 视图(Ra...

ken的杂谈
11/09
0
0
ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API

ASP.NET 5.0 的主要目标之一是统一MVC 和 Web API 框架应用。 接下来几篇文章中您会了解以下内容: ASP.NET MVC 6 中创建简单的web API。 如何从空的项目模板中启动,及添加控件到应用中。 ...

葡萄城控件技术团队
2015/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker部署springboot项目

安装docker 菜鸟教程 springboot项目 maven依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001......

yimingkeji
今天
10
0
ios多个target

1.建立3个target,分别为heroone,heroone test,heroone dev;分别为正式环境,test环境,dev环境 2.注意取消掉autocreate以防止名字不对,分别以Duplicate的方式建立另外两个scheme 3.创建...

HeroHY
今天
5
0
php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部