Asp.Net Core MVC利用视图组件和JQuery动态加载列表

首先我们先创建视图组件的视图模型，在项目根目录下面创建ViewModels文件夹,该文件夹为项目的视图模型文件夹，然后在视图模型文件夹（ViewModels）下面创建PostListModel模型类，代码内容为

    public class PostListModel
    {
        public IList<string> Post { get; set; }
    }

然后手动创建视图组件的cshtml文件（视图）所在的文件夹。在项目根目录Views下面的Shared文件夹，新建Components文件夹。

我们要创建的名为PostList的视图组件，所以在刚才创建的Components文件夹下面创建PostList文件夹，然后在PostList文件夹下面创建Default.cshtml文件。

Default.cshtml文件的内容为

@using WebApplication2.ViewModels;
@model PostListModel
<h2>发帖列表</h2>
@foreach(string item in Model.Post)
{
    <h3>帖子标题:@item</h3>
}

然后我们来创建视图组件的组件控制器文件夹，在项目的根目录下面创建ViewComponents文件夹。

我们在组件控制器文件夹新建PostList组件类

 

 public class PostList : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(string Id)
        {
            if(Id.IndexOf("aa") >= 0)
            {
                PostListModel model = new PostListModel();
                model.Post = new List<string> {
                    "帖子标题1",
                    "帖子标题2",
                    "帖子标题3",
                    "帖子标题4",
                    "帖子标题5"
                };
                return View(model);
            }
            return View();
        }
    }

在Blog控制器中添加名为GetPostList的Action

        public IActionResult GetPostList()
        {
            return ViewComponent("PostList", new { Id = "aa"});
        }

然后在Blog首页添加如下代码

<div class="post-list"></div>
<button class="get-post" type="button">Click!</button>

然后在首页添加如下JQuery特效代码

<script type="text/javascript">
    var url = '/Blog/GetPostList';
    $('.get-post').click(
        function ()
        { 
            $('.post-list').load(url);
        }
    );
</script>

点击首页的Click!按键，及可自动加载列表，如下图