asp.net core mvc Partial View 应用

asp.net Core MVC支持部分视图特性,当我们在不同的项目中共享一些网页时,部分视图是非常有用的。
1、部分视图定义:
      部分视图是在一个视图中嵌套另外一个视图。在父视图中通过调用子视图并将子视图的HTML呈现给父视图。
像一般视图一样,部分视图使用.cshtml文件扩展名。
2、什么时候使用部分视图:
      部分视图是将大的视图分解成较小视图组件的一种有效的方法。能使视图元素可以重复使用。通常布局元素在_Layout.cshtml
中指定。非布局的并且可以重复的内容可以封装成部分视图。
      如果你有一个复杂的界面有不同的逻辑组成这个界面,可以将不同的逻辑抽象出来,作为部分视图,界面的不同部分都可以实现隔离。
并且整个页面也变得简单,这样一个复杂的页面就可以调用不同的partial view 来实现渲染。
      提示:我们应该遵循一条设计原则"Do not Repeat Yourself";
3、声明部分视图
      partial View的创建和别的视图创建没什么区别:您可以在View文件夹下面创建一个.cshtml文件。partial View 和常规视图没有什么区别
只是他们的渲染方式不同。您可以从控制器中返回一个ViewResult 给视图。普通视图和partial View的区别是partial View不运行_ViewStart.csthml。
(_ViewStart.cshtml 从名字就可以看出,开始一个视图,是指在呈现任何View之前都要先执行_ViewStart.cshtml文件)
4、引用一个Partial View
   在一个视图页面里面,有几种方法可以渲染一个部分视图。比较简单的方法是使用Html.Partial,它返回一个IHtmlString,可以通过使用@的前缀
来引用:
   @Html.Partial("AuthorPartial")
   PartialAsync是个异步方法
   @await Html.PartialAsync("AuthorPartial")
   可以使用RenderPartial渲染部分视图(RenderPartialAsync是异步版本)。这个方法直接返回结果,它直接以流的方式输出。
  @{
     Html.RenderPartial("AuthorPartial");
   }
   因为RenderPartial和RenderPartialAsync直接以流的形式返回,所以在性能方面是比较好,然而,在大多数场景下我们建议使用Partial和PartialAsync
5、查找一个PartialView
   当引用一个Partial View时,有如下几种方式定位一个Partial View。
   @Html.Partial("ViewName") 首先在当前目录下搜索ViewName,如果没有找到,再去Share目录查找ViewName名字。如果这两个目录下都没有
   则会报错。
   当前目录显示如下:

@Html.Partial("ViewName.cshtml")  View必须在相同目录下(根据文件全名称调用)。

如下所示调用Home文件:

显示结果如下:


  
   我们把PartialViewTest复制一份到Shered目录下,并把Home下的PartialViewTest修改成PartialViewTest1.
   测试结果如下:

显示结果如下:

下面的这两中方式可以将部分视图定义到不同的文件夹中:
   @Html.Partial("~/Views/Folder/ViewName.cshtml")根据应用程序的根目录去查找。
   @Html.Partial("/Views/Folder/ViewName.cshtml")
   @Html.Partial("../Account/LoginPartial.cshtml") 使用相对路径去定位。

6、在部分视图中访问数据

当一个部分视图被实例化时,它会得到父视图ViewData字典的副本。你可以对部分视图数据进行更新,但是不会影响到父视图数据。

当部分视图返回时,部分视图中的视图数据会发生变化。

你可以通过实例化一个ViewDataDictionary传递给部分视图:

@Html.Partial("PartialName", customViewData)

你也可以向部分视图传递一个实体:

@Html.Partial("PartialName", viewModel)

你也可以同时传递一个ViewDataDictionary和实体到部分视图:

@Html.Partial("ArticleSection", section,
            new ViewDataDictionary(this.ViewData) { { "index", index } })

下面代码将显示Views/Articles/Read.cshtml 视图,它包含两个partial views.向第二个partial view中传递了两个参数。

@{
    ViewData["Title"] = "Read";
}
@using Microsoft.AspNetCore.Mvc.ViewFeatures;
@using ViewComponentSimple.Models;
@model Article

<h2>@Model.Title</h2>
@*Pass the authors name to Views\Shared\AuthorPartial.cshtml*@
@Html.Partial("AuthorPartial", Model.AuthorName)
@Model.PublicationDate

@*Loop over the Sections and pass in a section and additional ViewData
    to the strongly typed Views\Articles\ArticleSection.cshtml partial view.*@
@{ var index = 0;
    @foreach (var section in Model.Sections)
    {
        @Html.Partial("ArticleSection", section,
                    new ViewDataDictionary(this.ViewData) { { "index", index } })
        index++;
    }
}

 运行结果如下:

原文:https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/partial

时间: 2024-10-08 11:30:37

asp.net core mvc Partial View 应用的相关文章

007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】

Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing views and layout pages 修改视图和布局页 2.Change the title and menu link in the layout file 在布局文件中修改标题与菜单 3.Passing Data from the Controller to the View 从控制器向视图

使用Visual Studio开发ASP.NET Core MVC and Entity Framework Core初学者教程

原文地址:https://docs.asp.net/en/latest/data/ef-mvc/intro.html The Contoso University sample web application demonstrates how to create ASP.NET Core 1.0 MVC web applications using Entity Framework Core 1.0 and Visual Studio 2015. Contoso University网络应用的案

ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门

原文:ASP.NET Core 入门教程 7.ASP.NET Core MVC 分部视图入门 一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Razor)强类型分部视图教程 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SDK 2.1.401 ASP.NET Core 2.1.3 IDE Visual Studio Code 1

观看杨老师(杨旭)Asp.Net Core MVC入门教程记录

观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,IoC容器 生命周期 Transient:每次被请求都会创建新的实例 Scoped:每次Web请求会创建一个实例 Singleton:一旦被创建实例,就会一直使用这个实例,直到应用停止 依赖注入好处 不用去管生命周期 类型之间没有依赖 补充: ILogger:在Microsoft.Extensions

ASP.NET Core MVC 视图

ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面所需的公共部分,如:菜单.页头.页尾等.在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的_Layout.cshtml文件: 我们通常在_Layout.cshtml中引入公共资源,如: <link href="~/css/reset.css" rel

ASP.NET MVC升级到ASP.NET Core MVC踩坑小结

原文:ASP.NET MVC升级到ASP.NET Core MVC踩坑小结 写在前面 ASP.NET Core是微软新推出的支持跨平台.高性能.开源的开发框架,它的优势不必多说,因为已经说得太多了.当然,现在依然有着数量庞大的系统运行于.NET Framework上,由于有大量的Break Changes,很多项目项目团队也不敢贸然升级,其中的考量也不全部是技术原因,更多的可能还是业务推进因素. 小编自年前开始考虑升级一套电商系统,原先是基于.NET Framework 4.5的,打算直接升级到

创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表

创建ASP.NET Core MVC应用程序(3)-基于Entity Framework Core(Code First)创建MySQL数据库表 创建数据模型类(POCO类) 在Models文件夹下添加一个User类: namespace MyFirstApp.Models { public class User { public int ID { get; set; } public string Name { get; set; } public string Email { get; se

【目录】开始使用ASP.NET Core MVC和Visual Studio

参照微软教程:Building your first ASP.NET Core MVC app with Visual Studio This series of tutorials will teach you the basics of building an ASP.NET Core MVC web app using Visual Studio. Getting started Adding a controller Adding a view Adding a model Workin

ASP.NET Core MVC/WebAPi 模型绑定探索

前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用到了,你再去看理论性的文章时才会豁然开朗,这是我一直以来学习技术的方法.本文我们来讲解.NET Core中的模型绑定. 话题 在ASP.NET Core之前MVC和Web APi被分开,也就说其请求管道是独立的,而在ASP.NET Core中,WebAPi和MVC的请求管道被合并在一起,当我们建立控