ASP.Net Updatepanel Placement - asp.net

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.

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.

i am trying to put a label textbox and another label and textbox in a single line using bootstrap but it wouldnot come onthe same line

<div class="row">
<form class="form-inline">
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tb_FName" CssClass="col-md-2 control-label">First Name</asp:Label>
<div class="col-md-10" >
<asp:TextBox runat="server" ID="tb_FName" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tb_FName"
CssClass="text-danger" ErrorMessage="The First Name field is required." SetFocusOnError="True" Display="Dynamic" />
</div>
</div>
<div class="form-group" style="float:right">
<asp:Label runat="server" AssociatedControlID="tb_LName" CssClass="col-md-2 control-label">Last Name</asp:Label>
<div class="col-md-10 ">
<asp:TextBox runat="server" ID="tb_LName" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tb_LName"
CssClass="text-danger" ErrorMessage="The Last Name field is required." SetFocusOnError="True" Display="Dynamic" />
</div>
</div>
</form>
</div>
There is a label and a textbox and another label and textbox .second label and textbox come in the second line.i need to come in the same line.i have put it in a row and used form-inline also..i tried changing the column space still t would not work.
you can use class= "col-md-3" to set all 3 items in row.
Adding my comment as an answer, before someone else does it....
Change col-md-10 to col-md-6 Bootstrap divides the website in grid with 12 columns. You can check Bootstrap for more information about the grid

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

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

How to resolve this error in ASP.NET Web Forms 4.5.2: Invalid postback or callback argument?

I am a new ASP.NET Web Forms developer and I am currently using .NET Framework 4.5.2.I have a simple form that includes two textbox controls and two buttons. I am struggling right now with the button click event. When I click on the button, I got the following error and I don't know why.
I searched on the web and I couldn't find any solution to this. Could you please help me in this regard?
For your information, here's my ASP.NET Code:
<asp:UpdatePanel ID="upAdd" runat="server">
<ContentTemplate>
<div id="post-wrapper" class="row">
<div id="content" class="col-md-12 col-sm-12 col-xs-12">
<div id="login">
<div class="form-wrap">
<div role="form">
<div class="form-group">
<label for="email" class="control-label">Name</label>
<asp:TextBox ID="txtNameNew" runat="server" CssClass="form-control" placeholder="e.g. fire extinguisher"></asp:TextBox>
</div>
<div class="form-group">
<label for="key" class="control-label">Description</label>
<asp:TextBox ID="txtDescNew" runat="server" CssClass="form-control" placeholder="e.g. ........."></asp:TextBox>
</div>
<%--<div class="form-group">
<label for="key" class="control-label">ImagePath</label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
</div>--%>
<asp:LinkButton ID="lbtnAdd" runat="server" CssClass="btn btn-primary"
OnClick="lbtnAdd_Click">
<span class="fa fa-plus"></span> Add</asp:LinkButton>
<asp:LinkButton ID="lbtnCancel" runat="server" CssClass="btn btn-default"
OnClick="lbtnCancel_Click">
<span class="fa fa-remove"></span> Cancel</asp:LinkButton>
</div>
<hr>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lbtnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

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