如何获取 ASP.NET page_load 事件以触发 AJAX UpdatePanel 更新答案

【问题标题】：How to get an ASP.NET page_load event to trigger AJAX UpdatePanel update如何获取 ASP.NET page_load 事件以触发 AJAX UpdatePanel 更新
【发布时间】：2013-05-07 09:26:50
【问题描述】：

我在 ASP.NET 中有一个页面，上面有一些更新面板。页面加载后，我希望更新面板触发更新面板进行更新。

我正在使用this 回答，该回答说将此 Javascript 放在页面上。

$(document).ready(function () {
    window.__doPostBack('<%= hiddenAsyncTrigger.ClientID %>', 'OnClick');
});

但是，这会导致点击事件被发送垃圾邮件，因为加载事件正在触发另一个加载...？？

更新面板一切正常，问题是在页面加载后触发更新发生一次

【问题讨论】：

标签： javascript asp.net updatepanel

【解决方案1】：

使用客户端控件而不是服务器端：

<%@ Page Language="C#" %>
<script runat="server">
  protected string CurrentTime()
  {
    return DateTime.Now.ToString();
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="JavaScript">
      $(document).ready(function () {
        $("#Updater").click()
      });
    </script>
  </head>

  <body>
    <form id="MyForm" runat="server">
      <div>
        Outside the panel: <%=CurrentTime() %>
      </div>
      <br />
      <br />
      <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
      <asp:UpdatePanel ID="panel" runat="server" UpdateMode="conditional">
        <ContentTemplate>
          <div>
            Inside the panel: <%=CurrentTime() %>
          </div>
          <input type="submit" id="Updater" style="display: none" />
        </ContentTemplate>
      </asp:UpdatePanel>
    </form>
  </body>
</html>

另一种解决方案 - 没有隐藏触发器，使用 __doPostBack

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationTest.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script language="JavaScript">
        $(document).ready(function () {
            __doPostBack('panel', '');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Outside the panel: <%=CurrentTime() %>
        </div>
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
        <asp:UpdatePanel ID="panel" runat="server" UpdateMode="conditional">
            <ContentTemplate>
                <div>
                    Inside the panel: <%=CurrentTime() %>
                </div>
                <input type="submit" id="Updater" style="display: none" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplicationTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected string CurrentTime()
        {
            System.Diagnostics.Debug.WriteLine("CurrentTime was called");
            return DateTime.Now.ToString();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("PageLoad was called");
        }
    }
}

【讨论】：

第一个解决方案不会是异步的，因为您仍然必须等待 CurrentTime() 运行？
第二个解决方案也是如此，因为在 Page_Load 上调用了方法。我想我错过了什么
@SkeetJon - 更新面板通过 JavaScript 执行异步回发。对的前两个调用不是异步的，但只存在于这个演示中，并不是真正需要的。随意删除它们。
如果使用客户端控件，服务器端代码在哪里更新面板？

【解决方案2】：

最终通过 Javascript 触发更新面板中的隐藏按钮解决了这个问题

var timer;
var polling_interval = 30000;

$(document).ready(function () {
    TriggerUpdatePanelUpdate();// update as soon as DOM is ready
    StartPolling();
});

function StartPolling() {
    PollLoop();
}

function StopPolling() {
    clearTimeout(timer);
}

function PollLoop() {
    timer = setTimeout(
        function() {
            TriggerUpdatePanelUpdate();
            PollLoop();
        },
        polling_interval 
    );
}

function TriggerUpdatePanelUpdate() {
    document.getElementById('hiddenAsyncTrigger').click();
}

HTML

<asp:Button ID="hiddenAsyncTrigger" runat="server" OnClick="DoWork" Text="AsyncUpdate" style="display: none;"/>

【讨论】：