ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
*红色字体为固定命名,蓝色为一般命名规则,黄色为ASP.NET CORE 默认查找文件名
概要:1.简单ViewComponent的用法
2.ViewComponent控制器返回值
3.注意事项
1.简单ViewComponent的用法
第一步:创建ASP.NET CORE Web应用程序,并在网站根目录创建 ViewComponents 文件夹
第二部:在ViewComponents文件夹中新建视图组件的控制器, 这儿我命名为 OnePartViewComponent 。 然后编辑该类,继承ViewComponent,实现InvokeAsync()或Invoke()方法
using Microsoft.AspNetCore.Mvc; namespace AspCoreTest.ViewComponents
{
public class OnePartViewComponent : ViewComponent
{
//public async Task<IViewComponentResult> InvokeAsync()
public IViewComponentResult Invoke()
{
ViewData["Msg"] = "别看了,我就是分布视图"; return View();
}
}
}
第三步:创建视图
在Views文件夹下新建 Components 文件夹,在该Components文件夹下建 OnePart 文件夹, 接着在该OnePart文件夹下建视图页 Default.cshtml。暂且一行代码
<h1>@ViewData["Msg"]</h1>
到此一个简单的视图组件也就创建完了
第四部:在其他页面插入我们创建的这个视图组件,这儿我选择VS自动创建的 About 页面作为演示
@{
ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
@await Component.InvokeAsync("OnePart")
<h3>@ViewData["Message"]</h3>
<p>Use this area to provide additional information.</p>
F5运行,点击About,转到About页面:

2.视图组件的控制器返回值
对于正式使用,可能会还会用到Model,在ViewComponent控制器中返回一个model。model文件夹并无明确要求,对视图组件来说,一般放在 ViewModels 文件夹下,在ViewModels 文件夹下新建 OnePart.class
namespace AspCoreTest.ViewModels
{
public class OnePart
{
/// <summary>
/// 姓名
/// </summary>
public string name { get; set; } /// <summary>
/// 性别
/// </summary>
public string sex { get; set; }
}
}
在控制器中使用该Model处理数据,并返回给视图
using Microsoft.AspNetCore.Mvc;
using AspCoreTest.ViewModels; namespace AspCoreTest.ViewComponents
{
public class OnePartViewComponent : ViewComponent
{
//public async Task<IViewComponentResult> InvokeAsync()
public IViewComponentResult Invoke()
{
ViewData["Msg"] = "别看了,我就是分布视图"; OnePart onePart = new OnePart();//声明model
//数据处理
onePart.name = "Runing";
onePart.sex = "男"; //返回model
return View(onePart);
}
}
}
在视图中使用model的数据
@using AspCoreTest.ViewModels
@model OnePart <h1>@ViewData["Msg"]</h1> <table>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>@Model.name</td>
<td>@Model.sex</td>
</tr>
</table>
OK,视图组件中使用Model大致流程就是这样,是不是感觉很简单

3.注意事项总结
a.固定命名规则:
文件夹:控制器文件夹 ViewComponents,
视图文件夹有两种选择:1.某个控制器(如:Home)专用的视图组件 {Home}/Components/{ViewComponent}/
2.全局的视图组件 Shared/Components/{ViewComponent}/
控制器:名 + ViewComponent
视图:Default.cshtml为默认查找的视图,若自定义视图名,在需要在ViewComponent控制器中返回时指定该视图即可
return View("MyView");
b.视图组件控制器中 Invoke()、InvokeAsunc()两个方法必须有且仅能有一个
ASP.NET CORE 自定义视图组件(ViewComponent)注意事项的更多相关文章
- .Net Core使用视图组件(ViewComponent)封装表单文本框控件
实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: <form class=&quo ...
- ASP.NET Core Razor 视图组件
视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...
- Asp.Net core 视图组件ViewComponent
视图组件 ViewComponent 最近用了一下视图组件,还挺方便的,如果遇到公共的部分,可以抽出来,写成视图组件,方便调用 先上图看一下效果:比如首页的4个画红框的地方是4个模块,有些地方可能要重 ...
- ASP.NET Core MVC 视图
ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...
- ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门
一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...
- asp.net core 自定义认证方式--请求头认证
asp.net core 自定义认证方式--请求头认证 Intro 最近开始真正的实践了一些网关的东西,最近写几篇文章分享一下我的实践以及遇到的问题. 本文主要介绍网关后面的服务如何进行认证. 解决思 ...
- ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门
一.前言 1.本教程主要内容 ASP.NET Core MVC 视图引擎(Razor)简介 ASP.NET Core MVC 视图(Razor)ViewData使用示例 ASP.NET Core MV ...
- asp.net core自定义端口
asp.net Core 自定义端口 官方文档 aspnet内库源码: https://github.com/aspnet dotnet系统内库源码:https://github.com/dotnet ...
随机推荐
- 【经验随笔】Java程序远程调试定位特定运行环境上出现的问题
Java后台程序远程调试 第一步:在JVM的启动参数中增加-Xdebug -Xrunjdwp:transport=dt_socket,address=6688,server=y,suspend=n 第 ...
- CentOS 6.4 配置 Hadoop 2.6.5
(以下所有文件:点此链接 里面还有安装的视频教学,我这里是亲测了一次,如有报错请看红色部分.实践高于理论啊兄弟们!!) 一.安装CentOS 6.4 在VMWare虚拟机上,我设置的用户是hadoop ...
- 利用EF Core的Join进行多表查询
背景 话说有这么一家子,老公养了一条狗,老婆养了一只猫. 数据库的设计 人表 宠物表 通过表可以知道,宠物通过Owner指向主人的Id. 问题来了,我要和故事开头一样,老公-狗,老婆-猫,对应起来,怎 ...
- Java基础知识回顾之一 ----- 基本数据类型
前言 在开始工作至今,学习各种各样的技术之中发现自己的很多Java的基础知识都忘了⊙﹏⊙b汗... 而且越是学习越是发现Java基础的重要性,所以准备单独抽一下时间进行Java基础的重新学习.在重新学 ...
- 那些年踩过的WebAPI的坑(一)
---恢复内容开始--- Visual Studio创建一个web项目, 在下一步的时候创建WebAPI项目的时候勾选web API之后,系统会生成一个web项目. 首先看一下webapi的路由配置, ...
- 关于虚拟机打开ubuntu黑屏的问题
取消勾选“加速3D图形“后重启即可.
- MSIL实用指南-创建方法和定义参数
本篇讲解实现创建方法.指定参数的名称.实现参数加out和ref修饰符.以及参数加默认值. 创建方法 创建方法用类TypeAttributes的 DefineMethod(string name, Me ...
- 简单的 Promise 实现 一
const Promise = function(fn){ let state = { pending: "pending", fulfilled: "fulfilled ...
- 一些常见的shell命令和git命令
shell命令: pwd : (Print Working Directory) 查看当前目录 cd (Change Directory) 切换目录,如 cd /etc ./当前目录 ../上级目录 ...
- 一、Android四大框架之ContentProvider的学习与运用,实现SQLite的增删改查。
本文系原创博客,文中不妥烦请指出,如需转载摘要请注明出处! ContentProvider的学习与运用 Alpha Dog 2016-04-13 10:27:06 首先,项目的地址:https:// ...