嘗試在asp.net網頁上實施Bootstrap確認

Question

我正在嘗試在asp.net網頁（C＃）上實現Bootstrap確認（ 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");
        }

當我單擊按鈕時，我將重定向到page，沒有確認框:-(

在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

我能夠使用更新后的fork進行確認。 這是我的頁面：

<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的回調將觸發我們的“取消”按鈕回發。

希望這可以幫助！