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

时间:2013-05-13 11:00:13

标签: javascript asp.net updatepanel

我在ASP.NET中有一个页面,上面有一些updatepanel。页面加载后,我希望updatepanels触发updatepanels更新。

我正在使用this回答,该回复表示将此Javascript放在页面上。

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

但是,这会导致click事件被垃圾邮件,因为加载事件正在触发其他负载... ??

更新面板功能正常,问题是在页面加载后触发更新一次

2 个答案:

答案 0 :(得分: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");
        }
    }
}

答案 1 :(得分:1)

使用Javascript触发更新面板中的隐藏按钮

结束解决此问题

JS

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