如何在 asp.net 中的初始页面加载时触发 UpdateProgress答案

【问题标题】：How to trigger UpdateProgress on initial pageload in asp.net如何在 asp.net 中的初始页面加载时触发 UpdateProgress
【发布时间】：2014-02-28 14:49:34
【问题描述】：

问题： 为什么我的 UpdateProgress 在初始页面加载期间不显示，但通过按钮单击进行后续回发？

我设法让它工作的唯一方法是使用计时器，我并不热衷于此。还有其他方法吗？

有人能解释一下为什么doSearch() 会导致更新进度通过按钮单击而不是通过文档准备好的页面加载来工作吗？

代码：

Js 处理程序：

<script>
    $(document).ready(doSearch);

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>

aspx:

//if i click this button the updateprogress works
//and the panel loads
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="form-control"  
 OnClientClick="return doSearch();"  />

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
    OnLoad="UpdatePanel1_Load" ChildrenAsTriggers="true">
    <ContentTemplate>
        <asp:Button ID="UpdatePanel1Trigger" runat="server" 
               style="display:none" OnClick="UpdatePanel1Trigger_Click" />
        <%--gridview that takes a while to load--%>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">
    <ProgressTemplate>
        <asp:Image ID="imgUpdateProgress1" runat="server" 
        ImageUrl="~/Images/spinner.gif" AlternateText="Loading ..." ToolTip="Loading ..."/>
    </ProgressTemplate>
</asp:UpdateProgress>

代码隐藏：

    protected void UpdatePanel1Trigger_Click(object sender, EventArgs e)
    {
        if (!String.IsNullOrEmpty(m_search))
        {
            performSearch(); //loads data for gridview in updatepanel
        }
    }

【问题讨论】：

标签： c# javascript asp.net asp.net-ajax updatepanel

【解决方案1】：

我想我终于找到了它：

<%@Page Language="VB" AutoEventWireup="false"
         CodeFile="prueba.aspx.vb" Inherits="Programación_prueba" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
  <asp:UpdateProgress runat="server" ID="PageUpdateProgress">
    <ProgressTemplate>
      Loading...
    </ProgressTemplate>
  </asp:UpdateProgress>
  <asp:UpdatePanel runat="server" ID="Panel">
    <ContentTemplate>
      <asp:Button runat="server" ID="UpdateButton" OnClick="UpdateButton_Click" Text="Update"/>
      <asp:Timer runat="server" ID="UpdateTimer" Interval="5000" OnTick="UpdateTimer_Tick"/>
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick"/>
    </Triggers>
  </asp:UpdatePanel>
</form>
</body>
</html>

这是后面的代码：

Partial Class Programación_prueba
    Inherits System.Web.UI.Page

    Protected Sub UpdateButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdateButton.Click
        System.Threading.Thread.Sleep(3000)
    End Sub

    Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdateTimer.Tick
        Me.UpdateButton_Click(Me.UpdateButton, Nothing)
    End Sub
End Class

非常感谢所有的想法。奥雷里奥·J·马尔多纳多

【讨论】：

你能解释一下你改变了什么（以及为什么）吗？

【解决方案2】：

可能是 jQuery 库干扰 MS AJAX 库的方式。尝试强制它显示：

<script>
    $(document).ready(function() {
         $('#<%= UpdateProgress1.ClientID %>').show();    
         doSearch();
    });

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>

作为替代方法，jQuery 的 $(document).ready 尝试使用 MS 方法：

<script>
    Sys.Application.add_load(doSearch);

    function doSearch() {
        $('#<%= UpdatePanel1Trigger.ClientID %>').click();
        return false;
    }
</script>

【讨论】：

感谢您的回复，第一种方法与我当前的方法相同（除了它在面板加载之前显示按钮）。第二个根本没有加载任何东西（没有点击按钮）。