*红色字体为固定命名,蓝色为一般命名规则,黄色为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)注意事项的更多相关文章

  1. .Net Core使用视图组件(ViewComponent)封装表单文本框控件

    实例程序的界面效果如下图所示: 在表单中的搜索条件有姓名,学号,成绩.他们在一行中按照水平三等分排列. 在cshtml中用html实现上述表单效果的的代码如下: <form class=&quo ...

  2. ASP.NET Core Razor 视图组件

    视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响 ...

  3. Asp.Net core 视图组件ViewComponent

    视图组件 ViewComponent 最近用了一下视图组件,还挺方便的,如果遇到公共的部分,可以抽出来,写成视图组件,方便调用 先上图看一下效果:比如首页的4个画红框的地方是4个模块,有些地方可能要重 ...

  4. ASP.NET Core MVC 视图

    ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...

  5. ASP.NET Core 入门教程 6、ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  6. ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC (Razor)视图母版页教程 ASP.NET Core MVC (Razor)带有Section的视图母版页教程 ASP.NET Cor ...

  7. asp.net core 自定义认证方式--请求头认证

    asp.net core 自定义认证方式--请求头认证 Intro 最近开始真正的实践了一些网关的东西,最近写几篇文章分享一下我的实践以及遇到的问题. 本文主要介绍网关后面的服务如何进行认证. 解决思 ...

  8. ASP.NET Core 入门教程 5、ASP.NET Core MVC 视图传值入门

    一.前言 1.本教程主要内容 ASP.NET Core MVC 视图引擎(Razor)简介 ASP.NET Core MVC 视图(Razor)ViewData使用示例 ASP.NET Core MV ...

  9. asp.net core自定义端口

    asp.net Core 自定义端口 官方文档 aspnet内库源码: https://github.com/aspnet dotnet系统内库源码:https://github.com/dotnet ...

随机推荐

  1. Android 中 SearchView

    package com.example.euphemiaxiao.classsearch; import android.os.Bundle; import android.support.v7.ap ...

  2. java继承与覆写小练习

    最近学习java到了继承的部分,写个小程序用以巩固. import java.util.Scanner;//导入输入包public class testfather { public static v ...

  3. react-native简单demo:实现加载豆瓣电影列表

    https://github.com/axel10/react-native-douban' 相关随笔: react-native 开发环境搭建 http://www.cnblogs.com/axel ...

  4. leetcode【14题】Longest Common Prefix

    题目:Longest Common Prefix 内容: Write a function to find the longest common prefix string amongst an ar ...

  5. 一次SSLPeerUnverifiedException,SSLHandshakeException问题的分析

    一次SSLPeerUnverifiedException,SSLHandshakeException的问题分析   最近工作遇到一个https链接,通过pc(浏览器,curl)能正常访问,ios能正常 ...

  6. 【Unity3D与23种设计模式】单例模式(Singleton)

    GoF中定义: "确认类只有一个对象,并提供一个全局的方法来获取这个对象" 使用单例模式的前提 它只能产生一个对象且不能够被继承 单例模式的优点: 提供方便获取唯一对象的方法 可以 ...

  7. 直接删除undo及temp表空间文件后的数据库恢复一例

    前几天,某用户研发找到我,说他们的研发库坏了,问我能恢复不?我问他们做了什么操作,一个小男孩儿说,看到空间满了,清除了点儿数据,我说是不是连数据库的文件也清除了,他说没有,他清除的是ORACLE_HO ...

  8. input依次输入密码

    原理: 一个真正的可以输入的input框,opacity: 0,设定位层级:(视图不可见的) 再来6(n)个input,readyonly,用来显示,type为password,设置好样式:(视图可见 ...

  9. C/S 和B/S 详解 --- 2017-04-25

    来源:脚本之家 一.C/S 架构 1. 概念 C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两 ...

  10. 网站转变风格的css变化

    网站换肤,是一个比较老的话题了,理论很清晰,就是要根据js 来变换文件加载的css文件,根据需求来加载不同的css文件,有了这个基础就很明确要怎么做了,但是实际上还要记录当前用户的cookie  保证 ...