i try to design a popup window in my aspx page. The problem is the page is reloaded and the popup not shown!
here is the code
aspx
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:Label ID="popuplbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" PopupControlID="panel1" TargetControlID="popuplbl" CancelControlID="cancelbtn" runat="server"></cc1:ModalPopupExtender>
<asp:Panel ID="panet1" class="modal fade in" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal"></button>
<h4 class="modal-title">New Study Design</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Some Input</h4>
<p><input class="col-md-12 form-control" type="text"> </p>
<p><input class="col-md-12 form-control" type="text"> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="cancelbtn" class="btn default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn blue" type="button">Add</button>
</div>
</div>
</div>
</asp:Panel>
<button runat="server" id="AddNew_StudyDesign" class="btn sbold green" title="Add New Study Design" style="width:200px" onserverclick="AddNew_StudyDesign_Click" >
Add New Study Design <i class="fa fa-plus"></i>
</button>
c#
protected void AddNew_StudyDesign_Click(object sender, System.EventArgs e)
{
mpe.Show();
}
I try using "ToolkitScriptManager" but it is not known!
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server" />
I can see one issue,
Replace PopupControlID attribute in ModalPopupExtender ,
PopupControlID="panel1"
To
PopupControlID="panet1"
Panel ID is panet1, not panel1.
Additionally, Panel should have display style none (style="display:none;"), but you can keep as per your requirements.
Related
I have built a form in HTML 5 that is in a modal window and wrapped in Bootstrap and the layout is perfect. I have the need to use another modal window, however instead of the form being built in HTML 5 I need to place and iframe in the modal and display and asp form. I have wrapped everything identically in Bootstrap, but for some reason the label next to my form control displays on top and not next to. I'm stumped, I have played with CSS for two days now trying to figure out why. Thoughts?
HTML CODE FOR FORM THAT LAYS OUT PERFECT
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width:100%">
<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">Observation Form</h4>
</div>
<div class="modal-body">
<form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
<fieldset>
<!-- Form Name -->
<!-- Enter Building -->
<div class="form-group">
<label class="col-md-3 control-label">Building</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
</div>
</div>
</div>
IMAGE FOR PERFECT LAYOUT
ASP CODE WRAPPED IN IFRAME THAT IS DISPLAYING IN MODAL
<form id="form1" runat="server" class="well form-horizontal">
<fieldset>
<legend>File Upload Form</legend>
<div class="form-group">
<label class="col-md-3 control-label">Choose File</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
</div>
</div>
</div>
<asp:HiddenField ID="site" runat="server" />
<asp:HiddenField ID="dateobserved" runat="server" />
<asp:HiddenField ID="guid" runat="server" />
<asp:HiddenField ID="username" runat="server" />
<asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
</fieldset>
</form>
IMAGE FOR INCORRECT LAYOUT
To me it seems like you need to set a width to the iframe 'cause the modal size isn't changing. Try set width to 100% for the iframe
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.
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');
}
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" });
}
Trying to make a login form inside a Bootstrap 3 Modal, but the login button doesn't do any postback.
The most weird thing is that i have used Bootstrap Modal before in similar situations with no problems.
Here's my code:
<div id="modalLogin" class="modal fade" 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-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label for="tbLoginEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-9">
<asp:TextBox ID="tbLoginEmail" TextMode="Email" CssClass="form-control" runat="server" placeholder="Email" />
</div>
<div class="col-sm-1 error-message">
<asp:RequiredFieldValidator ID="rfvLoginEmail" ErrorMessage="*" ControlToValidate="tbLoginEmail" runat="server" Display="Dynamic" />
</div>
</div>
<div class="form-group">
<label for="tbLoginPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<asp:TextBox ID="tbLoginPassword" TextMode="Password" CssClass="form-control" runat="server" placeholder="Password" />
</div>
<div class="col-sm-1 error-message">
<asp:RequiredFieldValidator ID="rfvLoginPassword" ErrorMessage="*" ControlToValidate="tbLoginPassword" runat="server" Display="Dynamic" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btLogin" Text="Login" CssClass="btn btn-standard" runat="server" OnClick="btLogin_Click" />
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
C# Code:
protected void btLogin_Click(object sender, EventArgs e)
{
///validate user credentials in membership
if (Membership.ValidateUser(tbLoginEmail.Text, tbLoginPassword.Text))
{
///login user to application
FormsAuthentication.SetAuthCookie(tbLoginEmail.Text, true);
///redirect to catalog page (TODO: redirect user to profile page)
Response.RedirectToRoute("catalog-page");
}
else
{
lbResult.Text = "error";
}
}
I'm using ASP.NET Web Forms 4.5 and the Modal is in the MasterPage.
I've found out my problem! i'm using validation controls not only in the login form, but in the register form as well. Since both the forms are in the master page if one of them is empty any button in the page will no be submitted.
To resolve my issue (i know, a rookie mistake), i added a validation group to each form - Login and Register.
Sorry for any inconvenience...