Question

我想在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>

有没有办法将与被点击的行相关的正确参数传递给bootstrap模态？提前谢谢..

Answer 1

是 - Bootstrap提供了一种将参数传递给模态的方法，但您需要重新编写gridview

开始之前 - 此处的示例代码生成gridview Delete命令，该命令将要求您在数据源中具有关联的删除查询。如果不这样做，可以将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 删除按钮现在位于模态而不是gridview中，因此我们必须注册并且只能在Render中完成，因此才能覆盖。
点击

接下来，您必须将模态移出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>

Answer 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');
    }

将它应用到你的盒子里，你很高兴。

Answer 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 for tooltip消息为＆＃34; Shahid khan＆＃34;提到的

<script type="text/javascript">

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



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

使用bootstrap模式确认删除gridview行

3 个答案: