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 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...
随机推荐
- 针对Linux 文件完整性监控的实现
针对Linux 文件完整性监控的实现 摘要 计算机和互联网是20世纪以来最伟大的发明之一,随着计算机技术的不断发展,人们的生活方式发生了巨大的变化.计算机和互联网的发展给人们的生产生活带来了极大的便利 ...
- 【需要重新整理】【mongoDB】mongoDB初见笔记
A安装(windows版): 1.官网下载安装文件 2.解压 3.配置环境变量 4.win+r cmd>打开控制台配置仓库路径 5.mongod --dbpath=d:/bigMongo//启动 ...
- Android之LinearLayout布局下怎么让按钮固定在底部
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- 网络学习笔记(三):HTTP缓存
HTTP缓存是一种保存资源副本并在下次请求时直接使用该副本的技术,合理的使用缓存可以有效的提升web性能. 浏览器将js文件.css文件.图片等资源缓存,当下次请求这些资源时,可以不发送网络请 ...
- PATA 1027 Colors In Mars
#include <cstdio> char radix[13] = {'0','1','2','3','4','5','6','7','8','9','A','B','C'}; int ...
- SHELL 中条件语句的运用 if for 条件测试语句
if条件测试语句可以让脚本根据实际情况自动执行相应的命令.从技术角度来讲,if语句分为单分支结构.双分支结构.多分支结构:其复杂度随着灵活度一起逐级上升. if条件语句的单分支结构由if.then.f ...
- leetcode的Hot100系列--136. 只出现一次的数字
因为之前刚写了461号题目,这个题目与那个很相似, 461号题目用异或来算两个不一样的部分, 那这个题目需要排除一样的部分,并找到不一样的部分. 那么可以再利用一下异或的特性: 1.相同为0,所以,a ...
- solidity智能合约如何判断地址为0或空
智能合约地址判断 在旧版本中可使用以下代码来进行比较: owner != 0x0 但如果在新版本中使用,则会提示错误信息. 那么,如何正确使用来比较地址是否为空呢. 解决方案 可以使用address( ...
- nginx实战操作(常用命令及配置)
1. nginx介绍 2. nginx常用命令 验证配置是否正确: nginx -t 查看Nginx的详细的版本号:nginx -V 查看Nginx的简洁版本号:nginx -v 启动Nginx:st ...
- 拓扑排序 (Topological Sorting)
拓扑排序(Topological Sorting) 一.拓扑排序 含义 构造AOV网络全部顶点的拓扑有序序列的运算称为拓扑排序(Topological Sorting). 在图论中,拓扑排序(Topo ...