c# - page_load 上相当简单的 ASP.NET 异步操作会阻塞 UI

Question

我有一个简单的页面，其中包含事件列表。单击按钮时，需要转到“与会者”页面并加载该事件的人员。

目前发生的情况是，单击按钮后，事件页面将保持可见，直到所有与会者处理完成并完成，然后显示结果。我希望它首先显示第一个异步调用的事件名称，然后页面上的进度栏可以显示正在构建的与会者列表。如果我直接使用查询字符串中的事件 ID 加载“参加者”页面，它将按需要显示事件名称且进度条正常工作。

我不知道如何设置它(异步菜鸟)以获得所需的结果，并且希望得到一些指示!

在 events.aspx.cs 按钮单击处理程序中:

Response.Redirect("Attendees.aspx?eventID=" + eventID, false);

然后在 attendees.aspx.cs Page_Load 中:

    protected void Page_Load(object sender, EventArgs e)
    {
        processEvent(); 
        //I've tried this with .Wait() at the end too
    }

    private async Task<bool> processEvent()
    {
        try
        {
            EFEventDetails efEvent = await getEventByIdAsync();
            if (efEvent.responseCode != 200) //only 200 is a valid response code for a found event
            {
                pnl_loadingError.Visible = true;
                pnl_attendees.Visible = false;
            }
            else
            {
                //valid event - carry on. Display event name on page.
                lbl_EventHeader.Text = efEvent.data.eventID.ToString() + " - " + efEvent.data.eventName;

                //Now get list of attendees
                List<vmAttendees> res = await getAttendeesAsync();
                if (res.Count > 0)
                {
                    pnl_AttendeeList.Visible = true;
                    rpt_AttendeeList.DataSource = res;
                    rpt_AttendeeList.DataBind();
                }

            }

        }
        catch (Exception ex)
        {

            lbl_Result.Text = ex.Message;
            lbl_Result.ForeColor = System.Drawing.Color.Red;
            pnl_processResult.Visible = true;
        }

        return true;
    }

    protected async Task<EFEventDetails> getEventByIdAsync()
    {
        var eventsForceService = new EventsForceService(_eventsForceRepo);
        return await eventsForceService.getEventByIdAsync(_eventID);
    }

    protected async Task<List<vmAttendees>> getAttendeesAsync()
    {
        var eventsForceService = new EventsForceService(_eventsForceRepo);
        return await eventsForceService.GetAttendeesByEventIDAsync(_eventID);
    }

Answer 1

从 Page_Load 中加载与会者，使用 APIController 并在页面加载后使用 jQuery Ajax 加载数据。

API Controller 示例:

public class AttendeesController : ApiController
{
    Attendee[] attendees = new Attendee[] 
    { 
        new Attendee { Id = 1, Name = "Mike" }, 
        new Attendee { Id = 2, Name = "Steve" }, 
        new Attendee{ Id = 3, Name = "Diane" } 
    };

    public IEnumerable<Attendee> GetAllAttendees()
    {
        // This is using a premade list of Attendees 
        // but you would get them here and return them

        // Will convert to JSON automatically
        return attendees;
    }
}

AJAX 负载

<script type="text/javascript">
    $.get( "Attendees/GetAllAttendees", function( data ) {
        // Load the data into the page after it returns
        $( ".result" ).html( data );
        alert( "Load was performed." );
    });
</script>