096 创建View Component01

有复杂逻辑处理情况使用View Component，只是显示一下用Partial View

示例

新建一个ASP.NET Core Empty项目，项目名称为ViewComponentsExample

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

//app.MapGet("/", () => "Hello World!");

app.UseStaticFiles();
app.UseRouting();
app.MapControllers();

app.Run();

新建文件夹wwwroot，添加StyleSheet.css

body 
{
    font-family: 'Segoe UI', Tahoma, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    background-color: #f7f7f7;
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container
{
    min-width: 500px;
}

.navbar
{
    background-color: #cacaca;
    padding: 10px;
    box-shadow: 0px 1px 2px 2px #cacaca;
}

.navbar-brand
{
    margin: 0px 30px 5px 5px;
    font-size: 1.1em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.navbar > ul
{
    list-style-type: none;
    width: 100%;
}

.navbar > ul > li
{
    width: 100%;
}

.navbar > ul > li > a:link, .navbar > ul > li > a:visited
{
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.4s;
    display: inline-block;
    margin: 0px 3px;
    color: #1383a4;
    text-decoration: none;
}

.navbar > ul > li > a:hover
{
    background-color: #fffff;
    color: #086581;
}

.nav-active
{
    background-color: #ececec;
}

.page-content
{
    padding: 10px;
    min-height: 90vh;
}

.full-size-height
{
    min-height: 100vh;
}

.table
{
    border-collapse: collapse;
    border: 1px solid #ffffff;
    padding: 5px;
    box-shadow: 0px 0px 4px 2px #e4e4e4;
    margin: 10px 0px;
    margin: auto;
}

.table thead
{
    background-color: #727774;
    color: #ffffff;
}

.table thead th
{
    padding: 5px 10px;
    text-align: left;
}

.table thead td
{
    padding: 6px 10px;
}

.table tbody tr
{
    transition: background-color 0.4s, color 0.3s;
    background-color: #efefef;
    border-bottom: 1px solid #ffffff;
}

.table tbody tr
{
    background-color: #01759d;
    color: #ffffff;
}

.w-25
{
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.text-green
{
    color: #0a8438;
}

.text-red{
    color: #ff0000;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.text-center{
    text-align: center;
}

.margin-auto
{
    margin: auto;
}

.float-left{
    float: left;
}

.clear{
    clear: both;
}

.box{
    margin: 10px 20px;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #d3d1d1;
    box-shadow: 0px 0px 3px 2px #ffffff;
}

.blue-back
{
    background-color: #9ad3f7;
}

.footer-content{
    background-color: #bfbfbf;
    color: #000000;
    padding: 20px;
    text-align: center;
}

.header{
    background-color: #055c87;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

@media screen and (min-width: 1000px)
{
    .navbar-brand
    {
        display: inline-block;
        margin-bottom: 0px;
    }

    .navbar > ul
    {
        display: inline-block;
        width:auto;
    }

    .navbar > ul > li
    {
        display: inline-block;
        width: auto;
    }

    .navbar > ul > li > a 
    {
        display: inline-block;
        width: auto;
    }
}

新建文件夹Controllers，新建HomeController.cs

using Microsoft.AspNetCore.Mvc;

namespace ViewComponentsExample.Controllers
{
    public class HomeController : Controller
    {
        [Route("/")]
        public IActionResult Index()
        {
            return View();
        }

        [Route("about")]
        public IActionResult About()
        {
            return View();
        }
    }
}

添加视图Index.cshtml

@{
    ViewBag.Title = "Home";
}

<h1>Home</h1>
@await Component.InvokeAsync("Grid")

添加视图About.cshtml

@{
    ViewBag.Title = "About";
}

<h1>About</h1>

<div>
    <p>
        丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
    </p>
    <p>
        明月几时有？把酒问青天。
    </p>
    <p>
        不知天上宫阙，今夕是何年。
    </p>
    <p>
        我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
    </p>
    <p>
        起舞弄清影，何似在人间。
    </p>
    <p>
        转朱阁，低绮户，照无眠。
    </p>
    <p>
        不应有恨，何事长向别时圆？
    </p>
    <p>
        人有悲欢离合，月有阴晴圆缺，此事古难全。
    </p>
    <p>
        但愿人长久，千里共婵娟。
    </p>
</div>

Shared文件夹添加_Layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/stylesheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="navbar-brand">View Components Demo App</div>
            <ul>
                <li><a href="~/">Home</a></li>
                <li><a href="~/about">About</a></li>
            </ul>
        </div>

        <div class="page-content">
            @RenderBody()
        </div>
    </div>
</body>
</html>

Views下添加_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

新建ViewComponents文件夹，下面新建GridViewComponent.cs

using Microsoft.AspNetCore.Mvc;

namespace ViewComponentsExample.ViewComponents
{
    [ViewComponent]
    public class GridViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {

            return View(); //invoked a partial view Views/Shared/Components/Grid/Deafult.cshtml
        }
    }
}

Shared文件夹下新建Components文件夹，在往下新建Grid文件夹，添加Default.cshtml

<h1>View Component Invoked</h1>

组件新建完成并可以使用

Gitee获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git