使用引导模式确认删除 gridview 行答案

【问题标题】：confirm delete for gridview row with bootstrap modal使用引导模式确认删除 gridview 行
【发布时间】：2015-04-20 08:52:21
【问题描述】：

我想在gridview中单击删除后添加一个确认模式。问题是，有了这个添加，即使我尝试删除另一行，删除也只会发生在 gridview 的第一行。

我在 gridview 的 itemtemplate 中有下面的代码

<asp:LinkButton ID="diagrafi" runat="server" type="button" class="btn btn-primary btn-lg" data-toggle="modal"  data-target="#delete_Modal">
   <asp:Image ID="Image1" Width="20px" runat="server" ImageUrl="images/del.png"/>
</asp:LinkButton>
<div class="modal fade" id="delete_Modal" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
            <div class="modal-content">
                    <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                                       <h4 class="modal-title">
                                               delete command
                                       </h4>
                      </div>
              <div class="modal-body">
              <p>
                 are you sure?&hellip;</p>
               </div>
               <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="myFunction()">                                 cancel</button>
     <asp:Button ID="epivevaiosi" CommandArgument='<%#Eval("kodikos")+"|"+Eval("tablename")%> '
          CommandName="DeleteRow" runat="server" type="button" Text="Διαγραφή" class="btn btn-primary"/>
               </div>
        </div>
    </div>
 </div>

有没有办法将与单击的行相关的正确参数传递给引导模式？提前谢谢你..

【问题讨论】：

标签： asp.net twitter-bootstrap gridview modal-dialog confirm

【解决方案1】：

是的 - Bootstrap 提供了一种将参数传递给模式的方法，但您需要重新设计您的网格视图

开始之前 - 此处的示例代码将生成一个 gridview 删除命令，这将要求您在数据源中具有关联的删除查询。如果不这样做，您可以将 Delete$N 调用更改为类似 MyConfirmedDelete 并在 gridview RowCommand 事件中处理删除

那么，开始吧……

您需要向 gridview 列添加一个包含简单按钮的基本模板字段，该字段不会导致回发并使用引导模式属性进行修改

<Columns>
  <!--...other gridview fields... -->
  <asp:TemplateField>
    <ItemTemplate>
      <button id="btnDeleteConfirm" runat="server" type="button" 
              class="btn btn-primary"
              data-toggle="modal" 
              data-target="#deleteConfirmModal" 
              data-postcommand="">Delete</button>
    </ItemTemplate>
  </asp:TemplateField>
  <!--...other gridview fields... -->
</Columns>

注意属性data-postcommand=""。 postcommand 是用户提供的数据属性，必须以 data- 为前缀才能使用模式。这将在后面的代码中填写，并将包含相应行的删除引用：

在 VB 背后的代码中：

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
  For Each gvr As GridViewRow In GridView1.Rows
    Dim btn As HtmlButton = gvr.FindControl("btnDeleteConfirm")
    Dim pbo As New PostBackOptions(GridView1,
                                   String.Format("Delete${0}", gvr.RowIndex), 
                                   String.Empty, False, True, False, True, False, String.Empty)
    If btn IsNot Nothing Then
      btn.Attributes("data-postcommand") = 
            ClientScript.GetPostBackEventReference(pbo, True)
    End If
  Next
  MyBase.Render(writer)
End Sub

在 C# 背后的代码中：

using System.Web.UI.HtmlControls;//add this


protected override void Render(HtmlTextWriter writer){
  foreach(GridViewRow gvr in Gridview1.Rows){
    HtmlButton btn = gvr.FindControl("btnDeleteConfirm") as HtmlButton;
    PostBackOptions pbo =new PostBackOptions(GridView1,
                         String.Format("Delete${0}", gvr.RowIndex),
                         String.Empty, false, true, false, true, false,
                         String.Empty);
    if( btn != null){
      btn.Attributes["data-postcommand"] = 
            ClientScript.GetPostBackEventReference(pbo, True);
    }
  }
  base.Render(writer);
}

上面有几件重要的事情需要注意：

我们正在遍历 gridview 数据行
我们为每一行构建一个PostBackOptions 对象
该对象用于调用ClientScript.GetPostBackEventReference()
返回特定于行的回发字符串和注册事件验证调用。记住 true 删除按钮现在驻留在模式而不是网格视图中，所以我们必须注册，这只能在 Render 中完成，因此被覆盖。
javascript 字符串在单击时传递给模式

接下来，您必须将模态框移出gridview，只需要一个模态框。我把我的放在页面底部，就在结尾</form>

这是来自Bootstrap website 的修改示例注意<asp:LinkButton> 替换

<!-- Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Delete</h4>
      </div>
      <div class="modal-body">
        Delete...Really???
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <asp:LinkButton ID="LinkButton2" runat="server"
                        ClientIDMode="Static" 
                        CssClass="btn btn-primary">LinkButton</asp:LinkButton>
      </div>
    </div>
  </div>
</div>

根据 Bootstrap 文档，这里是执行参数替换的 jquery：

<script type="text/javascript">
  $('#deleteConfirmModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var pbcommand = button.data('postcommand') // Extract info from data-* attributes
    var modal = $(this)
    modal.find('#LinkButton2').attr('href', pbcommand);
  });
</script>

【讨论】：

非常感谢我的朋友！这些对我来说有点复杂，但我会尝试一下。我希望这将是解决方案！
它适用于我的测试项目。对我来说，看到第三方附加组件如何与 asp 控件集成总是很有趣。这是一个有趣的练习。

【解决方案2】：

由于modal 的id 属性，仅对第一行进行删除。Html 不接受单个页面上具有相同名称的多个id 属性。因此，当您单击删除时，会一遍又一遍地调用相同的模型。您需要为所有模态 ID 使用不同的名称。例如，对于我遇到的类似问题，我编写了这段代码。

    <asp:GridView ID="gvCustomerView"
        CssClass="table table-striped table-bordered bootstrap-datatable datatable"
        runat="server" AutoGenerateColumns="false"
        EmptyDataText="No records found"
        OnRowDeleting="gvCustomerView_RowDeleting"
        DataKeyNames="Id"
        ShowFooter="True"
        AllowPaging="True"
        PageSize="150"
        OnRowCommand="gvCustomerView_RowCommand"
        OnPageIndexChanging="gvCustomerView_PageIndexChanging">
        <Columns>

            <asp:BoundField HeaderText="Atoll" DataField="atoll_name"></asp:BoundField>
            <asp:BoundField HeaderText="Island" DataField="iland_name"></asp:BoundField>
            <asp:BoundField HeaderText="Area" DataField="area_name" />
            <asp:BoundField HeaderText="Customer name" DataField="customer_name"></asp:BoundField>
            <asp:BoundField HeaderText="Branch name" DataField="branch_name"></asp:BoundField>
            <asp:BoundField HeaderText="Account Number" DataField="account_number"></asp:BoundField>
            <asp:BoundField HeaderText="Password" DataField="password"></asp:BoundField>
            <asp:TemplateField HeaderText="Blacklist">
                <ItemTemplate>
                    <% if (Convert.ToBoolean(Session["edit"]))
                       { %>
                    <a href="javascript:BlackEntry('<%#Eval("Id")%>')" class="btn btn-info btn-setting">Make Blacklist</a>
                    <% } %>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Settings">
                <ItemTemplate>
                    <% if (Convert.ToBoolean(Session["edit"]))
                       { %>
                    <a href="javascript:SettingsEntry('<%#Eval("Id")%>')"><i class="fa fa-cog"></i></a>
                    <% } %>
                    <%--settings dialog--%>
                    <div class="modal fade" id="<%#Eval("Id")%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">×</button>
                                    <h3>Settings</h3>
                                </div>
                                <div class="modal-body">
                                    <div class="control-group">
                                        <div class="controls" style="margin: 10px">
                                            <i class="fa fa-pencil-square-o" style="margin-top: 5px"></i>
                                            <% if (Convert.ToBoolean(Session["edit"]))
                                               { %>
                                            <asp:LinkButton ID="lnkEdit" CommandArgument='<%#Eval("Id")%>' CommandName="Action"
                                                runat="server">Edit</asp:LinkButton>
                                            <% } %>
                                        </div>
                                        <div class="controls" style="margin: 10px">
                                            <i class="fa fa-eye" style="margin-top: 5px"></i>
                                            <asp:LinkButton ID="lblView" runat="server" Text="View" CommandName="View"
                                                CommandArgument='<%#Eval("Id")%>'></asp:LinkButton>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%--End settings Dialogue--%>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <% if (Convert.ToBoolean(Session["delete"]))
                       { %>
                    <asp:LinkButton  OnClientClick="return window.confirm('Are you confirm to delete?')" CommandArgument='<%#Eval("Id")%>'
                        CommandName="Delete" runat="server"><i class="fa fa-close"></i></asp:LinkButton>
                    <% } %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

看上面的设置对话框注释我已经将绑定数据的 Id 传递给 SettingsEntry javascript 函数，并且我还将设置模式的 id 属性设置为绑定数据的相应 Id。那么SettingsEntry javascript函数就是这样的。

    function SettingsEntry(id) {
        $('#' + id).modal('show');
    }

将此应用到您的案例中，您就可以开始了。

【讨论】：

【解决方案3】：

感谢沙希德汗您也可以自己使用此表格

<asp:TemplateField ItemStyle-CssClass="first-name" HeaderStyle-CssClass="first-name" HeaderText="اقدامات">
<ItemTemplate>
    <!-- Button HTML (to Trigger Modal) -->
    <asp:LinkButton
        ID="LinkButton_Delete1"
        data-toggle="modal"
        data-target='<%# "#" + Eval("ID").ToString()%>'
        runat="server"
        CommandArgument='<%#Eval("ID")%>'
        CommandName="delete">
        <span  data-toggle="popover" data-placement="top"  title="حذف" class="glyphicon glyphicon-trash"/>
    </asp:LinkButton>
    &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;
    <asp:LinkButton ID="LinkButton_Edit1"
        runat="server"
        OnCommand="btn_Edit1_Command"
        data-toggle="popover"
        CommandArgument='<%#((GridViewRow) Container).RowIndex.ToString() + "," + Eval("ID").ToString()%>'>
        <span data-toggle="popover" data-placement="top" title="ویرایش" class="glyphicon glyphicon-edit"><span>
    </asp:LinkButton>

    <!-- Modal HTML -->
    <div class="modal fade" id="<%#Eval("ID")%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog Modal-position">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p>آیا شما مطمئن به حذف این رکورد می باشید؟</p>
                </div>
                <div class="modal-footer">
                    <asp:Button
                        Text="خیر"
                        CssClass="btn btn-info"
                        data-dismiss="modal"
                        runat="server" />
                    <asp:Button
                        ID="btn_Delete1"
                        Text="بله"
                        CssClass="btn btn-danger"
                        UseSubmitBehavior="false"
                        data-dismiss="modal"
                        runat="server"
                        OnCommand="btn_Delete1_Command"
                        CommandArgument='<%#Eval("ID").ToString()%>' />
                </div>
            </div>
        </div>
    </div>

</ItemTemplate>

这个用于工具提示消息的 javascript 提到了“Shahid khan”

<script type="text/javascript">

$(document).ready(function () {
    InitializeBootstrap();
});



// For Re-Binding Jquery after Partial Postback...
function InitializeBootstrap() {
    $("[data-toggle=popover]").popover({ trigger: "hover" });
}

【讨论】：