Asp.net MVC]Asp.net MVC5系列——布局视图

目录

系列文章

概述

布局视图

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一个项目

[Asp.net MVC]Asp.net MVC5系列——添加视图

[Asp.net MVC]Asp.net MVC5系列——添加模型

[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据

[Asp.net MVC]Asp.net MVC5系列——添加数据

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

[Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图

[Asp.net MVC]Asp.net MVC5系列——Razor语法

[Asp.net MVC]Asp.net MVC5系列——Routing特性

概述

由于前段时间,项目一直吃紧,mvc的学习中断了,周末了,心里一直惦记这事,很早就起来了,把之前写的文章看了一遍,以便找到再次入手的地方,想开始,就想着最近的lync项目的管理端有用到asp.net的模版MasterPage,那就顺便就说说asp.net mvc 中的布局视图吧。目前项目告一段落,个人正在将lync的群组空间,使用mvc进行改写。

布局视图

新建一个mvc5项目,你会在Views目录下看到一个shared的文件夹,其中视图_Layout.cshtml就是布局视图,类似于webform中的Masterpage。如下图所示,

新建一个内容视图,来应用该布局视图,如图所示,

使用布局页后,会在视图中生成如下代码,每一个视图通过使用Layout属性指定它的布局:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

如果每个视图,应用同一个布局,就会产生冗余的代码,并且难以维护,上面第一张图中你也看到了有个_ViewStart.cshtml的视图,该视图非常简单,只有一句代码,指定默认的布局:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

这个文件中的代码优先于同目录下的任何视图代码的执行。这个文件也可以递归地应用到子目录下的任何视图。

由于这个代码优先于任何视图的运行,所以一个视图可以重写Layout属性的默认值,从而重新选择一个不同的布局。如果一组视图拥有共同的设置,那么_ViewStart.cshtml文件的好处就体现出来了,因为我们可以在它里面对共同的视图配置进行统一的设置。如果有视图要覆盖统一的的设置,我们只需要修改对应的属性值值即可。

如果不想应用模板页,则指定Layout属性为null即可。

在_Layout.cshtml布局视图中,你总可以找到类似下面的代码:

   <div class="container body-content">
        @RenderBody()
   </div>

@RenderBody()是一个占位符,用来标记使用这个布局的视图将渲染它们的主要内容的位置,如果您哟webform基础,你它的功能就类似于webform中的ContentPlaceHolder,但是跟ContentPlaceHolder还是有区别的,webform中ContentPlaceHolder根据id的不同可以有多个,但是@RenderBody()有且只能有一个。

那如果我们想在内容页中使用引用的资源,比如css或者js怎么办?

在webform中我们通常是这样做的

MasterPage中

   <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

应用该模版的webform内容页

1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
2  <script type="text/javascript" src="../js/zTree/jquery-1.4.4.min.js"></script>
3
4 </asp:Content>

在Asp.net mvc中是这样处理的

@RenderSection

用于在模板布局中定义一个区域,在内容页可以定义一些内容来填充这个区域,例如内容页中引用的JS文件,可以填充到模板页的section位置。每个内容页的单独一些信息,可以在模板页中这个区域显示。

@RenderSection有两个参数,第一个参数用于定义section的名称,第2个参数是布尔类型,如果为true,表示内容页必须定义这个section,如果为false,则表示内容页可定义section,也可以不定义。

例如在布局页中这样写

<head>
 @RenderSection("script",false);
</head>

在使用该布局的视图中

1 @section script{
2     <script type="text/javascript" src="../js/ParameterConfigJs.js"></script>
3     }

@RenderPage

另外也可以使用 @RenderPage进行布局

用于表示在一个页面中呈现另一个页面的内容.参数指定要呈现的网页的位置。

我们在Shared文件夹下面新建一个footer.cshtml文件,然后里面写上版权信息,然后在模板页中用来呈现footer页面,如下:

1 <footer>
2             <p>@RenderPage("~/Views/Shared/footer.cshtml")</p>
3 </footer>

@Html.Partial()与Html.RenderPartial()

分部页也可以达到布局的目的。

这两个方法可以用来输出一个分部页,右键添加新建项,选择MVC5分部页,就可以添加一个分部页,相当于webform中用户控件页。

@Html.Partial()的参数为用户控件名称,也就是分部页名称,返回值为string类型,可以直接输出。

@Html.RenderPartial()的参数也为用户控件名称,返回值为void,调用的时候直接把内容输出到Response中。

例如:

1             @Html.Partial("_PartialDeptTree")
2             @{
3                 Html.RenderPartial("_PartialDeptTree");
4             }

可以将组织结构数放在分布视图中来用。

时间: 2024-10-11 04:53:19

Asp.net MVC]Asp.net MVC5系列——布局视图的相关文章

Asp.net MVC]Asp.net MVC5系列——添加视图

目录 概述 添加视图 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列--第一个项目 概述 在这一部分我们添加一个新的控制器HelloWorldController类,以便使用视图来向客户端展示HTML格式的响应结果. 我们将使用Razor视图引擎创建一个视图.Razor视图模板以.cshtml扩展名结尾,它提供了一种简洁的方式来创建HTML输出流.Razor视图大大减少了在书写视图模板文件时所需要输入的字符,提供了一个最快捷,最简便的编码方式. (注意:之前版本的asp.

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列——添加数据 概述 上篇文章中介绍了添加数据,在提交表单的数据的时候,我们需

Asp.net MVC]Asp.net MVC5系列——在模型中添加

目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列--第一个项目 [Asp.net MVC]Asp.net MVC5系列--添加视图 [Asp.net MVC]Asp.net MVC5系列--添加模型 [Asp.net MVC]Asp.net MVC5系列--从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列--添加数据 概述 上篇文章中介绍了添加数据,在提交表单的数据的时候,我们需

Asp.net MVC]Asp.net MVC5系列——Razor语法

目录 概念 Razor语法 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列--第一个项目 [Asp.net MVC]Asp.net MVC5系列--添加视图 [Asp.net MVC]Asp.net MVC5系列--添加模型 [Asp.net MVC]Asp.net MVC5系列--从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列--添加数据 [Asp.net MVC]Asp.net MVC5系列--在模型中添加验证规则 [Asp.net

[Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图

目录 概述 实现信息的明细视图 实现信息的编辑视图 实现信息的删除视图 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列——添加数据 [Asp.net MVC]Asp.net MVC5系列

[Asp.net MVC]Asp.net MVC5系列——添加数据

目录 概述 显示添加数据时所用表单 处理HTTP-POST 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据 概述 上篇文章介绍了如何通过控制器访问模型中的数据,在本节中我们将要在数据库中追加并保存一些数据.我们将要创建一个表单以及一些表单输入

[Asp.net MVC]Asp.net MVC5系列——添加模型

目录 概述 添加模型 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 概述 在本节中我们将追加一些类来管理数据库中的学生信息.这些类将成为我们的MVC应用程序中的“模型”部分. 在vs2013中EF的版本为(Entity Framework)EF6,我们将使用EF6来进行对学生信息的维护,顺便也学习一下EF6的增删改查. 添加模型 在解决方案资源管理器中,鼠标右击Models文件夹,点击“添

[Asp.net MVC]Asp.net MVC5系列——第一个项目

目录 概述 创建第一个项目 添加控制器 总结 概述 本教程是个人一步一步学习的总结,希望能帮到正在进入ASP.Net MVC5方向的朋友,个人也是准备进入ASP.NET MVC5领域,虽然艰辛,但是乐此不彼.谁让咱喜欢编程呢?之前接触过ASP.NET MVC4,今天在看发现差别还是有的,不管是使用IDE创建方式,还是使用方式有些地方的确不一样了.手上也没有ASP.NET MVC5的教程,只能看着英文网站,一步一步摸索了.其实我是一直想使用mvc,可事与愿违啊,到目前还是使用的webform. 创

[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据

目录 概述 从控制器访问模型中的数据 强类型模型与@model关键字 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 概述 上篇文章介绍了如何添加Model,在这篇文章中,我们将通过控制器访问模型中的数据,还有有写朋友问我,这么简单的东西有必要分享吗?其实有些东西真的很简单,没必要分享,但是这也是我学习的历程,希望记录自己是