How to avoid that Bootstrap modal blocks all asp buttons inside or outside of modal, whether modal is shown or not - asp.net

Asp.net 4.5 web form with masterpage, a listview and some asp buttons for different tasks, then a html button to trigger modal. Modal pops up looking good. No other buttons work. Asp button on modal does not fire event either.
I removed the modal div and everything worked fine.
I think that the modal has some sort of listening function that might intercept all other events, could that be the problem? The old ajax toolbox modal popup did not pose this problem.
Anyone know how I can fix this? The modal is really well suited for the user interaction, I hope I can get it to work.
EDIT: asp button event on modal does work. It's outside, when modal is not shown, that is the problem.
This is the top of my page form with btnEmpty that does not work:
Send bestilling
<%: Page.Title %>
<p class="text-danger">
<asp:Literal runat="server" ID="ErrorMessage" />
</p>
<br/>
<div class="row">
<section>
<asp:ListView ID="lvHandleliste" runat="server"
OnItemDataBound="lvHandleliste_ItemDataBound"
OnDataBound="lvHandleliste_DataBound"
EmptyDataText="Handlekurven er tom">
And this is the modal, it's put in the very bottom of the page contentplaceholder:
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:20px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Bestillingsinformasjon</h2>
</div>
<div class="modal-body" style="padding:40px 50px;">
<div class="form-group">
<label for="tbxBestillingsnr">Bestillingsnr </label>
<asp:TextBox ID="tbxBestillingsnr" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbxBestillingsnr" Display="Dynamic"
CssClass="text-danger" ErrorMessage="" Text="Fyll ut!" />
</div>
<div class="form-group">
<label for="tbxReferanse">Vår ref </label>
<asp:TextBox ID="tbxReferanse" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbxReferanse" Display="Dynamic"
CssClass="text-danger" ErrorMessage="" Text="Fyll ut!" />
</div>
<div class="form-group">
<label for="tbxAdresse">Leveringsadresse </label>
<asp:TextBox ID="tbxAdresse" runat="server" TextMode="MultiLine" Rows="4" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbxAdresse" Display="Dynamic"
CssClass="text-danger" ErrorMessage="" Text="Fyll ut!" />
</div>
<asp:Button ID="btnSend" runat="server" Text="Send bestilling" CssClass="btn btn-info btn-block" OnClick="btnSend_Click" />
</div>
<div class="modal-footer" style="padding:20px 50px;">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Avbryt</button>
</div>
</div>
</div>
</div>

No response to my question but I finally found the answer myself. Here goes:
In my modal body I have some RequiredFieldValidators. These acted on all submit buttons on the page. So when the modal was hidden no submit could be done since the control fields required were not filled in.
The solution is to add all validator controls to a validation group, together with the one submit button their supposed to act on. Easy :-)
Hope this helps other people,
Siw

Related

Hitting Enter for Default Button in ASPX Doesn't Work but Mouse Does on IIS 6.2

I have an ASPX based solution that is running under .NET 4.8 and IIS 6.2. We have a login screen.
When a user enters their username and password, then hits enter or clicks enter, they should be logged in. The problem we are having is, if a user clicks the login button everything is fine but if they hit enter, the page seems to refresh but not postback.
Some history...We had this issue years ago when we were hosted under GoDaddy. There was some IIS setting that they changed at some point that broke our app and caused this. They wouldn't undo this as the setting (they wouldn't tell me what setting) would apply to others on the same IIS. We moved to a new host and now have our own IIS running on its on box. We have not had this issue for years and now recently it has cropped back up again. When I test this code locally under IIS Express via Visual Studio, we do not have the problem. When I publish to our server, the problem arises.
I am pulling my hair out on this one.
EDIT 2020-10-09 - Added markup
<form id="Form1" runat="server">
<div class="container" id="container" runat="server">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<p style="text-align: center;">
<img src="./images/logo160x300.png" />
</p>
<h2>
Sign In</h2>
<div id="errorPanel" runat="server" style="display: none;">
<asp:label ID="lblAuthenticationFailure" runat="server" Text="Login failed. Please check your username and password."
Visible="True" Font-Bold="True" ForeColor="#CC0000"></asp:label>
<br />
<br />
</div>
<label for="txtUser">
Email</label>
<asp:TextBox ID="txtUser" runat="server" placeholder="Email" type="email" class="form-control"
required autofocus AutoComplete="username"></asp:TextBox>
<br />
<label for="txtPassword">
Password</label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" placeholder="Password"
class="form-control" required AutoComplete="current-password"></asp:TextBox>
<div class="text-right small">
Forgot your password?</div>
<br />
<asp:Button ID="butLogin" runat="server" Text="Sign in" type="submit" class="btn btn-lg btn-primary btn-block" />
<br />
<div class="text-center">
New? Need an Account?<br />
</div>
<a class="btn btn-default btn-lg btn-block" href="createlogin.aspx" role="button">Create
an account</a>
<br />
</div>
</div>
</div>
</form>
In your form tag set the defaultButton to the login button.
<form id="form1" runat="server" defaultbutton="IdOfSubmitbutton">
You can set the default postback button on PageLoad by
Page.Form.DefaultButton = myButton;
Make sure you do a search. This has probably been answered.

ASP.Net Updatepanel Placement

I have a page with 3 fields on it. An amount (textbox), a payment terms (dropdown) (once, montly, quarterly, etc.) and an amount to be charged based on what is selected in the dropdown. The dropdown is set to autopostback=true. The operation works to calculate the amount to be charged, but pops back to the top of the page during postback. I know I need an updatepanel to do a partial postback, I just can't figure out how to code it or where to put it in my code. The attempts I have made seem to swallow the postback, and nothing happens.
This is the code without the updatepanel:
<div class="row form-group">
<label class="control-label col-md-4" for="lblTotal">Total Amount:<asp:textbox ID="lblTotal" runat="server" visible="true" borderstyle="None" ForeColor="#FFFFFF" BackColor="#FFFFFF"/></label>
<div class="col-md-3 "><div class="input-group"><span class="input-group-addon" id="lblDollar" style="border-color:#4B116F; border-width:2px; color:#4B116F;">$</span>
<asp:textbox ID="lblTotalAmount" Runat="server" Font-Bold="true" ReadOnly="false" class="form-control" aria-describedby="lblDollar" style="border-color:#4B116F; border-width:2px; color:#4B116F;" AutoPostBack="false"/></div></div>
<div class="col-md-3"><asp:rangeValidator id="rvalTotalAmount" ControlToValidate="lblTotalAmount" runat="server" type="Double" Minimumvalue="5.00" Maximumvalue="30000.00" ErrorMessage="For your security we limit online gifts to a range of $5.00 to $30,000.00." Text="*"></asp:rangeValidator><asp:CustomValidator ID="cvalDesignation" runat="server" errormessage="Please enter a designation." Text="*"/></div>
</div>
<div class="row form-group">
<label class="control-label col-md-4">Payment Terms: </label>
<div class="col-md-3">
<asp:DropDownList ID="ddlCCFrequency" Runat="server" class="ddl_styler_combo ddl-size dropdown-toggle" AutoPostBack="true" style="border-radius:4px; width:160px;"/>
</div>
<asp:TextBox ID="tbxAuthNetAmt" runat="server" visible="true" borderstyle="solid" ForeColor="#FFFFFF" BackColor="#FFFFFF"/>
</div>
<div class="row form-group">
<label class="control-label col-md-4">Card will be charged: </label>
<div class="col-md-3"><div class="input-group">
<span class="input-group-addon ddl_styler_combo" id="ccDollar" style="border-color:#4B116F; border-width:2px; color:#4B116F; font-weight:bold; height:33px;">$</span>
<asp:TextBox ID="tbxCardAmount" readonly="false" Runat="server" class="form-control ddl_styler_combo ddl-size" aria-describedby="ccDollar" style="border-color:#4B116F; border-width:2px; color:#4B116F; border-bottom-right-radius:4px; border-top-right-radius:4px;" />
</div></div>
<div class="col-md-2"><asp:CustomValidator id="cvalCardChargeSchedule" runat="server" enabled="true" ErrorMessage="Please specify a billing schedule" /></div>
</div>
"The attempts I have made seem to swallow the postback"
when this is happens its means that you have JavaScript errors.
From this code only the validator's can cause JavaScript errors - Remove them temporary to see if UpdatePanel working, and then add one by one to locate what is going wrong.
Alternative see for javacript errors as you have the page using the Web Browser Tools.

How to disable bootstrap controls from code behind

i have a aspx page:
<div class="form-vertical">
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlLocation" CssClass="form-control required" AppendDataBoundItems="true" DataTextField="location_name" DataValueField="location_id" OnInit="ddllocation_Init">
<asp:ListItem Value="" Text="Select location..">
</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-4">
<button type="button" id="btnAdd" class="btn btn-success pull-center"><i class="fa fa-search"></i>Add</button>
</div>
</div>
</div>
</div>
....
Some more content here that needs to be displayed.
Based on certain conditions, when the asp.net page loads, I'd like to either
hide the entire div class="form-vertical"
OR
disable all controls
Can disable asp.net controls but how to disable button - btnAdd
Any suggestions?
To Hide Div: Give the div id and add runat="server" so that you can access the corresponding div from code-behind.
<div ID="myDivId" runat="server" >
//div content
</div>
In code-behind set its visible property to false.
myDivId.Visible = false
To Disable Button: Add runat="server".
<button id="myBtn" runat="server"> clickMe </button>
In code-behind
myBtn.Disabled = true;

Pressing enter in modal closes the modal but does not submit the data

I'm using asp.net webforms, and bootstrap 3
The problem I'm having is when pressing enter, having the password field focused dismisses the modal, but no data is submitted.
Seeing others had a similar problem but different elements in their modal, I for an example have asp:button in my code while others who could make it work had input type="submit" instead.
<div class="modal fade borderless" id="reviewSign" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></a>
<h4 class="modal-title">You are about to review document:
<asp:Label ID="lblReviewSignDocName" runat="server" Text=""></asp:Label>
<asp:Label ID="lblReviewSignDocNr" runat="server" Text=""></asp:Label>
</h4>
</div>
<div class="modal-body">
<h5>Enter credentials and press "Ok" to review</h5>
<br />
<table>
<tbody>
<tr>
<td>Username: </td>
<td>
<asp:TextBox ID="txtUserForReview" Class="form-control" Placeholder="Login Credentials" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password: </td>
<td>
<asp:TextBox ID="txtPasswordForReview" Class="form-control" Placeholder="Password" TextMode="Password" runat="server"></asp:TextBox></td>
</tr>
</tbody>
</table>
<div runat="server" id="LNoteReviewSignDiv" visible="false">
<br />
<asp:Label ID="LNoteReviewSign" ForeColor="Red" runat="server"></asp:Label>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" Text="Ok" ID="btnReviewSign" OnClick="btnReviewSign_Click" />
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
<script type='text/javascript'>
function openmodalReviewSign() {
$('[id=reviewSign]').modal('show');
$("#<%=txtPasswordForReview.ClientID %>").focus(200);
}
</script>
</div>
What is expected is that pressing enter while the password field is focused would have the same effect as pressing the sign button. the other input field is set to readonly from the code behind so it can't be focused.
alternatively if submitting by pressing enter can't be achieved I would prefer nothing happening when pressing enter.
As suggested by #AlexKudryashev suggested, wrapping all inputs and buttons in an asp:Panel and setting DefaultButton="btnReviewSign" solved this issue.
keep in mind this will only solve this problem if you're coding your website in .net webforms.

asp.net Do not validate Modal form when hidden

I have a modal form (bootstrap), I am using asp.net RequiredFieldValidtors for data entry validation. This validation should only fire when the modal is visible and the user is entering new values into the modal.
The problem I am having is that the validation triggers when the model form is not shown preventing my main page from accepting new data entry from. My modal is only used to add new values and is not part of the normal workflow on my main page.
I have been stuck on this for two days now and have tried many different things and just can't get it figured out.
Any suggestions on how to handle this while keeping my RequiredFieldValidator rules intact?
Thanks
Edit - Adding modal forms code.
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="modal fade" id="modNewStakeholder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add Stakeholder</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label">First Name:</label>
<asp:TextBox class="form-control focus" ID="tFirstName" runat="server" AutoComplete="off" placeholder="First name is required"></asp:TextBox>
<asp:RequiredFieldValidator ID="rftFirstName"
runat="server" ErrorMessage="Required Field"
ControlToValidate="tFirstName" Display="Dynamic"
ValidationGroup="ValGroupNewStake"></asp:RequiredFieldValidator>
</div>
<div class="form-group">
<label class="control-label">Last Name:</label>
<asp:TextBox class="form-control" ID="tLastName" runat="server" AutoComplete="off" placeholder="Last name is required"></asp:TextBox>
<asp:RequiredFieldValidator ID="rftLastName"
runat="server" ErrorMessage="Required Field" ControlToValidate="tLastName" Display="Dynamic"
ValidationGroup="ValGroupNewStake"></asp:RequiredFieldValidator>
</div>
<div class="form-group">
<label class="control-label">E-Mail:</label>
<asp:TextBox class="form-control" ID="tEmail" runat="server" AutoComplete="off" placeholder="Email must contain #expeditors.com"></asp:TextBox>
<asp:RequiredFieldValidator ID="rftEmail" runat="server" ControlToValidate="tEmail" Display="Dynamic"
ValidationGroup="ValGroupNewStake"
ErrorMessage="Required Field">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rftEmailAt" runat="server" ControlToValidate="tEmail" Display="Dynamic"
ErrorMessage="Invalid Email, must contain #"
ValidationGroup="ValGroupNewStake"
ValidationExpression="^\w+[\w-\.]*\#\w+((-\w+)|(\w*))\.[a-z]{2,3}$">
</asp:RegularExpressionValidator>
<asp:RegularExpressionValidator ID="rftEmailDomaain" runat="server" ControlToValidate="tEmail" Display="Dynamic"
ErrorMessage="Invalid Email, must be an #abc.com domain"
ValidationGroup="ValGroupNewStake"
ValidationExpression="^.+#[Aa][Bb][Cc][.][Cc][Oo][Mm]$">
</asp:RegularExpressionValidator>
</div>
</div>
<div class="modal-footer">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success btn-sm" id="cmdOk_AddSholder" runat="server" onserverclick="cmdOk_AddSholder_ServerClick" ValidationGroup="ValGroupNewStake" causesvalidation="false">Ok</button>
<button type="button" class="btn btn-danger btn-sm" id="cmdCancel_AddSholder" runat="server" data-dismiss="modal" onserverclick="cmdCancel_AddSholder_ServerClick">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmdOk_AddSholder" EventName="serverclick" />
</Triggers>
</asp:UpdatePanel>
I've put together a very simplified example of how my application is doing this. The Modal is just an ascx control and does not have an updatepanel. It's actually just a control becoming visible but we use CSS and JavaScript to make it a modal. The same logic should still apply as I've made this sample from a functioning modal.
Modal.ascx
Validators have ValidationGroup and are disabled. Button is also assigned to ValidationGroup:
<div id="approvalModal" style="display: none;">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Enabled="false"
ControlToValidate="TextBox1" ValidationGroup="testValidationgGroup" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="testValidationgGroup" />
</div>
Modal.ascx.vb
Enable the validator in a property:
Partial Class Modal
Inherits System.Web.UI.UserControl
Public WriteOnly Property Enable() As Boolean
Set(value As Boolean)
RequiredFieldValidator1.Enabled = value
End Set
End Property
End Class
PageWithModal.aspx (note: uses jQuery)
<script>
function setupTestModal() {
var modal = $('#approvalModal');
if (modal.css('display') == 'none') {
modal.show();
}
}
</script>
<asp:Button ID="ShowModal" runat="server" Text="Show Modal" OnClick="ShowModal_Click" />
<uc1:Modal runat="server" ID="testModal" />
PageWithModal.aspx.vb
Notice that when you click the ShowModal button, the validation does NOT fire. However, when the modal is visible, the Validator has been enabled.
Protected Sub ShowModal_Click(sender As Object, e As EventArgs)
testModal.Enable = True
Dim script = String.Concat("setupTestModal();")
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "Popup", script, True)
End Sub

Resources