page_load上相当简单的asp.net异步操作阻止了UI

时间:2017-04-08 18:57:01

标签: c# asp.net async-await

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

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

我不知道如何设置它(Async noob)以获得所需的结果,并希望得到一些指示!

在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);
    }

1 个答案:

答案 0 :(得分:2)

将参与者加载出Page_Load使用API​​Controller并在页面加载后使用jQuery Ajax加载数据。

API控制器示例:

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>