ASP.NET Core MVC 之局部视图(Partial Views)
1.什么是局部视图
局部视图是在其他视图中呈现的视图。通过执行局部视图生成的HTML输出呈现在调用视图中。与视图一样,局部视图使用 .cshtml 文件扩展名。当希望在不同视图之间共享网页的可重用部分时,就可以使用局部视图。
2.什么时候使用局部视图
局部视图是将大视图分成小组件的有效方法。通用的布局元素应在 _Layout.cshtml 中指定,非布局可重用内容可以封装成局部视图。
如果一个由几个逻辑部分组成的复杂页面,那么将每个逻辑部分作为局部视图是很有用。布局视图与普通视图之间没有语义差别,它们只是以不同的方式呈现。你可以直接从控制器的 ViewResult 返回视图,而这个视图也可以当局部视图来用。视图和局部视图的主要区别是呈现方式不同,局部视图不运行 _ViewStart.cshtml,而视图运行。
3.引用局部视图
在视图页面中有几种方法呈现局部视图。最简单的是使用 Html.Partial ,它通过 @ 前缀来调用并返回 IHtmlString : @Html.Partial("AuthorPartial")。
PartialAsync 方法对包含异步代码的局部视图是可用的: @await Html.PartialAsync("AuthorPartial") 。
还可以使用 RenderPartial 方法来呈现局部视图。这个方法不返回结果:它将渲染结果直接输出到响应中。正因为它不返回响应,所以必须在 Razor 代码块中调用。通用也有一个异步方法 RenderPartialAsync:
@{
Html.RenderPartial("AuthorPartial");
}
4.发现局部视图
当引用局部视图时,可以通过多种方式找到它的位置:
//以视图名使用当前文件夹下的视图,如果没有找到,则搜索Shared 文件夹
@Html.Partial("ViewName") //这个名称的视图必须在相同文件夹下
@Html.Partial("ViewName.cshtml") //依据应用根路径定位视图,以“/” 或 “~/” 开头的路径表示应用根路径
@Html.Partial("~/Views/Folder/ViewName.cshtml") //使用相对路径
@Html.Partial("../Account/ViewName.cshtml")
局部视图可以链接。也就是说,一个局部视图可以调用另一个局部视图(只要不创建循环)。
5.局部视图访问数据
当局部视图被实例化时,它获取父视图的 ViewData 字典的副本。对局部视图中的数据所做的更新不会影响到父视图。局部视图返回时,局部视图中更改的 ViewData 将丢失。
你可以将 ViewDataDictionary 的实例传递到局部视图: @Html.Partial("PartialName",customViewData) 。
也可以将模型传递到局部视图:@Html.Partial("PartialName",viewModel) 。
也可以将ViewDataDictionary 和 模型都传递到视图:@Html.Partial("PartialName",viewModel,customViewData) 。
6.简单实战
先创建用到的模型:
namespace MVCTest.Models
{
public class Article
{
public Article()
{
Sections = new List<ArticleSection>();
}
public string AuthorName { get; set; }
public List<ArticleSection> Sections { get; set; }
}
public class ArticleSection
{
public string Title { get; set; }
public string Content { get; set; }
}
}
然后在控制器中实例化模型:
public class ArticleController : Controller
{
// GET: Article
public ActionResult Index()
{
var article = new Article();
article.AuthorName = "test";
article.Sections.Add(new ArticleSection() { Title="title",Content="content"});
return View(article);
} }
父视图:
@model MVCTest.Models.Article
@{
ViewData["Title"] = "Index";
}
<h2>@Model.AuthorName</h2>
@Html.Partial("AuthorPartial",Model.AuthorName);
@foreach (var section in @Model.Sections)
{
@Html.Partial("ArticleSection", section);
}
AuthorPartial.cshtml:
@model string <h3>@Model</h3>
ArticleSection.cshtml:
@model MVCTest.Models.ArticleSection <h3>@Model.Title</h3>
<h2>@Model.Content</h2>
ASP.NET Core MVC 之局部视图(Partial Views)的更多相关文章
- ASP.NET Core MVC 之视图(Views)
ASP.NET Core MVC 控制器可以使用视图返回格式化的结果. 1.什么是视图 在 MVC 中,视图封装了用户与应用交互呈现细节.视图是具有生成要发送到客户端内容的,包含嵌入代码的HTML模板 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 12. Views 下
ASP.NET Core MVC 13. 安装前端库 Partial VIew 就是部分View,他没有自己的数据,数据来自图中白色的那块,它的数据需要传进去,第一个参数是View的名称,第二个参数就 ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...
- ASP.NET Core MVC 之布局(Layout)
1.什么是布局 布局通常包含常见的用户界面元素,例如应用头,导航或菜单元素和页脚,如图: 常见的HTML结构(例如脚本和样式表)也经常被应用程序中许多页面使用.所有这些共享元素都可以在布局中定义,然后 ...
- Working with Data » 使用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 applica ...
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...
- ASP.NET Core 入门教程 7、ASP.NET Core MVC 分部视图入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)分部视图简介 ASP.NET Core MVC (Razor)分部视图基础教程 ASP.NET Core MVC (Raz ...
- 观看杨老师(杨旭)Asp.Net Core MVC入门教程记录
观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,I ...
- ASP.NET Core MVC 之视图组件(View Component)
1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...
随机推荐
- Shell学习笔记2》转载自runnoob
学习且转载地址:http://www.runoob.com/linux/linux-shell-passing-arguments.html 这个网站整理的的确不错,看着很清晰,而且内容也很全面,个人 ...
- 使用docker运行GitLab
从docker镜像拉取代码,docker pull gitlab/gitlab-ce:latest. 创建/srv/gitlab目录sudo mkdir /srv/gitlab 启动GitLab CE ...
- 第七章 手动部署Fisco Bcos 区块链并完成新增群组,在原有群组中新增机构
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 目标 1.新增群组搭建完整联盟链 2.根据群组新 ...
- Codeforces 755E:PolandBall and White-Red graph(构造+思维)
http://codeforces.com/contest/755/problem/E 题意:给出n个点和一个距离d,让你在这个n个点的图里面构造一个子图,使得这个子图的直径和补图的直径的较小值为d, ...
- 性能测试即服务-docker部署jmeter及.netcore应用
前言 现在各种业务都追求上云,通俗的讲,“XX即服务”,作为一名专职的性能测试调优人员的我,由于会点三脚猫的开发功夫,“性能测试即服务”这种开发大任就落到我头上了,先做一个能完成核心压测功能的基础版. ...
- sqlserver、oracle数据库排序空值null问题解决办法
转:https://www.cnblogs.com/pacer/archive/2010/03/02/1676371.html [sqlserver]: sqlserver 认为 null 最小. 升 ...
- Pandas Series 与 DataFrame 数据创建
>>> import pandas as pd >>> import numpy as np >>> print(np.__version__), ...
- CDQZ集训DAY8 日记
又一次翻车…… 先提一句昨晚的事.昨天晚上身后一帮成都七中的人用十分戏谑的语气交出了达哥的名字,看着NOI2017的获奖名单,如果他们真的是在嘲笑的话,真的挺想上去干他们一顿的…… 上午考试第一题一脸 ...
- Element-ui DatePicker显示周数
1.场景描述 我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数.刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显 ...
- Spring Cloud使用Zuul网关时报错
当开启了Eureka集群后,每创建一个服务都要往这两个集群中进行注册否则访问时会产生500