I have a input text box and the button when the button is pressed whatever is in the textbox should be appended as a querystring and be redirected to another url. However I need to click the button twice before the redirect happens.
This is the aspx code
<div class="userInputTextBox" style="margin-left: auto; margin-right: auto; margin-top: 10px;">
<asp:TextBox
placeholder="Enter costumer ID"
ID="TextBoxID1"
runat="server"
AutoPostBack="true"
Columns="80"
Visible="true">
</asp:TextBox>
<asp:Button runat="server" Text="Search" OnClick="Search" />
</div>
Code behind with the Search method.
protected void Search(object sender, EventArgs e)
{
Response.Redirect(String.Format("UserDetail.aspx?UserID={0}", Server.HtmlEncode(TextBoxID1.Text)));
}
Ok I figured that I only needed to delete the AutoPostBack="true" property and it works ok now
Related
I have problem with Multiview in ASP.NET webform. I am building a form, where on the same page a user should upload his avatar in the first form and on the second form user should enter profile info and upload a document. The problem is when I switch between the forms in Multiview, it refreshes my pages and I lose all my data. For example if user uploads his avatar and goes to the profile to enter info, and suddenly decides that he wants to change his avatar and switches back to the username tab, his already uploaded avatar is lost. I have tried to solve it with jQuery tabs, but I did not have the wanted result. Also I have tried to add an Update Panel to the Multiview and Script Manager, also id did not work for me. If anybody has a clue how to solve this, I would be very grateful!
Here is Designer.cs
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="ViewForm1" runat="server">
<div class="multiviewButtons">
<asp:Button ID="Button1" runat="server" Text="Username" OnClick="Button1_Click"/>
<asp:Button ID="Button2" runat="server" Text="Profile" OnClick="Button2_Click"/>
</div>
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
<asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>
<asp:FileUpload ID="uploadAvatar" runat="server"/>
</asp:View>
<asp:View ID="ViewForm2" runat="server">
<div class="multiviewButtons">
<asp:Button ID="Button3" runat="server" Text="Username" OnClick="Button1_Click"/>
<asp:Button ID="Button4" runat="server" Text="Profile" OnClick="Button2_Click"/>
</div>
<asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
<asp:Label ID="Profile" runat="server" Text="Insert your pdf document"></asp:Label>
<asp:FileUpload ID="uploadDocument" runat="server"/>
</asp:View>
</asp:MultiView>
And in my CodeBehind.cs file
protected void Button1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void Button2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
Actually, this is one of those cases in which is better to roll your own!!
And it turns out in most cases its less work.
So, move the two buttons outside of the two "panels".
And in fact, lets dump the whole multi-view, and use simple markup.
In this case, it turns out its probably less work.
So, this markup:
<asp:Button ID="Button1" runat="server" Text="Username" CssClass="btn"
OnClientClick="myshow(1);return false;"/>
<asp:Button ID="Button2" runat="server"
Text="Profile" CssClass="btn"
Style="margin-left:15px"
OnClientClick="myshow(2);return false"/>
<script>
function myshow(iMyShow) {
if (iMyShow == 1) {
$('#View1').show()
$('#View2').hide()
}
if (iMyShow == 2) {
$('#View1').hide()
$('#View2').show()
}
}
</script>
<br />
<br />
<div id="View1" style="display:normal">
<asp:TextBox ID="txtUsername" runat="server" AutoPostBack="true" placeholder="Enter your username"></asp:TextBox>
<asp:Label ID="Avatar" runat="server" Text="Insert Avatar"></asp:Label>
<asp:FileUpload ID="uploadAvatar" runat="server"/>
</div>
<div id="View2" style="display:none">
<asp:TextBox ID="txtProfile" runat="server" AutoPostBack="true" placeholder="Enter your profile info" TextMode="Multiline"></asp:TextBox>
<asp:Label ID="Profile2" runat="server" Text="Insert your pdf document"></asp:Label>
<asp:FileUpload ID="uploadDocument" runat="server"/>
</div>
<br />
<asp:Button ID="cmdDone" runat="server" Text="Submit" CssClas="btn" />
So, two REALLY simple divs, and two simple buttons. they have NO server side code.
So, you now get this:
Since we hide/show the div with some simple js code (jQuery), then the above has no post-back and is really simple.
I fact, a nice touch I used for years?
Well, when you click on one of the two buttons to select/show the simple "div"?
You often can't tell which "fake tab" we are on.
So, in place of the two buttons?
Drop in a Radio Button list. Once again, we don't need a post-back, but REALLY nice is a radio button list SHOWS which button is selected!!!
So, drop in radio button list, enter the two button text values (all wizards). Set the layout to be horizonal (not vertical).
So, now we have this:
(edit/add items with wizard, and enter your two "fake" tab control names
So, we now have this:
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="rMyChoice">
<asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
<asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
</asp:RadioButtonList>
Now, I SHOULD be able to add the onclick event to the rb list, but a rendering issue causes the rb to trigger 2 times, so, we have to add the onclick (this is client side) to each selection.
With the above, then the Radio button shows which selected - which is rather nice for the user.
eg this:
Like anything, the default rblist and even spacing looks "horrible".
but, we can style the rb list. So, say this:
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="rMyChoice" >
<asp:ListItem onclick="myshow(1)" Value="1" Selected="True">UserName</asp:ListItem>
<asp:ListItem onclick="myshow(2)" Value="2">Profile</asp:ListItem>
</asp:RadioButtonList>
So, now we get this:
So, a few simple divs tend to be less work. you can as noted drop in two buttons.
So a rb list is nice since it shows/gives feedback as to which option in the rb list is selected. Toss in a style sheet (which even with your original buttons etc. you probably required)?
Then all in all, I think we wound up with LESS markup, no server post-back, and in fact I use the above trick for MOST of my pages - (very much like a menu in a given page). So, this works if you have 3 or 5 choices.
As for that style sheet for the rb list. Have to dig it up and open it!!! - not looked at it for years.
Oooo - more then expected, but the css file was this:
.rMyChoice h1 {
color: hsla(215, 5%, 10%, 1);
margin-bottom: 2rem;
}
.rMyChoice section {
display: flex;
flex-flow: row wrap;
}
section > div {
flex: 1;
padding: 0.5rem;
}
.rMyChoice input[type=radio], input[type=checkbox] {
display: none;
cursor: pointer;
}
.rMyChoice label {
display: block;
background: white;
border: 2px solid hsla(150, 5%, 75%, 1);
border-radius: 25px;
padding-left: 8px;
padding-right: 8px;
text-align: center;
box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);
position: relative;
margin-right: 9px;
}
.rMyChoice input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
background: hsla(150, 5%, 75%, 1);
color: hsla(215, 0%, 100%, 1);
box-shadow: 0px 0px 20px hsla(150,5%, 75%, 0.75);
}
.rMyChoice input[type="radio"]#control_05:checked + label {
background: red;
border-color: red;
}
.rMyChoice p {
font-weight: 900;
}
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
Here is a code tag code of asp.net
and there is a Image button where i want code on click event for download item
i try to code on click event but it was not working
<asp:ListView runat="server" ID="ListView1" GroupItemCount="1">
<LayoutTemplate>
<div>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div style="margin-left: 20px; border: 2px rgba(255, 102, 0, 0.36)
dotted; width: 900px; padding: 10px;">
<video src='<%# "Handler.ashx?id=" + Eval("id") %>'
width="900" height="400" controls="" preload=""></video>
</div>
<div style="width:950px; height:90px;" align="right">
<asp:ImageButton ID="ImageButton1"
ImageUrl="images/download-button.jpg" runat="server" width="230px"/>
</div>
</ItemTemplate>
<GroupSeparatorTemplate>
<div style="clear:both"></div>
</GroupSeparatorTemplate>
<EmptyDataTemplate>
</EmptyDataTemplate>
</asp:ListView>
Here is a c# Private code class on same page that is
Private void Download(string ID)
{
some code here for download
}
please let me know how can i code on image button for download a file.
Error:
Invalid postback or callback argument.
Event validation is enabled using
<pages enableEventValidation="true"/> in configuration or
<%# Page EnableEventValidation="true" %> in a page.
For security purposes, this feature verifies that arguments to
postback or callback events originate from the server
control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to
register the postback or callback data for validation.
button control is inside listview why dont you give it Command-name and then run the Item-command of the listview.
e.g
Assign the CommandName property of the Image button and then in ItemCommand of listview write
<asp:ImageButton ID="ImageButton1" ImageUrl="images/download-button.jpg"
runat="server" width="230px" CommandName ="Download"/>
if (e.CommandName = "Download")
{
WriteYour Code here..
}
for accessing that button in listview you should use item command event like this:
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
if (e.CommandName == "EditRecord")
{
}
else if (e.CommandName == "DeleteRecord")
{
}
}
you can also use the onclick event of button but that's not recommended way of doing. you have to manually add the OnClick="ImageButton1_OnClick()" in button markup and then put the event manually in the code behind file
protected void ImageButton1_OnClick(object sender, EventArgs e)
{
}
Regarding your Invalid postback or callback argument error, some html is generated by some control. you have to overview your whole webform, and register any script you are using under scriptmanager. or if nothing works out you can disable this check. <%# Page EnableEventValidation="false" %>
I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.
You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>
I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.
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>