mvc5 html view,在ASP.NET MVC 5视图上应用布局页、分部页及_ViewStart.cshtml

第1节：布局

ASP.NET MVC 5的Razor视图中。布局有助于使应用程序中的多个视图保持一致的风格，与ASP.NET Web Forms中的母版页效果是一样的。也可以将布局页理解为公共的模板。公共模板包括一个或多个占位符，视图为这些占位符提供内容。

ASP.NET MVC5布局页

现在我们在Visual Studio 2019 IDE开发工具中，详细讲解一下创建布局页和使用布局页的步骤。

第1步：布局页概述

对于使用Visual Studio 2019创建的ASP.NET MVC模版，会自动创建一些布局页。如下图所示：

ASP.NET MVC 5布局页文件

在项目根目下“Views”文件夹中的“Shared”文件夹中存放的*.cshtml文件大部分都是布局页文件，“Shared”文件夹不是必须的。布局页文件的扩展名也是*.cshtml文件。

第2步：创建布局页

现在创建一个自定义的布局页，在项目的“Views”文件夹中执行如下图所示的操作：

ASP.NET MVC 5 创建布局页

在上图的状态下选择“MVC 5布局页(Razor)”，然后输入一个布局页的名称为Main.cshtml，点击“确定”按钮完成布局页的创建。

创建好的布局页

这就是ASP.NET MVC Razor布局页，其中有一个重要的占位符就是@RenderBody()方法，相当于ASP.NET MasterPage中的ContentPlacHolder标记。用来标记使用这个布局的视图将渲染它们的主要内容的位置。那么如果多个视图都使用同一个布局页，则就可以使用这个布局显示一致的外观。

第3步：创建带布局页的视图

ASP.NET MVC 5带布局页的视图就是ASP.NET WebForm中带母版页的Web窗体，也就是内容页。主要呈现变化的内容区域，如通知、列表数据等。

现在，我们根据Main.cshtml布局页创建一个视图，该视图引用此布局页，在VS2019中创建时，要选择“带有布局的MVC5视图页”，然后选择布局页“Main.cshtml”，这样创建完成后，视图页中就会自动引用该布局页。

ASP.NET MVC 5引用布局页的视图

现在已经创建一个具有布局页的Show.cshtml视图。此视图默认什么内容也没有，现在输入一些内容，如下代码：

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

这是引用了布局页的视图

这是易发生变化的数据展示区域。

现在在Yido控制器中创建一个Show()操作方法，并返回刚才创建的视图，C#代码如下：

Namespace Yido.Edu.Controllers{public class YidoController : Controller{public ActionResult Show(){return View("~/Views/Show.cshtml");}}}

现在运行一下上面编写完成的代码，结查显示如下：

ASP.NET MVC 5运行视图结果

现在我们修改一下布局页的内容，然后再运行一下Show()方法，看会发生什么样的变化，如下图所示：

呈现布局页中的内容

在布局页中简单的添加了一些样式，再刷新一下刚才的页面，呈现出了图6的页面效果。

可见，在布局页中所做的修改，在任何其它的页面中都会生效。

第2节：_ViewStart视图

如果很多页面使用了同一个布局页，可以将这个布局放在一个名称为_ViewStart.cshtml页面中。此页面会先于任何视图执行，可以自动的应用到任何视图中。所以在视图中就不必要使用如下代码来指定布局页了：

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

默认_ViewStart.cshtml引用的是：~/Views/Shared/_Layout.cshtml视图。在前面我们创建的视图都是基于该布局视图呈现的。

可见，使用_ViewStart.cshtml确实方便很多，对于统一的外观，可以使用_ViewStart.cshtml进行统一配置，如果某个视图需要单独的布局，可以在视图中使用Layout属性重写即可。

第3节：分部视图

在ASP.NET MVC 5中，可以在一个大的视图中使用分部视图，呈现部分内容，这个分部视图与ASP.NET WebForms中的用户控件的功能是相似的。

下面是分2个步骤来完成对分部视图的创建和使用。

第1步：创建分部视图

在ASP.NET Mvc 5的项目中，在“Views”文件夹上右击，选择“MVC 5分部页(Razor)”，如下图所示：

MVC 5分部页创建

在上图中选择“MVC 5分部页”，输入一个名称为“PartialNotes.cshtml”的分部页，确定后，创建好的分部视图如下图所示：

空白分部页

默认情况下，分部视图中的内容全是空的。分部视图只是用来呈现一分部分内容。常用于AJAX技术加载部分内容。

第2步：使用分部视图

现在，我们在分部视图中添加一些内容，然后呈现在另外一个视图中，这样就能展示出分部视图的作用。

PartialNotes.cshtml分部视图中的代码如下：

这是分部视图中的内容。

现在在Show.cshtml视图中使用AJAX技术加载这个分部视图。要在视图中加载分部视图，则首先要创建一个操作方法，并返回这个分部视图，如下C#代码：

public PartialViewResult Msg(){return PartialView("~/Views/PartialNotes.cshtml");}

对于分部视图，需要使用PartialView()方法返回，一般会将分部视图使用AJAX技术加载。

对于分部视图，现在使用AJAX技术加载，在Show.cshtml视图中编写JS代码如下：

使用上面的JS代码就可以将分部视图加载到div元素中。运行一下上面的代码，让我们体会一下分部视图的加载效果：

呈现分部页中的内容

在上图中，分部视图中的内容是使用AJAX技术以异步的方式加载到Show视图中的，使用这种方式可以更加灵活的加载从其它系统中过来的数据，可以很好的整合数据并可以将多种系统中的数据同时展示在一个页面上，实现了数据整合的功能。

举报/反馈