Our problem/question revolves around an upload control that loses the selected file (goes blank) when a postback control is used (in this case, the dropdown list posts). Any insight into what we are doing wrong or how we can fix this? Below is our code and a summary of the problem.
Any help would be greatly appreciated.
Thank you!
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="row">
<asp:DropDownList runat="server" AutoPostBack="true" ID="CategorySelection" OnSelectedIndexChanged="CategorySelection_IndexChanged" CssClass="drop-down-list" />
</div>
<div id="SubCategory" class="row" runat="server" visible="false">
<asp:DropDownList runat="server" ID="SubCategorySelection" CssClass="drop-down-list" />
</div>
<div class="row">
<asp:FileUpload runat="server" ID="FileUpload" CssClass="file-upload" />
</div>
<div class="row">
<asp:Button ID="submit" runat="server" Text="Submit" CssClass="button" OnClick="submit_ButtonClick" />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="submit" />
</Triggers>
</asp:updatepanel>
In this form we have 2 DropDownList, 1 FileUpload and 1 submit button. Every time that the user selects one category, the subcategories are loaded (AutoPostBack=”true”).
The primary user flow works fine: User selects one category, subcategory and selects a file to be uploaded (submitted). HOWEVER, if the user selects a file first, and then selects a category, the screen will do a partial refresh and the selected file will disappear (field goes blank). As a result, the user needs to select the file again. This causes an issue because the fact that the file is no longer selected can easily be overlooked.
Seems straighforward --- but causing us a lot of grief. Any experts out there that can help?
BIG thanks!
That is the behavior of the input type=file i.e. it can't be pre-populated. Move the FileUpload outside of the UpdatePanel. In your markup, you could move both FileUpload and the submit Button outside of the UpdatePanel.
Related
I have the markup below, there is no triggers section and no setting of the triggers in the code behind. When I click on the checkbox, the page does update and show the hidden div (server side code sets visible), but page loading spinner in the page tab doesn't spin in chrome. If I remove the update and template tags, the page seems to act the same except that the page loading spinner spins.
What is actually happening? Is the page being reloaded or not? If the update panel is loading the page, why is it doing so without a defined AsyncPostBackTrigger?
<asp:UpdatePanel runat="server" ID="pnlMain">
<ContentTemplate>
<div class="control-group">
Hide Div
<div class="controls">
<asp:CheckBox ID="chkbx" CssClass="Input" runat="server" AutoPostBack="true" />
</div>
</div>
<div id="divToHide" runat="server">
stuff to hide when div is clicked
</div>
<div class="form-actions">
<asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Page is loaded in both cases. With Update Panel only Partial Page(Content inside the Content Template is updated) whereas in normal case entire page is re-rendered.
I have a user control with three Views inside MultiView, first two views contains different controls and each have a button to submit the form, both are working as expected. Third one has two asp image button both are not attached with any validation group, causes validation is also false but post back is not happening on clicking the button, there is no javascript error i already checked that, any help is appreciated. Following is markup.
<asp:View runat="server" ID="vwPayAsGuest">
<asp:Panel ID="divButtons" runat="server" CssClass="creditcardbuttons-container">
<div class="creditcardbuttons-container-left">
</div>
<div id="divRegularPayment" class="f-left">
<asp:ImageButton runat="server" ID="lbtnRegularCheckout" ToolTip="Pay with credit card"
AlternateText="Pay with credit card" OnClick="lbtnRegularCheckout_OnClick" CausesValidation="false"/>
</div>
<div id="divPayByPayPal" class="f-left padding-left15">
<asp:ImageButton runat="server" ID="submit" CausesValidation="false"
ImageUrl="https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ec-mark"
AlternateText="Pay via PayPal" ToolTip="Pay via PayPal (Express Checkout)" OnClick="lnkButPayPal_Click" />
</div>
</asp:Panel>
</asp:View>
I am trying to use the ASP.NET ajax rating control on my ASP.NET website. I have followed the exact steps from the video tutorial to use this rating control.
Here's my HTML code.
<div id="Rating" style="float:right; width:400px">
<div class="demoheading">Rating demonstration
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left;width:230px">
How much do you like this profile?
</div><br />
<asp:Rating ID="LikeRating" runat="server" CurrentRating="3" MaxRating="5"
StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyStarRating"
style="float:left" onchanged="LikeRating_Changed1" Height="40px"
Width="400px">
</asp:Rating><br />
<div style="clear:left;">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" />
<asp:Label ID="LabelResponse" runat="server" Text="[No response provided yet]"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</div>
</div>
My rating control is not appearing in the designer. However, when I hover that blank space it should be, it shows me the rating number as in the figure below. I did check the path of the images and the css I used for the star rating. Is there still something I am missing?
You do not have the proper path to your image or the images do not exist. The control is there, the styles that you declare for the different type of stars do not have the images.
Also, you are missing a semicolon here:
emptyStarCssClass="emptyStarRating"
style="float:left"
should be
emptyStarCssClass="emptyStarRating"
style="float: left;"
I would recommend inspecting the element to check what it shows the image path is.
I missed the in designer part. I have experienced some issues where designer does not quite understand the image paths and will flag the path as bad, but in actuality it is fine. Have you tested the page in debug mode?
I've been handed a huge Webforms project which I'm trying to understand, and I have a problem where an Update Panel is duplicating a lot of its content. The aspx code for the panel is huge, hundreds of lines long, but it basically looks like this simple example, only with lots more asp:TextBox and asp:ListBox.
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<div><table><tbody><tr><td>
<label>Search</label><asp:TextBox ID="Search" runat="server" />
<asp:LinkButton runat="server" OnClick="find_Click" >Find</asp:LinkButton>
</td></tr></tbody></table></div>
<div id="a"><table><tbody><tr><td>
<label>Result</label><asp:TextBox ID="Result" runat="server" />
</td></tr></tbody></table></div>
</ContentTemplate>
</asp:UpdatePanel>
and code behind like this.
public void find_Click(Object sender, EventArgs e)
{
Result.Text = "oranges";
}
When you click the LinkButton, I would expect to see in the result the <div id="a"> section, but with the text 'oranges' in the TextBox. What you actually get is <div id="a"> with 'oranges', followed by the original <div id="a"> with the empty TextBox. The worst bit is that it doesn't do it in this simple example, nor even in a page that I created that had all the original asp:TextBox and asp:ListBox but filled with dummy data. Can anyone point me to any good ways of approaching this problem?
Another solution would be to make sure all HTML tags are closed inside the asp:UpdatePanel. In my case, I've got the open header tag placed in the Site.Master file (outside of UpdatePanel control) and the closing header tag inside the UpdatePanel control (on aspx page). Because of that, every time the UpdatePanel postbacks it recreates the closing header tag again causing the content to be duplicated. After I placed the closing tag into Site.Master file, everything worked beautifully.
You might have already tried this, but in the actual problem page, is it possible to remove as many server controls out of the updatepanel and just leave in offending textbox and then see what happens? I'm guessing you'll probably have to comment out alot of .cs/.vb code, which can be a pain.
Also try removing the updatepanel and see what happens.
Some serious refactoring later, it now looks like (a very bloated version of) this.
<div><table><tbody><tr><td>
<label>Search</label><asp:TextBox ID="Search" runat="server" />
<asp:LinkButton runat="server" OnClick="find_Click" >Find</asp:LinkButton>
</td></tr></tbody></table></div>
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" RenderMode="Block" UpdateMode="Conditional">
<ContentTemplate>
<div id="a"><table><tbody><tr><td>
<label>Result</label><asp:TextBox ID="Result" runat="server" />
</td></tr></tbody></table></div>
</ContentTemplate>
</asp:UpdatePanel>
I'm trying to display an update progress loading image whenever my update panel does it's Ajax thing. I've looked around at tutorials and it seems really straightforward but I'm having no luck. Here is pretty much what I have...
<div id="panelWrapper">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdateProgress ID="TaskUpdateProgress" runat="server" DynamicLayout="False" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
<asp:Image ImageUrl="~/Images/ajax-loader.gif" Width="16px" Height="16px" runat="server" ID="TaskLoadingImage"/>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="UrlDiv" class="URLNotification">
<asp:Label ID="UrlLabel" runat="server" Text="URL:" AssociatedControlID="Url" />
<asp:HyperLink ID="Url" runat="server" Text="Click "Generate" to create the URL." />
</div>
<br />
<asp:CheckBoxList runat="server" ID="IncludeItems" TextAlign="Right">
<asp:ListItem Selected="True">Include 1</asp:ListItem>
<asp:ListItem Selected="True">Include 2</asp:ListItem>
</asp:CheckBoxList>
<br />
<div id="buttons" style="display:inline;">
<asp:Button ID="Generate" runat="server" OnClicked="Generate_Clicked" Text="Generate" />
<asp:Button ID="Add" runat="server" OnClientClick="add();" Text="Add"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I also have some absolute positioning styling in a stylesheet. I've tried a bunch of variations of what you see here and have not found much good information as to what may be the issue. Any ideas? If you need anything else, let me know.
EDIT: The only new information I've found is that...
"In the following scenarios, the UpdateProgress control will not display automatically:
The UpdateProgress control is associated with a specific update panel, but the asynchronous postback results from a control that is not inside that update panel.
The UpdateProgress control is not associated with any UpdatePanel control, and the asynchronous postback does not result from a control that is not inside an UpdatePanel and is not a trigger. For example, the update is performed in code."
I'm pretty confident neither of these fit into my case. All that is happening is the button (which is inside the update panel) is clicked calling some code behind which set's the URL text to be reloaded for the update panel.
I have also the same problem with the UpdateProgressPanel.
I found out that when you have placed an UpdateProgressPanel and associated it to an UpdatePanel, any postback from that UpdatePanel will cause the UpdateProgressPanel to show.
Another trick to do is to remove the AssociatedUpdatePanel parameter if you have a single UpdatePanel on the page, this will cause the UpdateProgressPanel to show every Async PostBack that happens.
UpdateProgressPanel can be placed anywhere in the code, except those areas that have predefined tags on it. It can be placed inside or outside the UpdatePanel and it will show if you have properly placed its CSS, Associated it to an UpdatePanel or just place it there and it will show up if an async postback result happens.
Don't put the update progress control inside the update panel control
Make sure the UpdateProgress 'DisplayAfter' is set up to 1000 (1 sec)
I guess I figured out what was going on. The issue wasn't with anything I was doing wrong with the UpdateProgress or Panel. It was that I had other stuff loading in the background that was apparently holding up the UpdatePanel's Ajaxyness.
So basically what happened was that the loading icon wouldn't show up on the initial page load. I realized this because I actually waited till after everything on the page was completely loaded to fire off the button. Sure enough the loader showed up.
I assumed that the update panel refresh would at least be requested the instant the click event was heard so the loader icon would immediately show during the time other stuff is loading. This doesn't appear to be the case though...
I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.
It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.
After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.
Happy coding
I also had a problem with the UpdateProgress not showing. Turned out the postback to the server was actually so fast it never had time to show. Adding a Thread.Sleep(10000) helped show the problem.
Create a new ASP.NET Ajax-Enabled Web Site and then paste these code in ascs and aspx file. Run it and you can see the update progress. You can use animated gif files too to show the progress...
ascx Page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdateProgress control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress" AssociatedUpdatePanelID="Panel">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" ID="UpdateButton" OnClick="UpdateButton_Click" Text="Update" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
aspx Page:
protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}