asp.net - UpdateProgress 在初始页面加载时不起作用

Question

我需要做什么才能使我的 updatePanel 中的 UpdateProgress 在初始页面加载时显示？在您对同一页面上的更新面板等中的网格进行排序后，它工作正常，但在初始页面加载时却没有。我能做些什么？这是我的代码示例。我的代码隐藏中没有任何代码，所以这可能是我不确定的一些问题。

<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
    <ProgressTemplate>
        <div id="postback-loader">
         <img src="Images/ajax-loader-blue.gif" style="margin:11px auto;display:block;" /><br />
         <asp:Label ID="Label1" runat="server" Text="Loading Computers..." Width="170px"></asp:Label>
        </div>                   
    </ProgressTemplate>
</asp:UpdateProgress>

Answer 1

您需要将控制权返回给页面，然后执行部分回发以使用 jQuery 来更新 UpdatePanel 的内容来初始化回发。

这是我拼凑的一个简单示例：

标记

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            __doPostBack('<%=UpdatePanel1.ClientID %>');
        });
    </script>
    <form id="form1" runat="server">
    <div>
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div id="postback-loader">
                <img src="Images/ajax-loader-blue.gif" style="margin: 11px auto; display: block;" /><br />
                <asp:Label ID="Label1" runat="server" Text="Loading Computers..." Width="170px"></asp:Label>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</form>

代码背后

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        TextBox1.Text = "First Load";
}

protected void UpdatePanel1_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        Thread.Sleep(10000);
        TextBox1.Text = "Finished";
    }
}