执行 SqlDataSource 的 DeleteCommand 时如何显示引导模式？

Question

我有以下标记：

        <asp:GridView ID="Users" runat="server"
            CssClass="table table-hover table-striped" GridLines="None"
            AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" DataKeyNames="Id" DataSourceID="UsersSqlDataSource">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" Visible="false" />
                <asp:BoundField DataField="UserName" HeaderText="UserName" SortExpression="UserName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
                <asp:CommandField ShowEditButton="True" ControlStyle-CssClass="btn btn-info" />
                <asp:CommandField ShowDeleteButton="True" ControlStyle-CssClass="btn btn-info" />
            </Columns>
        </asp:GridView>

        <asp:SqlDataSource ID="UsersSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:DefaultConnection %>" 
            SelectCommand="SELECT [UserName], [Id], [FirstName], [LastName], [Email] FROM [AspNetUsers]" 
            DeleteCommand="DELETE FROM AspNetUsers WHERE [Id]= @Id" 
            UpdateCommand="UPDATE AspNetUsers SET FirstName = @FirstName, LastName = @LastName, Email = @Email WHERE (Id = @Id)"></asp:SqlDataSource>
    </div>

我没有任何用于 GridView 的 RowCommand、RowDeleting 事件。一切都由 sql 数据源处理。单击 GridView 的删除按钮时，如何显示引导模式确认？

我能够通过使用 RowDataBound 事件来显示常规确认对话框，但不确定如何使用引导模式而不是常规确认？

我在网格中添加了一个 RowCommand 事件，我正在执行以下操作：

protected void Users_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "Delete")
        {
            var sb = new System.Text.StringBuilder();

            sb.Append(@"<script type='text/javascript'>");

            sb.Append("$('#deleteModal').modal('show');");

            sb.Append(@"</script>");

            ScriptManager.RegisterStartupScript(this, this.GetType(), "DeleteModalScript", sb.ToString(), false);
        }
    }

我有一个 SiteMaster，最初将脚本放在底部，但单击删除时无法弹出模式，因此我将脚本放在顶部（Jquery 和 Bootstrap）。如果可能的话，我宁愿他们排在最后。

所以现在我得到了弹出模式，但即使我按下取消它仍然会删除记录。

CommandFields's 和Command Name "Delete" and "Edit" 是问题所在。我是否应该以asp:ButtonField等其他方式处理删除和编辑记录？

切换到 asp:ButtonField 有效，但我现在的问题是底部的 javascript 而不是顶部？

Answer 1

我使用用户控件来封装我的技术（对于 VB 感到抱歉）。基本上我将对话框href中的确认按钮设置为gridview命令的原始href。

标记：

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ConfirmModal.ascx.vb" Inherits="controls_ConfirmModal" %>

   <script type="text/javascript">

        function <%=Me.ID%>(sender,n) {

           $(document).ready(function () 
            {
                $('#<%=Me.ID %>Confirm').attr('href',sender.href);
                $("#<%=Me.ID %>Body").html(function () {
                    return $(this).html().replace("{0}", n); 
                });
                $('#<%=Me.ID %>').modal('show');

            });
            return false;
        }

    </script>

    <div class="modal fade" id="<%=Me.ID%>">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title"><%=Me.Title %></h4>
          </div>
          <div id="<%=Me.ID %>Body" class="modal-body">
            <asp:PlaceHolder runat="server" ID="pBody">
            </asp:PlaceHolder>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <a id="<%=Me.ID %>Confirm" type="button" class="<%=Me.ButtonClass %>"><%=Me.ConfirmButtonText %></a>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

代码隐藏：

Partial Class controls_ConfirmModal
    Inherits System.Web.UI.UserControl

    Private m_BodyTemplate As ITemplate = Nothing

    Private m_ButtonClass As String = "btn btn-primary"
    Public Property ButtonClass() As String
        Get
            Return m_ButtonClass
        End Get
        Set(ByVal value As String)
            m_ButtonClass = value
        End Set
    End Property

    Private m_Body As String = ""
    Public Property Body() As String
        Get
            Return m_Body
        End Get
        Set(ByVal value As String)
            m_Body = value
        End Set
    End Property

    Private m_ConfirmButtonText As String = "Confirm"
    Public Property ConfirmButtonText() As String
        Get
            Return m_ConfirmButtonText
        End Get
        Set(ByVal value As String)
            m_ConfirmButtonText = value
        End Set
    End Property

    Private m_Title As String = "Modal Title"
    Public Property Title() As String
        Get
            Return m_Title
        End Get
        Set(ByVal value As String)
            m_Title = value
        End Set
    End Property

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

        If Not (Me.BodyTemplate Is Nothing) Then
            Dim container As New BodyContainer("")
            Me.BodyTemplate.InstantiateIn(container)
            pBody.Controls.Add(container)
        Else
            Dim display As New LiteralControl
            display.Text = "<p>" & Me.Body & "</p>"
            pBody.Controls.Add(display)
        End If

    End Sub

    <TemplateContainer(GetType(BodyContainer))> <PersistenceMode(PersistenceMode.InnerProperty)> Public Property BodyTemplate() As ITemplate
        Get
            Return m_BodyTemplate
        End Get
        Set(ByVal value As ITemplate)
            m_BodyTemplate = value
        End Set
    End Property

    Public Class BodyContainer
        Inherits Control
        Implements INamingContainer

        Private m_Body As String
        Friend Sub New(ByVal Body As String)
            Me.Body = Body
        End Sub

        Public Property Body() As String
            Get
                Return m_Body
            End Get
            Set(ByVal value As String)
                m_Body = value
            End Set
        End Property

    End Class

End Class

用法1（简单）

在页面某处：

<ics:ConfirmModal runat="server" ID="ArchiveConfirmModal" Title="Archive Campaign?" ConfirmButtonText="Archive" Body="Are you sure you wish to archive the campaign: {0}" ></ics:ConfirmModal>

在网格视图中：

<asp:LinkButton runat="server" Text="Archive" CommandName="Update" OnClientClick="return ArchiveConfirmModal(this)"></asp:LinkButton>

用法 2（高级）

在页面某处：

<ics:ConfirmModal runat="server" ID="DeleteConfirmModal" Title="Delete Campaign?" ConfirmButtonText="Delete" ButtonClass="btn btn-danger" >
    <BodyTemplate>
        <p>Are you sure you wish to delete <strong>{0}</strong>?  This cannot be undone!</p>
        <p class="text-muted">This will also remove any associated autoresponders and any scheduled sends will fail.</p>
    </BodyTemplate>
</ics:ConfirmModal>

在网格视图中：

<asp:LinkButton runat="server" Text="Delete" ToolTip="Delete" CommandName="Delete" OnClientClick=<%# Eval("CampaignName", "return DeleteConfirmModal(this,""{0}"");") %> CssClass="glyphicon glyphicon-remove" ></asp:LinkButton>