您的位置：首页 > 编程语言 > ASP

Asp.Net core 视图组件ViewComponent

2018-03-28 09:35 816 查看

视图组件 ViewComponent

最近用了一下视图组件，还挺方便的，如果遇到公共的部分，可以抽出来，写成视图组件，方便调用
先上图看一下效果：比如首页的4个画红框的地方是4个模块，有些地方可能要重复用到，那么我们用视图组件就很方便。

开始编码步骤

: 第一步，先新建一个项目

原项目中不是包含Components文件夹的，这个是我自己后加上的，创建好Web项目后，添加文件夹Components

: 第二步，添加视图组件类

创建类过程中，必须要以Name+ViewComponent.cs 为规范，name是自己可以谁意写的名称，此类还必须继承

ViewComponent

类，才能实现。接下来在看代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace demoViewComponents.Components
{
public class OneViewComponent : ViewComponent
{
/*
如果需要构造函数的话，你就创建
*/
/// <summary>
/// 构造函数
/// </summary>
public OneViewComponent()
{

}
/// <summary>
/// 异步调用
/// </summary>
/// <returns></returns>
public async Task<IViewComponentResult> InvokeAsync()
{

return View();
}

}
}

这里说明一下，之前是可以加` public IViewComponentResult Invoke()
{
return View();
} 这个方法，但是现在好像加不了，只能用异步方法，加了会报错，请测试

: 第三步，添加视图页面

必须在Shard文件夹下创建名称为Components的文件夹，再在此文件夹下创建视图组件类的前缀名称Name，如Four文件夹，一般会在此Four文件夹下创建默认的Default.cshtml 页面，如上图所示。也可自己指定名称，不过要在

InvokeAsync

方法中返回

return View("three");

视图的名称，例如Three的视图组件，代码如下：

namespace demoViewComponents.Components
{
public class ThreeViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
return View("three");
}
}
}

: 第四步，页面加载视图组件

<div class="row">
@await Component.InvokeAsync("One")

@await Component.InvokeAsync("Tow")

@await Component.InvokeAsync("Three")

@await Component.InvokeAsync("Four")

</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航