Question

我在UpdatePanel中有一个<asp:Button ID="btnExport">控件。单击该按钮时，我希望立即执行Javascript函数（它是一个轮询函数，在UpdatePanel执行回发时将持续运行）。我怎么能这样做？

我试过这个：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
    $(".btnExport").click(function (e) {
        timer = window.setInterval(pollStatus, 1000);//        
    });
}

这有效，但它不会执行btnExport事件处理程序。我尝试的一切都执行事件处理程序而不是轮询功能，反之亦然。我真正想要的是一种方法：

1）单击“导出”按钮。

2）设置一个计时器，每秒进行一次轮询事件（javascript函数）。

3）执行导出按钮的事件处理程序。

4）回发完成后，清除计时器。

有人对完成此任务的最佳方法有任何建议吗？

这是一些示例代码。这是我写的一个小样本应用程序，只是为了说明这一点，我的实际应用程序有点过于复杂，无法在此处发布。

Default.aspx的

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
        <ContentTemplate>
            <asp:Button runat="server" ID="btnExport" Text="Begin Export" OnClick="btnExport_Click" ClientIDMode="Static" /><div id="message"></div>
        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        var timer;

        function pollStatus() {
            $.ajax({
                type: "POST",
                url: "<%= Page.ResolveUrl("~/Default.aspx/PollStatus") %>",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $("#message").html(response.d);
                }
            });   
        }

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(pageLoaded);
        function pageLoaded(sender, args) {
            $("#btnExport").click(function (e) {
                timer = window.setInterval(pollStatus, 50);
            });
        }
</script>

DEFAULT.ASPX.CS

protected void btnExport_Click(object sender, EventArgs e)
        {
            for (int i = 1; i <= 10000000; i++ )
            {
                Session["PollStatus"] = i;
            }
        }

        [WebMethod]
        public static string PollStatus()
        {
            return HttpContext.Current.Session["PollStatus"] != null ? HttpContext.Current.Session["PollStatus"].ToString() : "No result";
        }

Answer 1

我没有看到这里指定的css类：

<asp:Button ID="btnExport">

但是，您的选择器正在尝试按类获取对象：

$(".btnExport")

因此，您应该为按钮设置CssClass属性或更改选择器。

UPD：这段代码对我很有用（这是一个例子，它需要在prod。使用之前进行一些抛光）

<form id="form1" runat="server">

    <asp:ScriptManager runat="server" ID="scmMain"></asp:ScriptManager>

    <asp:UpdatePanel runat="server" ID="pnlMain">
        <ContentTemplate>
            <asp:Button Text="Test" ID="btnTest" CssClass="btnTest" runat="server" OnClick="btnTest_OnClick"/>
        </ContentTemplate>
    </asp:UpdatePanel>

    <script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(pageLoaded);
        var timer;
        function pageLoaded(sender, args) {
            if (prm.get_isInAsyncPostBack()) {
                window.clearInterval(timer);
            }
            else {
                $(".btnTest").click(function (e) {
                    timer = window.setInterval(pollStatus, 1000);
                });
            }
        }

        function pollStatus() {
            alert('Test');
        }

    </script>

</form>

按钮的btnTest_OnClick服务器端事件处理程序就是这样做的：

Thread.Sleep(5000);

在服务器向客户端提供响应之前，您应该看到“测试”警报。

Answer 2

你可以试试这个

Javascript：

<script type="text/javascript">
    var timer;

    function fn() {
        //alert('hi');
        //clear the timer here.
    }
    function fn2() {
        //alert('hello');
        //Set a timer to do a polling event here
        return true;
    }
</script>

Html：

<asp:Button ID="btnExport" runat="server" Text="Begin Export" OnClientClick="return fn2();" onclick="btnExport_Click" />

代码背后：

protected void btnExport_Click(object sender, EventArgs e)
    {
        for (int i = 1; i <= 10000000; i++ )
        {
            Session["PollStatus"] = i;
        }

        string myScript = @"fn();";
        Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", myScript, true);
    }

希望这会有所帮助。祝你好运。

Answer 3

如果您在示例中使用interval，则会有许多并发轮询请求，因为请求从服务器返回需要一些时间。在重试之前，您应该等待最后一次轮询请求从服务器返回。

function poll() {
    $.ajax({
        type: "POST",
        url: "<%= Page.ResolveUrl("~/Default.aspx/PollStatus") %>",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (response.d != 'No Result') {
                // done
            } else {
                setTimeout(poll, 50);
            }
        }
    }); 
}

$(function() {
    $("#btnExport").click(function (e) {
        poll();
    });
});

在UpdatePanel回发上立即执行Javascript

3 个答案: