confirm delete for gridview row with bootstrap modal - asp.net

Question

I would like to add a confirmation modal after the click of delete in gridview.
The problem is that with this addition the delete takes place only for the first row of the gridview even if I try to delete another row.
I have the code below inside an itemtemplate in a gridview
<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">×</span></button>
<h4 class="modal-title">
delete command
</h4>
</div>
<div class="modal-body">
<p>
are you sure?…</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>
Is there a way to pass to bootstrap modal the right parameters that will be relevant to the clicked row?
Thank you in advance..

Answer 1

Yes - Bootstrap provides a way to pass parameters to modals, but you need to rework your gridview
Before you begin - the sample code here is generating a gridview Delete command which will require you to have an associated delete query in your datasource. If you do not, you can change the Delete$N call to something like MyConfirmedDelete and process the delete in the gridview RowCommand event
So, to begin....
You need to add a basic template field that contains a simple button to the gridview columns, one that does NOT cause a postback and modified with the bootstrap modal attributes
<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>
Note the attribute data-postcommand="". postcommand is a user supplied data attribute and must be prefixed with data- to work with the modal. This is going to be filled in the code behind and will contain the delete reference for the appropriate row:
In the Code Behind 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
In the Code Behind 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);
}
There are a few significant things to note in the above:
We are looping thru the gridview datarows
For each row we build a PostBackOptions object
The object is used in the call to ClientScript.GetPostBackEventReference()
Which returns the postback string specific to the row and registers the call for event validation. Remember the true Delete button now resides in the modal and not the gridview, so we must register and that can only be done in Render, hence the override.
The javascript string is passed to the modal upon Click
Next, you must move the modal out of the gridview, only one modal is required. I placed mine at the bottom of the page just inside the closing </form>
This is a modified example from the Bootstrap website
Note the <asp:LinkButton> replacement
<!-- 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">×</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>
And per the Bootstrap docs here is the jquery that performs the parameter replacement:
<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

The deletion takes place only for the first row because of the id attribute of the modal.Html does not accepts multiple id attributes with the same name on a single page. So when you click delete the same model is called over and over again. You need to have different names for all you modal ids. for example for similar problem that i faced i wrote this code.
<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"]))
{ %>
Make Blacklist
<% } %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Settings">
<ItemTemplate>
<% if (Convert.ToBoolean(Session["edit"]))
{ %>
<i class="fa fa-cog"></i>
<% } %>
<%--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>
Look above the setting dialogue comment I have passed Id of the bound data to the SettingsEntry javascript function and i also have set the id attribute of the settings modal to the corresponding Id of the bound data.
Then SettingsEntry javascript function is like this.
function SettingsEntry(id) {
$('#' + id).modal('show');
}
Apply this to your case and you are good to go.

Answer 3

thanks Shahid khan
also you can use this form for yourself
<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>
<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">×</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>
and this javascript for tooltip message as "Shahid khan" mentioned
<script type="text/javascript">
$(document).ready(function () {
InitializeBootstrap();
});
// For Re-Binding Jquery after Partial Postback...
function InitializeBootstrap() {
$("[data-toggle=popover]").popover({ trigger: "hover" });
}