如何在c#中使用async和await异步显示两个方法数据答案

【问题标题】：how to show a two methods data asynchronously using async and await in c#如何在c#中使用async和await异步显示两个方法数据
【发布时间】：2019-05-25 10:24:18
【问题描述】：

我有两种方法。我需要异步显示两个动作方法数据。我希望第一个方法 viewbag 应该在 3 秒后显示在视图页面中，我需要显示第二个 viewbag 数据。实际上我有多个网络请求我必须使用。在执行所有 Web 请求之前，我不想阻塞线程或视图。我想调用单独的 rest api 并在视图中异步显示响应的每个方法。

代码

public async Task<ActionResult> Index()
    {
        Task one =   Method1();
        Task two = Method1();

        return View();
    }

    public async Task Method1()
    {

        ViewBag.method1 = "method1";

    }

    public async Task method2()
    {
        Thread.Sleep(3000);
        ViewBag.method2 = "method2";

    }
}

查看

@ViewBag.method1 <hr />
@ViewBag.method2

【问题讨论】：

从客户端发送ajax请求到服务器。延迟部分与服务器无关，它是客户端要求（除非您正在创建一些推送通知）。
我想做服务器端。我需要在视图中一一显示方法响应。
它是网络应用程序，这意味着客户端应该发送请求以获取响应。所以向/controller/action1 发送一个请求并返回一个显示来自action1 的结果的视图。比在客户端 3 秒后，向 /controller/action2 发送 ajax 请求并获取响应并将其附加到页面中的某个元素。
网络是请求/响应。一段时间后，您不会（从服务器端）自发地发送第二个响应。
这个问题与 async/await 没有任何关系。请参阅我作为答案分享的示例。

标签： c# asp.net-mvc asynchronous model-view-controller async-await

【解决方案1】：

从客户端向服务器发送 ajax 请求。延迟部分与服务器无关，它是客户端要求（除非您正在创建一些推送通知）。

它是网络应用程序，这意味着客户端应该发送请求以获取响应。因此，向/controller/index 发送请求并返回一个视图，显示来自action1 的结果RenderAction。比在客户端 3 秒后，发送一个 ajax 请求到/controller/action2 并获得响应并显示在页面的某个元素中：

HomeController

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public ActionResult Action1()
    {
        return Content("Action 1 result.");
    }
    [HttpGet]
    public ActionResult Action2()
    {
        return Content("Action 2 result.");
    }
}

索引视图

<div id="action1">
    @{Html.RenderAction("action1");}
</div>
<div id="action2">Wait for 3 seconds ...</div>

@section scripts {
    <script>
        $(() => {
            setTimeout(() => {
                $.ajax({
                    url: '/home/action2',
                    type: 'GET',
                    success: (data) => { $('#action2').html(data); },
                    error: () => { alert('Error'); }
                });
            }, 3000);
        });
    </script>
}

【讨论】：