javascript - 尝试在 asp.net 网页上实现 Bootstrap Confirmation

Question

我正在尝试在 asp.net 网页 (C#) 上实现 Bootstrap Confirmation ( http://ethaizone.github.io/Bootstrap-Confirmation/#top )，但我遇到了问题。

母版页引用

<asp:ScriptReference Path="Scripts/jquery-1.11.2.js" />
<asp:ScriptReference Path="Scripts/bootstrap.js" />
<asp:ScriptReference Path="Scripts/bootstrap-datepicker.js" />
<asp:ScriptReference Path="Scripts/jquery.validate.min.js"/>
<asp:ScriptReference Path="Scripts/bootstrap-confirmation.js"/>

按钮

<asp:Button ID="btnCancel" data-toggle="confirmation-singleton" data-placement="left" CssClass="btn btn-danger" runat="server" Text="Cancel" OnClick="btnCancel_Click" />

jQuery

 $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="confirmation-singleton"]').confirmation('show');

按钮背后的代码

 protected void btnCancel_Click(object sender, EventArgs e)
        {                
            Response.Redirect("blabla.aspx");
        }

当我点击按钮时，我被重定向到页面，没有确认框:-(

检查了 Chrome 上的控制台，没有错误。当我从控制台运行 jQuery 时，我得到了

<input type="submit" name="ctl00$ContentSection$btnCancel" value="Cancel" id="ctl00_ContentSection_btnCancel" class="btn btn-danger" data-toggle="confirmation-singleton" data-placement="left" data-original-title="" title="">

有什么想法吗？预先感谢您的帮助

Answer 1

我试过你的代码并确认它没有工作，即使它应该。这是因为这个插件已经过时了，不支持 Bootstrap 3:

https://github.com/ethaizone/Bootstrap-Confirmation/issues/5

该项目的一个分支是其他人构建的，它支持 Bootstrap 3:

https://github.com/tavicu/bs-confirmation

我能够使用更新后的分支获得确认。这是我的页面:

<h1>Hello, world!</h1>

<form runat="server">
    <!-- The script manager is already probably in your master page so you don't have to worry about this, 
        but it is important to note because it will detect that we have a ClientScriptGetPostBackEvenReference
        and make sure we have access to __doPostBack. -->
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">
        <asp:Button ID="btnCancel" data-toggle="confirmation-singleton" data-placement="right" CssClass="btn btn-danger" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
    </div>
</form>

<!-- I am linking to bootstrap.css in my head but omitted that here for brevity -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-confirmation.js"></script>

<script>
    $('[data-toggle="confirmation-singleton"]').confirmation({
        singleton: true,
        // On confirm, call our btnCancel postback...
        onConfirm: function () {
            <%=Page.ClientScript.GetPostBackEventReference(btnCancel, string.Empty)%>;
        }
    });
</script>

...产生这个:

onConfirm 的回调将触发我们的取消按钮回发。

希望这对您有所帮助!