【问题标题】：ViewComponents are not asyncViewComponents 不是异步的
【发布时间】：2016-03-16 00:27:24
【问题描述】：

我正在尝试使用ViewComponents.InvokeAsync() 功能，但不知何故这根本不是异步的。它正在等待组件代码呈现。 http://docs.asp.net/en/latest/mvc/views/view-components.html

我的代码与上面示例中解释的代码非常相似。我正在使用在 MVC 6 中创建新应用程序时出现的布局页面。

我认为ViewComponent.InvokeAsync() 方法将相对于主页异步呈现。但事实并非如此。为了实现这一点，我们需要按照here 的说明使用 AJAX。

【问题讨论】：

当您说“它正在等待”时，您是什么意思？也就是说，“它”是什么意思？
只有在渲染组件时页面才会渲染。我期望页面完成渲染，然后应该异步渲染组件。另外，我想有一个微调器（gif），它在组件没有被渲染之前就位。

标签： c# asp.net-core asp.net-core-mvc asp.net-core-viewcomponent

【解决方案1】：

服务器端异步不是客户端异步

服务器端异步不会在 Web 浏览器中进行部分页面呈现。以下代码将一直阻塞，直到 GetItemsAsync 返回。

public async Task<IViewComponentResult> InvokeAsync()
{
    var items = await GetItemsAsync();
    return View(items);
}

此代码将一直阻塞，直到 itemsTask 完成。

public async Task<IViewComponentResult> InvokeAsync()
{
    var itemsTask = GetItemsAsync(maxPriority, isDone);

    // We can do some other work here,
    // while the itemsTask is still running.

    var items = await itemsTask;
    return View(items);
}

服务器端异步让我们在等待其他服务器端任务完成的同时在服务器上做额外的工作。

AJAX 视图组件

要在 Web 浏览器中部分呈现页面，我们需要使用客户端 AJAX。在下面的例子中，我们使用 AJAX 调用/Home/GetHelloWorld 并在body 中渲染。

~/HelloWorldViewComponent.cs

public class HelloWorldViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        var model = new string[]
        {
            "Hello", "from", "the", "view", "component."  
        };

        return View("Default", model);
    }     
}

~/HomeController.cs

public class HomeController : Controller
{
    public IActionResult GetHelloWorld()
    {
        return ViewComponent("HelloWorld");
    }
}

~/Views/Shared/Components/HelloWorld/Default.cshtml

@model string[]

<ul>
    @foreach(var item in Model)
    {
        <li>@item</li>
    }
</ul>

~/wwwroot/index.html

<body>
<script src="js/jquery.min.js"></script>
<script>
    $.get("home/GetHelloWorld", function(data) {
        $("body").html(data);
    });
</script>
</body>

localhost:5000/index.html

【讨论】：

嗨，Shaun，我知道异步在 C# 中的作用。在上面的代码中，可以阻止组件的渲染。但我正在寻找页面的其余部分先渲染，然后再渲染组件。我在想我可以用@await component.InvokeAsync() 来实现这一点。请在这里纠正我
是的。你不能这样做。 @await 仍然是服务器端而不是客户端。把它想象成 C# 代码中的await。这只是意味着我们可以在开始任务和等待其完成之间在服务器上做其他事情。它根本不与客户交谈。
好的，误解了 ViewComponent.InvokeAsync。那么，我可以使用 AJAX 调用组件吗？任何样品都会有帮助。我想要实现的是：我有一个要在我的 XYZ 页面中使用的视图组件，但我希望该视图组件异步呈现。
是的。看起来确实可以使用 AJAX 使用视图组件。例如。 stackoverflow.com/a/32628302/1108891
感谢您的帮助。