使用 javascript 调用 ViewComponents

Question

我正在尝试使用 javascript 调用 ViewComponent 以促进页面加载，现在我使用 razor 调用了 viewcomponent 但页面加载需要很长时间，该怎么做？

这是控制器中的方法：

public async Task<IViewComponentResult> InvokeAsync(string id)
{
    //var notifications = _context.Notifications.Include(m => m.ApplicationUser).Include(m => m.Sender).OrderByDescending(m => m.Id);

    return View(await _context.Follows.Include(f=>f.User.University).Include(f=>f.User.Faculty).Where(n=>n.FollowedUserId==id).ToListAsync());
}

和方法调用（jQuery）：

<script>
    $(document).ready(function () {
        $('#viewallfollowers').click(
            function () {

                $("#followersrefresh").load("@await Component.InvokeAsync("Follower", new { id=Model.ApplicationUser.Id })");

              });
    });
</script>

Answer 1

View 组件本质上是一个 razor 页面，一个 razor 页面在运行时呈现 html。因此，您不能使用 js 调用它。但是，您可以重定向到控制器中的 get 操作并返回视图组件。检查类似的SO：

Invoke ViewComponent using javascript

Answer 2

ViewComponent不能直接在js中的InvokeAsync中加载，它会在你的页面加载时获取对应的html，而不是在点击事件触发的时候，所以你的页面会加载很长时间，那是你的一个错误js.

为了实现点击事件加载viewcomponent视图，需要在点击事件中使用ajax get request向控制器申请viewcomponent的return the html代码。

控制器：

 public IActionResult GetMyViewComponent(string uid)
        {
            return ViewComponent("Follower", new { id = uid});//it will call Follower.cs InvokeAsync, and pass id to it.
        }

查看：

@model WebApplication_core_mvc.Models.MyCompModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>

@section Scripts{
    <script>
   $(document).ready(function () {
        $('#viewallfollowers').click(function () {
            {
                $("#followersrefresh").empty();
                var _url = '@Url.Action("GetMyViewComponent", "Home")';
                $.ajax({
                    type: "GET",
                    url: _url,
                    data: { uid: $(this).prop("name") },
                    success: function (result) {
                        $("#followersrefresh").html(result);
                    },
                });
            }
        });
    });
    </script>
}
<input id="viewallfollowers" type="button" value="button" name="@Model.ApplicationUser.Id"/>
<div id="followersrefresh" >
</div>

ViewComponents.Follower.cs：

 public class Follower : ViewComponent
    {
        private readonly MyDbContext _context;
        public Follower(MyDbContext context)
        {
            _context = context;
        }
        public async Task<IViewComponentResult> InvokeAsync(string id)
        {
            return View(await _context.Follows.Include(f=>f.User.University).Include(f=>f.User.Faculty).Where(n=>n.FollowedUserId==id).ToListAsync());
        }
    }

这是测试结果：