c#codebehind如何解雇JavaScript代码?

时间:2011-05-24 18:53:02

标签: c# javascript

我有一些JavaScript代码会显示一个模态对话框,要求用户在运行可能需要几秒钟才能运行的Web服务时等待。无法弄清楚的是如何从服务器中运行的C#代码启动JS代码。这是场景:

1)用户点击asp:启动服务器代码的按钮代码。 2)服务器代码[以某种方式]触发一个浏览器事件,该事件启动调用Web服务的JS代码

JS代码如下所示:

<form id="form1" runat="server">
<div>
    <script type="text/javascript">
        $(function () {
            $('#btn_BeginProcessB').click(function (event) {
                event.preventDefault();
                var $Seconds = $("INPUT[id*='txtSeconds']").val();
                var $Message = $("INPUT[id*='txtMessage']").val();
                var $WorkingMessage = $('#WorkingMessage');
                $WorkingMessage.text($Message);

                var $this = $(this);
                var $Loader = $('#Loader');
                // show loading indicator              
                $Loader.show();
                $("body").css({ background: "#C8C5C5" });
                // Begin process
                $.ajax({
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ Seconds: $Seconds }),
                    url: 'SimpleWebService.asmx/LongRunningProcess',
                    error: function (xhr, textStatus, errorThrown) {
                        alert('Error! ' + errorThrown);
                        // show button
                        // hide loading indicator                
                        $Loader.hide();
                    },
                    success: function (data) {
                        alert("Data:" + data.d);
                        // show button
                        // hide loading indicator                
                        $Loader.hide();
                        $("body").css({ background: "#FFFFFF" });
                    }
                });

            });
        });
    </script>
    <script type="text/javascript">
        function LoadPageWorking() {
            var $Seconds = $("INPUT[id*='txtSeconds']").val();
            var $Message = $("INPUT[id*='txtMessage']").val();
            var $WorkingMessage = $('#WorkingMessage');
            $WorkingMessage.text($Message);
            var $data = JSON.stringify({ Seconds: $Seconds });
            PageWorking('Loader', 'SimpleWebService.asmx/LongRunningProcess', $data, PageWorkingSuccess, PageWorkingError);  
        };

        function PageWorkingSuccess(data) {
            $("SPAN[id*='lblResult']").html("<br /><b>Result:</b>" + data.d + "<br />");
            $('body').css('background', originalBackground);
        };

        function PageWorkingError(xhr, textStatus, errorThrown) {
            alert('Error! ' + errorThrown);
            $('body').css('background', originalBackground);
        }
    </script>
    <!--- HTML --->
    <div id="Page">
        <h1>
            Long Running Process Test Page</h1>
        <p>
            This site demonstrates how to invoke a long running process and let the user know
            that the process is underway. When the button is clicked, it calls a web service
            that sleeps for the designated number of seconds and returns a message.</p>
        <br />
        Enter number of seconds for worker process to sleep:
        <asp:TextBox ID="txtSeconds" runat="server" Width="25" Text="3" /><br />
        Enter the message to be displayed while the process is working:
        <asp:TextBox ID="txtMessage" runat="server" Text="Working...(please be patient)"
            Width="300px" /><br />
        <asp:Label ID="lblResult" runat="server" />
        <br />
        <input type="button" id="btnBegin" value="Click to test LoadPageWorking function"
            onclick="LoadPageWorking();" />
    </div>
    <div id="Loader">
        <center>
        <span id="WorkingMessage">Default Loader Message</span>
            <div class="ProgressBar-Animated">
                &nbsp;</div>
        </center>
    </div>
</div>
</form>

我可以在C#事件中编写哪些代码来激活LoadPageWorking()JS函数?

4 个答案:

答案 0 :(得分:4)

即使您有服务器端按钮控件,也可以使用它的onclientclick属性直接调用javascript。但是,如果您必须从后面的代码调用脚本,则可以根据您的要求使用ClientScriptManager.RegisterStartupScript()ClientScriptManager.RegisterClientScriptBlock()。那里有很多例子。

答案 1 :(得分:3)

让按钮触发一个页面工作功能,创建一个你正在工作的指示器,触发ajax请求,当它返回完成工作并隐藏指示器。无需再去代码。

答案 2 :(得分:2)

为什么不让你的LoadPageWorking()启动服务器,然后显示JS模式弹出窗口?您可以让弹出窗口轮询您的服务以确定它是否已完成,并在它出现时自行隐藏。

答案 3 :(得分:1)

您应该尝试使用RegisterClientScriptBlock方法。它允许您动态地将脚本部分添加到页面的源代码中。您可以包含任何您想要的Javascript,包括调用已在页面中定义的方法。