更新进度在初始页面加载时不起作用

Question

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

<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";
    }
}