Javascript 将jquery模式pop脚本附加到按钮事件

我使用一个简单的开箱即用的jQuery脚本bPopup（）在.NETWeb表单上启动一个模式弹出窗口。我对jQuery有点陌生，我想要的行为是在按钮单击上的codebehind事件完成处理后触发模式弹出。在模态pop元素中，我有两个面板，一个带有成功消息，一个带有失败消息。我将脚本绑定到按钮上，问题是，它只是触发jquery，而不再触发codebehind事件

以下是jQuery脚本（相对地从作者的演示中复制和粘贴）：

//分号（；）以确保关闭早期脚本
//封装
//$被分配给jQuery
; （函数（$）{
//DOM就绪
$（函数（）{
//绑定单击事件
//在jQuery v.1.7.0中，使用.on（）代替.bind（）
$（“#我的按钮”）.bind（'click'，函数（e）{
//防止触发默认操作。
e、 预防默认值（）；
//触发click事件时触发bPopup
$（“#元素”到“弹出”）.bPopup（）；
});
});
})（jQuery）；

以下是模态流行元素：

<!-- 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只是弹出模式，不管发生什么。如何修复此问题？

首先，请确保您随身携带所有

jQuery UI

和

bootstrap

css和js文件，并在标题部分正确引用

接下来，如果在页面末尾有一个脚本或在同一页面中，请在母版页中编写脚本，如下所示：

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

e.preventDefault（）

停止回发，因此代码隐藏不会触发。 实现这一点的方法是在单击按钮后的代码中设置成功文本，然后在jquery中检查成功消息

点击按钮时代码隐藏

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

然后在jquery上的document ready中：

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

---

还确保CeleTyMydio=“静态”在您的Excel MeaSigLabely.< /P> < P>您可能需要考虑使用ASP.NET Ajax页面方法来实现对服务器的调用，同时仍然允许以干净的方式确定成功或失败。（失败可能是由于某种原因对服务器的实际调用失败；在服务器上处理时引发异常或返回显式失败布尔值false）通过jQuery的

ajax（）

函数，如下所示：

<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>

[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

。页面方法的返回值将自动进行JSON编码，对页面方法的所有请求都必须是POST

<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>

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

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