将 jquery 模态弹出脚本附加到按钮事件

Question

我正在使用一个名为 bPopup (http://dinbror.dk/bpopup/) 的简单开箱即用的 jQuery 脚本在 .net Web 表单上启动模态弹出窗口。我对 jQuery 有点陌生，我想要的行为是在按钮单击上的代码隐藏事件完成处理后触发模式弹出。在模态弹出元素中，我有两个面板，一个带有成功消息，一个带有失败消息。我将脚本绑定到按钮，问题是，它只是触发 jquery 而不再触发代码隐藏事件。

这里是jQuery脚本（相对于作者的demo复制粘贴）：

 <script>
     // Semicolon (;) to ensure closing of earlier scripting
     // Encapsulation
     // $ is assigned to jQuery
     ; (function ($) {

         // DOM Ready
         $(function () {

             // Binding a click event
             // From jQuery v.1.7.0 use .on() instead of .bind()
             $('#my-button').bind('click', function (e) {

                 // Prevents the default action to be triggered. 
                 e.preventDefault();

                 // Triggering bPopup when click event is fired
                 $('#element_to_pop_up').bPopup();

             });

         });

     })(jQuery);
    </script>

这里是模态弹出元素：

<!-- Element to pop up -->
            <div id="element_to_pop_up">
            <asp:Panel ID="pnlSubmitSuccess" runat="server" Visible="true">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Success!</div><br /><br />
            <div style="font-size:20px;">The submitted data was successfully saved.</div>
            </asp:Panel>
            <asp:Panel ID="pnlSubmitFail" runat="server" Visible="false">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Whoops!</div>
            <br /><br /><div style="font-size:20px;">There seems to be a few issues with the data you submitted. Please check all required fields for accuracy.</div>
            </asp:Panel>
            </div>

这是它附加的按钮：

 <asp:Button ID="btnProcess" runat="server" Text="Process" CssClass="button"
        onclick="btnProcess_Click" />

onclick 事件永远不会发生，无论发生什么，jquery 都会弹出模式。我该如何解决这个问题？

Answer 1

e.preventDefault(); 停止 postBack，因此后面的代码不会触发。 这样做的方法是在按钮点击后面的代码中设置成功文本，然后在 jquery 中检查成功消息。

点击按钮后的代码

if(success){
    success_message_label.text = "The submitted data was successfully saved.";
}
else{
    success_message_label.text = "";
}

然后在 jquery 中准备好文档：

if($('#success_message_label').text() == "The submitted data was successfully saved.") {
    $('#element_to_pop_up').bPopup();
}

还要确保你的 success_message_label 中的 clientIdMode="Static"。

Answer 2

首先确保您拥有所有 jQuery-UI 和 bootstrap css 和 js 文件，并在 head 部分正确引用。

接下来在Master-Page写一个脚本，如果你有一个或者在同一个页面的末尾，像这样：

<script type="text/javascript">
function openPopUp() {
       $('#element_to_pop_up').bPopup();
}
</script>

然后我可以使用以下代码从代码隐藏中调用模式弹出窗口：

   protected void btnProcess_Click(object sender, EventArgs e) {   
      ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openPopUp();", true);
    }

Answer 3

您可能需要考虑使用 ASP.NET AJAX 页面方法来实现对服务器的调用，同时仍然允许以一种干净的方式来确定成功或失败（失败可能是对服务器的实际调用由于某种原因而失败; 通过 jQuery 的 ajax() 函数在服务器上处理或返回显式失败布尔值 false 时抛出异常，如下所示：

<script>
    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ; (function ($) {
        // DOM Ready
        $(function () {
            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function (e) {
               // Prevents the default action to be triggered. 
               e.preventDefault();

               // Call server-side page method to do processing
               $.ajax({
                   type: "POST",
                   url: "Your_Page_Name.aspx/DidProcessingSucceed",
                   data: "{}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(result) {
                       // Note, the JSON value coming back from the Page Method
                       // has a d value automatically added,
                       // so you need to dereference tha value through this
                       // d value, like this:
                       if(result.d) {
                           // Show success message in modal here
                           $('#success_message_to_pop_up').bPopup();
                       }
                       else {
                           // Show error message in modal here
                           $('#error_message_to_pop_up').bPopup();
                       }
                   },
                   error: function(xhr, status, error) {
                       // When an error happens calling the server,
                       // then show an error saying as much
                       $('#server_error_message_to_pop_up').bPopup();
                   }            
               });
            });
        });
    })(jQuery);
</script>

现在在服务器端，您需要创建在上面的 jQuery 代码中调用的 ASP.NET AJAX 页面方法，如下所示：

[WebMethod]
public static bool DidProcessingSucceed()
{
    // TODO: Put your processing logic here
    var didSucceed = YourLogic.DoProcessing();

    // Return true if successful, false otherwise
    return didSucceed;
}

注意 - ASP.NET AJAX 页面方法必须使用WebMethod 属性进行修饰，并且必须标记为static。 Page Method 的返回值将自动进行 JSON 编码，并且对 Page Method 的所有请求都必须是 POST。