Textbox gets validated by two buttons - c#

I am making some web app using ASP.net and for look of the site I am using Bootstrap. But I have this problem that I can't solve by googling
So this is the deal .. I have panel and inside I have simple textbox and button
<asp:Panel runat="server" ID="pnlCompany">
<div style="display: inline-flex; overflow: hidden; float: left">
<asp:TextBox ID="txtClient" runat="server" CssClass="text-primary"
Wrap="true" Width="300px" required=""></asp:TextBox>
<asp:Button ID="btnInsertClient" runat="server" OnClick="btnInsertClient_Click"
CssClass="btn btn-primary" data-target="#MainContent_pnlCompany_txtClient"
Text="Dodaj klijenta" />
</div>
</asp:Panel>
But my problem show up here ... Under that panel I have another panel, with Button (that works fine, it collapsing table at end of page), then I have FileUpload button and Button (btnUploadUsers) that is giving me hard time, idea of this button is to go with upload of file, but once i click it, it keeps validating textbox (txtClient) from above panel ... I am sure this button fire it's event "btn_UploadUsers_click" because once i enter data in textbox, program stop on my break point
<asp:Panel runat="server" ID="pnlImportUsers">
<div style="display: inline-flex; overflow: hidden; float: left">
<asp:Button ID="btnCompanyList" runat="server" class="btn btn-lg btn-primary"
data-target="#MainContent_pnlCompanyList" Text="Lista klijenata" />
<asp:FileUpload ID="fuUsersUpload" runat="server" Enabled="false"
CssClass="btn-group-vertical" />
<asp:Button ID="btnUploadUsers" runat="server" class="btn btn-lg btn-primary"
Text="Upload" OnClick="btnUploadUsers_Click" data-target="#MainContent_UsersId"
ValidationGroup="fuUsersUpload" />
</div>
</asp:Panel>
Let me know if I can do anything to describe this problem better, thank you

Thank you #Benni_mac_b for advice, but i figured out what was a problem, so I'll post answer in case anyone else be in this situation.
So with using Bootstrap css and js, as you can see 'required' on the form, it will always be check if has value on every post_back
<asp:TextBox ID="txtClient" runat="server" CssClass="text-primary"
Wrap="true" Width="300px" required=""></asp:TextBox>
So, as I didn't wanted my btnUploadUsers to do PostBack, simply adding
UseSubmitBehavior="false"
In my code snippet fixed my problem

Related

asp:Button and asp:LinkButton and asp:Button submitting on enter in Chrome

In Internet Explorer if I hit enter in the TextBox P it submits the Form using the onclick event of LoginButton.
This is what I want to happen.
In Google Chrome if I hit enter it submits the form with the onclick of Button1.
This is not what I want to happen.
Button1 is actually not visible on the form under normal circumstances. It is made visible under certain circumstances to do a different task then login.
How can I force this, browser independently, to always use LoginButton onclick when someone presses enter?
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
onclick="LoginButton_Click" />
<asp:Button
ID="Button1" runat="server"
Text="Submit" onclick="Button1_Click" />
You set the forms default button:
<form id="Form1" defaultbutton="SubmitButton" runat="server">
The Following works for me.
<form id="form1" runat="server" defaultbutton="LoginButton">
<div>
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
OnClick="LoginButton_Click" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" > </asp:button>
</div>
</form>
You'll probably want to set a default button in your Page_Load method, like this:
this.Form.DefaultButton = this.LoginButton.UniqueID;
I ended up using C# in my Page_Load(object sender, EventArgs e) method to set the DefaultButton. Found this on another stackoverflow post.
https://stackoverflow.com/a/2213237/2907463
this.Form.DefaultButton = Login1.FindControl("LoginButton").UniqueID;

UpdatePanel does not appear on default load, but it does when specific page is given

I got my hands on a this web application few days back and I am already stuck with a problem.
When I load the page with, say, HL1 = http://localhost:8001/, UpdatePanel does not appear at all.
Though when I load the page with HL2 = http://localhost:8001/Default.aspx, it displays in its full glory.
[EDIT: Added HL1, HL2 tags]
FYI, UpdatePanel is part of a Master page.
Any suggestions?
Thanks,
Abhinav
[EDIT: Code for update panel]
<asp:UpdatePanel ID="upan" runat="server" >
<ContentTemplate>
<fieldset style="width:320px; padding:2px;margin-top:20px;margin-bottom:5px;" onmouseover="showHelp('quickAccess')" onmouseout="g_Popup.hide()">
<legend>Quick Access</legend>
<span style="vertical-align: middle">Dummy #
<asp:TextBox ID="txtSearchDummy" clientidmode="Static" runat="server" MaxLength="9" Width="70px" Height="15px" style="margin-top: 5px"></asp:TextBox>
<asp:Button ID = "btnSearchDummy" clientidmode="Static" runat="server" OnClick="btnSearchDummy_Click" style="display:none"/>
<button onclick="return quickAccess()" lang="javascript" type="submit" class="button_enabled" style="margin-left: 5px;">
<img alt="" src="images/lightning.gif"></img><span>Find Dummy</span></button></span>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Thanks for all the help guys. Issue is resolved now and, as expected, it had nothing to do with ASP.NET. In master page code behind file that search box was being made invisible.
:)

very simple c# submit button

I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.

Unwanted FileUpload textbox clearing after submit in IE

Since there is no way to change FileUpload button text I hide FileUpload control and used my own fake button and textbox to be able to do it.
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick(sender) {
var parentDiv = $(sender).parent();
$(parentDiv).children('[id*=fuBoutiqueImage]').click();
}
function LoadFakeField(sender) {
$(sender).parent().find("input[id$='txtFakeText']").val($(sender).val());
}
</script>
<asp:Panel ID="pnlCommandButtons" runat="server" CssClass="commandButtons">
<div class="uploader">
<asp:Label ID="lblUploadFile" EnableViewState="false" runat="server" Text="<%$Resources:Common, BoutiqueGallery_UploadFile %>" />
<asp:FileUpload ID="fuBoutiqueImage" runat="server" style="" onchange="LoadFakeField(this);" />
<input ID="txtFakeText" type="text" name="txtFakeText" readonly="true" runat="server" />
<input ID="btnFakeButton" type="button" onclick="HandleFileButtonClick(this);" value="<% $Resources:Common, ButtonName_Browse %>" runat="server" />
</div>
<asp:Panel ID="pnlDeleteButton" class="delete" runat="server">
<ef:ButtonExt ID="btnDelete" runat="server" Text="<%$Resources:Common, BoutiqueGallery_Delete %>" OnClick="btnDelete_Click" CausesValidation="false" Color="Red" Icon="Delete" Width="60" />
</asp:Panel>
<div id="pnlAddButton" class="add">
<ef:ButtonExt ID="btnAdd" runat="server" Text="<%$Resources:Common, UploadImage %>" OnClick="btnAdd_Click" ValidationGroup="emailSend" Width="104" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="fuBoutiqueImage" ErrorMessage="<%$Resources:Common, Attachment_FileToLarge %>" Text="<%$Resources:Common, Attachment_FileToLargeTextBox %>" Display="Dynamic" OnServerValidate="CustomValidator1_ServerValidate" ValidationGroup="emailSend"></asp:CustomValidator>
<asp:RegularExpressionValidator ID="FileUpLoadValidator" runat="server" ErrorMessage="<%$Resources:Common, Attachment_FileFormat %>" Text="<%$Resources:Common, Attachment_FileFormatTextbox %>" ValidationExpression=".*(\.jpg|\.png|\.gif|\.tif|\.jpeg|\.JPG|\.JPEG|\.PNG|\.GIF|\.TIF)$" ControlToValidate="fuBoutiqueImage" Display="Dynamic" ValidationGroup="emailSend" />
</div>
<div class="isActiveCheckbox">
<asp:CheckBox ID="cbImageIsActive" class="chkItem" OnCheckedChanged="cbImageIsActive_CheckedChanged" Checked='<%# Eval("IsActive") %>' AutoPostBack="true" runat="server" Text="<%$Resources:Common, BoutiqueGallery_IsImageActive %>" />
</div>
</asp:Panel>
My btnFakeButton triggers FileUpload click action and after that the path/fileName is copied to fake textbox. Then I can click btnAdd and everything works fine in ff but not in IE.
In IE after choosing a file and closing dialog box the path/fileName is copied but when I press btnAdd (or click checkbox) the FileUpload textbox is cleared and nothing happens. After second press of btnAdd, btnAdd_Click starts but FileUpload is empty and it ends with error. Since I can't restore FileUpload textbox from txtFakeText is there any way to prevent FileUpload clearing?
This is how I did it, although I only have to design for IE so I haven't tested this in other browsers. Also, I used a label instead of a textbox to display the selected filename.
I have to give credit to this site for starting me on the right path: http://www.codeproject.com/Tips/296593/To-trigger-Choose-file-to-Upload-dialogue-box-with
Essentially, what I did was create two buttons, as you have done. I used CSS to make the file upload control button the same size as my "fake" button. Then, I set the z-index of my "fake" button to -1, and positioned it directly behind the file upload control button. Then, I set the opacity of the file upload control button to 0. This way, the "fake" button is not used and I do not run into the problem of the real file upload box being cleared when clicking submit. The last step, not detailed in the linked article, is to change the "onchange" for the file upload button to be a function that updates the value of the filename label.
Here is the code:
function updateUploadLabel() {
document.getElementById("<%= FileUpload1.ClientID %>").click();
document.getElementById("<%= lblFileName.ClientID %>").innerHTML = document.getElementById("<%= FileUpload1.ClientID %>").value;
document.getElementById("txtInstructions").disabled = "true";
document.getElementById("removeUpload").style.display = 'inline';
}
<asp:FileUpload id="FileUpload1" onchange="updateUploadLabel()" runat="server" style="position: relative; opacity: 0; filter: alpha(opacity = 0);left:0px;font-size:24px; z-index:50; width:100px;/*display:none;*/"/>
<input type="button" id="btnChooseDoc" value="Choose File..." onclick="updateUploadLabel()" style="height:30px; width:100px; z-index: -1; position:relative; left: -105px; top: -10px;" />
<asp:Label id="lblFileName" runat="server" text='No File Chosen' style="position:relative; left: -105px; top: -10px;"></asp:Label>

ASP.NET AJAX Toolkit ModalPopupExtender inside ListView behavior

I am hoping that someone can help shed some light on this issue I've been struggling over for the last couple of days. I have been using the AJAX Toolkit ModalPopupExtender outside of ListViews perfectly fine, but for some reason I can't seem to wrap my head around why this code is not working inside of a ListView item template.
Basically, what I am trying to achive is: a user is presented with some rows of data via the ListView in which each row displays a LinkButton with the text "Remove". I want the user to be able to click on this link, and a modal dialog box pop up and ask them if they are sure they want to do this. If they click the okay button, it should fire off an event and do the necessary database work and reload the page... if not, cancel the postback request and clear the dialog box.
With the code below, I have successuflly hooked into the link button via the targetid property of the ModalPopupExtender so the dialog does popup. However, the okay button does not fire off the event I've written (I've placed a breakpoint in the codebehind within the event, and it does not get touched). Also, the cancel button does not work as it normally would outside of the listview control.
I must be missing something fairly fundamental here, but I'm at a loss - any help would greatly be appreciated. I'm certainly open to alternative methods if this just isn't viable.
<ItemTemplate>
<tr>
<td align="center">
<asp:Label runat="server" ID="lblUserID" Text='<%# Eval("USERID") %>' Visible="false" />
<asp:LinkButton runat="server" ID="lnkRemoveUser" Text="Remove" />
<asp:Panel ID="removeUserModalPanel" runat="server">
<div class="popup">
<div class="loginTitleBar" id="Div1">
Remove User
</div>
<div class="popupBody">
<p>
Are you sure you want to remove this user?
</p>
</div>
<div class="popupControls">
<asp:Button id="btnRemoveUserOkay" runat="server" type="button" Text="Remove User"
onclick="btnRemoveUserOkay_Click" />
<input id="btnRemoveUserCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
<asp:ModalPopupExtender
ID="removeUserModalPopupExtender"
runat="server"
BackgroundCssClass="ModalPopupBG"
CancelControlID="btnRemoveUserCancel"
TargetControlID="lnkRemoveUser"
PopupControlID="removeUserModalPanel"
drag="false" >
</asp:ModalPopupExtender>
</td>
<td>
<asp:LinkButton ID="lnkUserName" runat="server" Text='<%# Eval("USERNAME") %>' />
</td>
<td>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FIRSTNAME") %>' />
</td>
<td>
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LASTNAME") %>' />
</td>
<td>
<asp:Label ID="lblEmailAddress" runat="server" Text='<%# Eval("EMAILADDRESS") %>' />
</td>
</tr>
</ItemTemplate>
Finally I can make this works. It's a little tricky though. Here are the steps:
Move the panel, the button close and the modalpopupextender outside the listview
Create a HiddenField or whatever control and associate this with the TargetControlID of the ModalPopupExtender control.
In the button on the ListView handle the Click event, and in the code behind call directly to the ModalPopupExtender.Show() method, and voilá.
It is a little dirty indeed, but the ModalPopupExtender seems to override the click event of the listview button when it's associated with the control.
Seems like a problem with having the ModalPopupExtender on a databound repeated row.
Stupid idea #1 : Could you try hiding lnkRemoveUser until the row is selected - then, in the SelectionChanged event, highlight the row, display the button, and hook the button to the ModalPopupExtender?
Stupid idea #2 : Have a hidden button outside the ListView, and hook up your ModalPopupExtender to that. Then have your linkbutton call that button's onclick ().

Categories