现在的位置: 首页 > 综合 > 正文

跟互联力量学Asp.net MVC3-视图和页面模板

2012年12月15日 ⁄ 综合 ⁄ 共 1190字 ⁄ 字号 评论关闭

上一篇,《跟互联力量学Asp.net MVC3-快速入门》应该让你对MVC3有个基本的认识,我们接着看看MVC3中视图的简单用法

首先,让我们修改页面大标题中的“我的MVC应用程序”文字。这段文字是所有页面中的公共大标题,在这个应用程序中,虽然所有页面中都显示了这个共同的大标题,但只有一处地方对其进行了设置。打开解决方案资源管理器中Views文件夹下的Shared文件夹下的_Layout.cshtml文件。该文件被称为布局页面,位于公有文件夹Shared下,被所有其它网页所共用。

布局模板页允许你统一在一个地方指定整个Web应用程序或Web网站的所有HTML页面的布局方法。请注意文件底部的“@RenderBody()”代码行。@RenderBody()是一个占位符,代表了所有你创建出来的实际应用的视图页面,在这里统一指定。将布局模板文件中的“我的 MVC 应用程序”修改为“我的 MvcBooks 应用程序”。代码如下所示。

clip_image002

运行应用程序,注意网页中的大标题被修改为“我的 MvcBooks 应用程序”。点击“关于”链接,你可以看见“关于”页面中的大标题也被修改为“我的 MvcBooks 应用程序”。由此可以看出一旦修改了布局页面中的某处地方,该修改将会被应用到所有页面中。

现在,让我们修改Index视图页面的标题。

打开Views文件夹下的HelloWorld文件夹下的Index.cshtml文件。这里我们修改两处地方:首先,修改浏览器中的标题,然后修改<h2>标签中的小标题文字。修改后代码如代码清单3-3所示。

代码清单3-3 修改后的Index.cshtml视图模板文件

clip_image004

ViewBag对象的Title属性代表了显示该页面时的浏览器中的标题文字。让我们回头看一下布局模板文件,在该文件的<head>区段中的<title>标签中使用了这个值来作为浏览器中的网页标题。同时,通过这种方法,你可以很容易地在你的视图模板文件与布局模板文件之间进行参数的传递。

运行应用程序,在地址栏中输入“http://localhost:xxxx/HelloWorld”,注意浏览器中的网页标题,页面中的小标题文字都变为修改后的标题文字(如果没有发生变化的话,则可能你的网页被缓存住了,可以按Ctrl+F5键来在重新刷新页面时取消缓存)。

同时也请注意_Layout.cshtml文件中的占位符中的内容被替换成了Index.cshtml视图模板中的内容,所以浏览器中展示的是一个单一的HTML文件。浏览器中的运行结果如图3-7所示。

clip_image006

图alt: 修改了标题后的Index视图模板文件

此处,我们的数据(“这是我的第一个视图模板”文字)是被直接书写在文件中的,也就是说我们使用到了MVC应用程序的“V”(视图View)与“C”(控制器Controller)。接下来,我们讲解一下如何创建一个数据库并从该数据库中获取模型数据。

抱歉!评论已关闭.