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

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..

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>

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.

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" });
}

Related

Dropdownlist in Update Panel Populated on SelectedIndexChanged of Another does not Populate

I do not know what happened here as I know for a fact that this code was working. The only thing I know for sure that changed in the project was an upgrade to jQuery 3.31. I have 2 dropdownlists in an UpdatePanel in a modal. The first list populates as expected. The second dropdown is supposed to populated OnSelectedIndexChanged event of the first. The event is firing, and there are 5 records returned, but the dropdownlist is blank.
UPDATE After looking at previous versions in TFS this did occur after upgrading to jQuery 3.31.
Here is the modal code:
<div id="modalTicketReportSelect" class="md-modal colored-header custom-width md-effect-9 primary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="icon s7-close"></i></button>
<h3 class="modal-title">Ticket Type Report</h3>
</div>
<div class="modal-body form">
<div class="panel panel-alt3 panel-transparent">
<div class="panel-heading panel-heading-cg">
<button runat="server" id="btnAddToGrid" type="button" class="btn btn-alt3" data-dismiss="modal" onserverclick="btnAddToGrid_ServerClick" ><i class="icon s7-check"></i> Save</button>
<button type="button" data-dismiss="modal" class="btn btn-alt3 md-close"><i class="icon s7-close"></i> Cancel</button>
</div>
</div>
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="form-group">
<label class="text-danger">Ticket Type</label>
<asp:DropDownList ID="ddlTicketTypes" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlTicketTypes_SelectedIndexChanged"></asp:DropDownList>
</div>
<div class="form-group">
<label class="text-danger">Ticket Report</label>
<asp:DropDownList ID="ddlTicketReport" runat="server" CssClass="form-control" ></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Here is the event handler:
protected void ddlTicketTypes_SelectedIndexChanged(object sender, EventArgs e)
{
//log postback
LoggerBA.Log(DB_Context, Path.GetFileName(Request.ServerVariables["SCRIPT_NAME"]), MethodBase.GetCurrentMethod().Name, UtilityBA.LoggerLevel.Info, "postback");
ticketProfileId = Guid.Parse(ddlTicketTypes.SelectedValue);
ticketProfileName = ddlTicketTypes.SelectedItem.Text;
//PopulateTicketReports(ticketProfileId.ToString());
Guid TicketProfileId = Guid.Empty;
if (Guid.TryParse(ticketProfileId.ToString(), out TicketProfileId))
{
LookupListItemBO SReportTypeListItem = LookupListBA.LookupListItem_GetByBothDatakeys(DB_Context, "SYS_REPORTTYPE", "REPORTTYPE_SINGLE");
Guid ReportTypeId = SReportTypeListItem.LookupListItemId;
List<CG.Reports.Views.ReportView.SavedReportBO> singleticketreports = CG.Reports.BLL.DevExpressBA.SavedReport_GetByModuleReportTypeId_AndTypeIdentifierId(DB_Context, "TICKET", ReportTypeId, TicketProfileId, true);
ddlTicketReport.DataSource = singleticketreports;
ddlTicketReport.DataTextField = "ReportName";
ddlTicketReport.DataValueField = "SavedReportId";
ddlTicketReport.DataBind();
ListItem oSelect = new ListItem("[Make Selection]", "");
ddlTicketReport.Items.Insert(0, oSelect);
ddlTicketReport.SelectedIndex = 0;
}
else
{
ddlTicketReport.Items.Clear();
}
}
Dev tools reveal no errors on page. I am stumped! Any assistance is greatly appreciated.

Asp.net bootstrap modal popup not working correctly

I'm trying to use asp.net grid row button for modal popup, its working for alert but cant call modal popup , how can i fix it?
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
CssClass="GridDeletebtn" runat="server" />
<script>
function test()
{
$('#confirm').show();
alert('df');
}
</script>
When you call, alert('df'), thread will be blocked until you click the "Ok" button of the alert then the postback will happen followed by.
But when you show the modal dialog only (without alert), it won't block the thread and hence postback will happen immediately.
Hence your modal dialogue will be disappeared after postback.
When you add `return false' as below, it will stop the postback.
<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />
Script
<script>
function test()
{
$('#confirm').modal('show');
//alert('df');
}
</script>
Html
<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
If you can share a URL that I can test. Then I will try it.
Moreover try to catch class name instead of id.
some thing like below.
$('.modal').show();
if you using gridview or repeater then call modal popup by below code
its working for me
<a class="btn btn-sm btn-warning" data-toggle="modal" data-target="#Remark_Modal<%# Eval("PrimaryID")%>">
<i class="fa fa-eye"></i> Details
</a>
<!--Modal-->
<div class="modal fade" id='Remark_Modal<%# Eval("PrimaryID")%>' role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content card-blue-fill">
<div class="modal-header card-header">
<button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
<i class="fa fa-2x fa-close"></i>
</button>
<h4 class="modal-title"><i class="fa fa-eye"></i> <%# Eval("MissionName")%></h4>
</div>
<div class="modal-body card-block">
<%# Eval("Remark")%>
</div>
</div>
</div>
</div>
Use a ScriptManager tag at the beginning of your modal, else your ScriptManager.RegisterStartupScript would not work. Below is the workaround that I use.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><asp:Label ID="errorMessage" runat="server" Text=""></asp:Label></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Code-behind
private void showModal(string error)
{
message.Text = error;
upModal.Update();
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
}
Call the above showModal() function with appropriate message. You may have to add modal header & modal footer if needed.

close Bootstrap Modal after click button inside model

in my asp page i have the following:
<ContentTemplate> <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnSavedata" CssClass="btn btn-info"> Text="Save"/>
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div> </div>
also i have another link to show Modal from code behind
Protected Sub btn_DeleteQuote_ServerClick(sender As Object, e As EventArgs) Handles btn_PrintQuote.ServerClick
lblModalTitle.Text = "Validation Errors List for HP7 Citation"
lblModalBody.Text = "This is modal body"
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal({backdrop:'static', keyboard: false});", True)
upModal.Update()
End Sub
Now i want when i click on button btnSavedata (this butoon inside modal) i want to update some content inside my page (this content outside modal) then close the modal
i want this using code behind on btnSavedata_click event
use this code:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", True)
[http://www.w3schools.com/bootstrap/bootstrap_modal.asp][1]
Perfect example of Asp.net Modal
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
<button type="button" class="btn btn-default" data-dismiss="modal">SAVE</button>

Bootstrap Modal refreshes page in web forms

I am struggling to make this to work.
All I want is to open a bootstrap modal to open on the click of a button without refreshing the page.
Following is the modal
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary" Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
The button is
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClick="TransferFileBtn_Click" />
and in codebehind I have
protected void TransferFileBtn_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
}
I have used the following link as a reference Display Bootstrap Modal from Asp.Net Webforms
On the button click, I do see the modal popup but the page reloads. How can I avoid page to reload?
Thank you
If you do not need to postback to server, you can simply use standard input or button tag.
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
Or just return false in client click event.
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
How I tested
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebForm.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<asp:Button ID="TransferFileBtn" runat="server"
CssClass="btn btn-primary" Text="Transfer file"
OnClientClick="$('#myModal').modal(); return false;" />
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title">
<asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary"
Text="Yes" OnClick="SendToBillingBtn_Click" />
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
As I'm not an expert on ASP. so im not sure about this but try removing runat="server" from your button.
Please find the code,Hope this will help you.
**//Button**
<asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClientClick="onTest();return false;" />
**//Popup code:**
<div class="modal fade" id="modalTest" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true" style="width: 100%; height: 100%;">
<div class="modal-dialog">
<div class="modal-content" style="height: 700px">
<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="H2">
<asp:Label runat="server" ID="lblRSF" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
**//Used Iframe**
<iframe runat="server" frameborder="0" id="frmExample" runat="server" style="width: 100%; height: 600px; overflow: hidden;"></iframe>
</div>
</div>
</div>
</div>
**//Js function
function onTest() {
$("#<%=lblRSF.ClientID%>").text("Demo");
//Admin/Example.aspx (write whatever you want to show in the popup)
$("#<%=frmMapExample.ClientID%>").attr("src", "../Admin/Example.aspx);
$('#modalTest').modal('show');
}

Display Bootstrap Modal from Asp.Net Webforms

Need Suggestions, how to open a twitter bootstrap modal, from Asp.net Webform code behind?
I want to open the modal based on some requirement at the moment of the save. Once user click on the save button , it runs the validations in code behind and if there are any validation errors , display all errors in bootstrap modal dialog. This all should happen on Save button click.
I tried with below piece of code , but it prompts me java script error "Error: Object doesn't support property or method 'modal'". Thanks
Asp.Net Webforms 4.5
Bootstrap V3.0.1
JQuery-1.9.0.js
jquery-ui-1.8.24.js
Default.aspx
<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title">Validation Errors List for HP7 Citation</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</asp:Content>
Default.aspx.cs
protected void btnSubmit_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none", "
<script>$('#mymodal').modal('show');</script>", false);
}
Script order defined in master page
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/bootstrap") %>
<%: Scripts.Render("~/bundles/common") %>
</asp:PlaceHolder>
First of all, I suggest you put your Modal in an UpdatePanel and set the Title and Body from CodeBehind. By this trick, you don't need to create a separate Modal for each button or each message. So I modify your code and add an UpdatePanel:
<div class="container">
<div class="btn-group">
<asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"
OnClick="btnSubmit_Click"></asp:Button>
</div>
</div>
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and in CodeBehind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblModalTitle.Text = "Validation Errors List for HP7 Citation";
lblModalBody.Text = "This is modal body";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
upModal.Update();
}
First, we set the Modal's Title and Body, then display it, and finally update the UpdatePanel.
A good practice to improve the page's loading speed is putting the Modal code at the end of the page, besides this helps you avoid any conflict with other UpdatePanels or elements.
A more advanced and tricky suggestion: Put the Modal code at the end of your MasterPage and write a global function to update it, and make your life even easier!
Troubleshooting:
If you get the Error:
Object doesn't support property or method 'modal'
a likely reason could be failing setup of Bootstrap, try to check your code with the official bootstrap sample.
If you still get the error, maybe you find these links helpful:
Geeks with Blogs
My Tec Bits

Resources