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()两个方法必须有且仅能有一个