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...
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 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.
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.
This is what I'm trying to achieve here. The user clicks on a button and the bootstrap modal popup appears. The user enters the event id value in the text box of the modal popup and I want information regarding the event to be displayed on the other fields in the modal popup.
I wrote a function under txtEventId_TextChanged event and I was able to get the value entered in the event id textbox. I was able to pass that value to the database and retrieve it's corresponding values from database as well.
My problem now is that I'm not able to display those data in the modal popup.
Here is the HTML Code :
<!-- Maintainenance Modal -->
<div class="modal fade" id="maintenanceModal" role="dialog" tabindex = -1 aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<!-- Maintaineance Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Maintain Event</h4>
</div>
<div class="row">
<div class="col-xs-2">
<div class ="form-group">
<label for="eventID" id="lblEventId">EventID</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<asp:TextBox ID="txtEventId" runat="server" CssClass="form-control dialogtextbox" AutoPostBack="false" OnTextChanged="txtEventId_TextChanged"></asp:TextBox>
</div>
</div>
</div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div class="modal-body">
<div class="EventsIcons">
<div class ="form-group">
<label for="MaintainDropDown" id="MaintainEventLabel">Select The Event Type </label>
<select id="MaintainDropDown" runat="server" class="btn btn-default dropdown-toggle eventdropdown" data-toggle="dropdown" aria-expanded="true">
<option value="WorkAnniversary">WORKANNIVERSARY</option>
<option value="Birthday">BIRTHDAY</option>
<option value="Community">COMMUNITY</option>
<option value="FoodSafety">FOOD SAFETY</option>
<option value="Health&Safety">HEALTH & SAFETY</option>
<option value="Holiday">HOLIDAY</option>
<option value="Maintenance">MAINTENANCE</option>
<option value="QualityAudit">QUALITY AUDIT</option>
<option value="SocialEvent">SOCIAL EVENT</option>
<option value="Stat-Holiday">STAT-HOLIDAY</option>
<option value="Sustainability">SUSTAINABILITY</option>
<option value="TownHall">TOWN HALL</option>
<option value="Visitor">VISITOR</option>
<option value="Wellness">WELLNESS</option>
</select>
</div>
</div>
<div class="Description">
<label for="description" id="MaintainDescription">Description</label>
<textarea class="form-control" rows="5" id="maintainTxtDescription" name="eventdescription" runat="server"></textarea>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label3">Start Time</label>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<div class='input-group date' id="maintainStartDate">
<asp:TextBox ID="maintainTxtStartDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="startTime">
<asp:TextBox ID="maintainTxtStartTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="form-group">
<label id="Label4">End Time</label>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="input-group date" id="endDate">
<asp:TextBox ID="maintainTxtEndDate" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<div class="input-group date" id="endTime">
<asp:TextBox ID="maintainTxtEndTime" runat="server" CssClass="form-control dialogtextbox"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1 col-xs-6">
<div class="form-group">
<asp:CheckBox ID="maintainChkBoxAllDayEvents" runat="server" CssClass="checkbox" Text="All Day Event" OnClick="document.getElementById('maintainTxtStartTime').disabled = this.checked;document.getElementById('maintainTxtEndTime').disabled = this.checked;" />
</div>
</div>
<div class="col-xs-offset-1 col-xs-4">
<div class="form-group">
<asp:Button ID="btnMaintainSubmit" runat="server" Text="SUBMIT"
CssClass="btn btn-group-justified btn-success" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
And here is my code behind code.
protected void txtEventId_TextChanged(object sender, EventArgs e)
{
BusinessLogicLayer BL = new BusinessLogicLayer();
EventId = Convert.ToInt32(txtEventId.Text);
try
{
DataTable dt = BL.BLGetEventDetails(EventId);
foreach (DataRow row in dt.Rows)
{
StartDate = row["StartDate"].ToString();
EndDate = row["EndDate"].ToString();
StartTime = row["StartTime"].ToString();
EndTime = row["EndTime"].ToString();
EventDescription = row["EventDescription"].ToString();
EventType = row["EventType"].ToString();
if (StartDate.Equals(""))
{
MessageBox.Show("EventId Does Not Exists");
maintainTxtStartDate.Text = "";
maintainTxtStartTime.Text = "";
maintainTxtEndDate.Text = "";
maintainTxtEndTime.Text = "";
MaintainDropDown.Disabled = true;
}
else
{
maintainTxtStartDate.Text = StartDate;
maintainTxtStartTime.Text = StartTime;
maintainTxtEndDate.Text = EndDate;
maintainTxtEndTime.Text = EndTime;
MaintainDropDown.Value = EventType;
maintainTxtDescription.InnerText = EventDescription;
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message, "txtEventId_TextChanged", MessageBoxButtons.OK, MessageBoxIcon.Error);
}
}
If I specify AutoPostBack="true" for txtEventId then the popup disappears from the screen after I input the value and hit enter. If I set the AutoPostBack = "false" then it is not populating the values as the control is not going to txtEventId_TextChanged function. I do not want to set AutoPostBack="true" because during postback the whole page will reload and the modal popup will disappear. I tried setting scriptmanager and updatepanel for it but since I have already an another existing scriptmanager and updatepanel added in the Default.aspx page, I'm not able to add a new one to it.
Please let me know what I'm doing wrong and how to rectify this. Your guidance is highly appreciated.
You have two options:
RegisterStartupScript
Use the RegisterStartupScript at the end of your method to send JS code to the client, you will send the call to your modal like this
ScriptManager.RegisterStartupScript(this, typeof(Page), "callModal",
"$('#maintenanceModal').modal();", true);
This is the easiest way to accomplish what you want
PageMethods
You can use the PageMethods to return a JSON with the values you want to display, this way you don't need to do a Postback, and you will get the info you want. See the requirements and how to use PageMethods
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