ASP.NET Webforms UpdatePanel duplicate contents - asp.net

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>

Related

asp:Menu stops working after a different control performs partial AJAX postback

This issue occurs in ASP.NET 4.6 and I've seen a few similar posts, but they usually referred not to the same control (built-in here) or ended up with a conclusion "just use a different/external control here: html link", which is not really an option for me.
First, some code
Site.Master
<div id="HeaderProper">
<div id="HeaderProperTitle">
<asp:Menu ID="HeaderProperMenu" runat="server" DataSourceID="HeaderProperSiteMap" Orientation="Horizontal"
BackColor="#ff2400"
RenderingMode="List"
StaticEnableDefaultPopOutImage="false"
StaticDisplayLevels="2"
StaticHoverStyle-BackColor="#000000"
StaticMenuItemStyle-HorizontalPadding="15px"
StaticMenuItemStyle-Height="42px"
DynamicHoverStyle-BackColor="#000000"
DynamicMenuItemStyle-HorizontalPadding="5px"
DynamicMenuItemStyle-BackColor="#ff2400"
DynamicMenuItemStyle-Font-Size="24px"/>
<asp:SiteMapDataSource ID="HeaderProperSiteMap" runat="server" />
</div>
SomePage.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1>Complete List</h1>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="SortOrderSelection">
Sort by
<asp:DropDownList ID="cbxSortBy" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="cbxSortBy_SelectedIndexChanged" />
</div>
<asp:Panel ID="SortedList" CssClass="top-margin five-columns" runat="server" />
<asp:Panel ID="Summary" CssClass="top-margin" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How to reproduce:
Choose an item in the DropDownList, which causes partial postback. The menu then stops working, that is - the drop down/hover menu doesn't open, but the first level links seem to be functional. Refreshing the whole page fixes the problems (duh?).
And, contrary to what I've found:
1) Menu is NOT inside an UpdatePanel, which I acknowledge is unsupported solution
2) Menu works fine when RenderingMode is set to Table, but generates a very ugly html code, which I would like to avoid. Not mentioning additional quirks in margins that have to be adjusted with ugly fixes.
3) I tried setting z-index: 1000...0 !important as suggested by some sources (on most menu related styles), but to no avail.
I would be grateful for any suggestions how this can be resolved while still using asp:Menu control in List rendering mode, possibly with as least intervention as possible. My point here is to use built-in functionality and keep the code clean from unnecessary JS, jQuery (if possible at all; otherwise I'd rather open a Connect case for this issue).
Thank you in advance.
Putting your menu into an update panel should work because it will indicate to the server to update it after the postback. Without this, any repost can create the risk of losing some events in your element. Refreshing works because you are refreshing the whole page and not only some element of it.

UpdatePanel with GridView with LinkButton with Image Causes Full Postback

So this might be a fairly specific issue but I figured I'd post it since I spent hours struggling with it before I was able to determine the cause.
<asp:GridView ID="gvAttachments" DataKeyNames="UploadedID" AutoGenerateColumns="false" OnSelectedIndexChanged="gvAttachments_SelectedIndexChanged" runat="server">
<EmptyDataTemplate>There are no attachments associated to this email template.</EmptyDataTemplate>
<Columns>
<asp:TemplateField ItemStyle-Width="100%">
<ItemTemplate>
<asp:LinkButton CommandName="Select" runat="server"><img src="/images/icons/trashcan.png" style="border: none;" /></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In the ItemTemplate of the TemplateField of the GridView I have a LinkButton with an image inside of it. Normally I do this when I have an image with some text next to it but this time, for whatever reason, I just have the image. This causes the UpdatePanel to always do a full postback.
Instead of changing the markup, you can goto web.config and specify ClientIDMode="Auto" in the pages tag.
Reason why UpdatePanel behaving like this is because the ClientIDMode is getting generated will be too long for UpdatePanel to register. So the ClientID got truncated in middle and such control will be treated like unregistered Control.
For more information read the following:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
Change the LinkButton to be an ImageButton and the problem is solved.
<asp:ImageButton ImageUrl="/images/icons/trashcan.png" Style="border: none;" CommandName="Select" runat="server" />
Above solutions also work, But There is one more thing to check. Check form tag for your page. If id attribute is missing, you will get same issue.
If you form tag is as given below (without id), you will get issue:
<form runat="server">
<!-- your page markup -->
</form>
Please add id, as given below:
<form id="form1" runat="server">
<!-- your page markup -->
</form>
You will not need to update ClientIDMode in web.config or page or control.
You will not need to change your linkbutton in markup.
You will not need to register control for asynch postback from code behind.

queue asp.net UpdatePanel postbacks

is there a way to queue postbacks with UpdatePanel?
I have a form with many textboxes. each textbox is wrapped inside it's own UpdatePanel with AutoPostBack set to true. so, when textbox changes, postback occurs.
viewstate is disabled (so do not need to worry about it).
the problem appears when user changes one text box and then quickly tabs to the next text box, changes it, and tabs again. some of the postbacks are getting lost and I want to avoid that.
You can get a client-side "hook" when the update panel is about to fire. This means that you could, at least, temporarily disable the text boxes (or have some sort of 'please wait' notification) while the update panel is refreshing.
The following snippet of ASP.NET/Javascript shows how to intercept the update panels firing and disable the textboxes.
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel runat="server" ID="updatePane1">
<ContentTemplate>
<asp:TextBox runat="server" ID="textBox1" AutoPostBack="true" OnTextChanged="textBox_TextChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdatePanel runat="server" ID="updatePane2">
<ContentTemplate>
<asp:TextBox runat="server" ID="textBox2" AutoPostBack="true" OnTextChanged="textBox_TextChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args) {
if (args._postBackElement.id == 'textBox1' || args._postBackElement.id == 'textBox2') {
document.getElementById('textBox1').disabled = true;
document.getElementById('textBox2').disabled = true;
}
}
</script>
I know this isn't exactly what you originally asked for ("is there a way to queue postbacks with UpdatePanel"), but the net effect is that it forces the user to queue up their requests so no more than one is being processed at a time. You can probably amend this to something more elegant too.
There's no built in way to control this. jQuery has some pretty nifty stuff that makes AJAX calls pretty simple. You might try looking into handling your own postbacks that way.
I know, this is not a answer to your question. But I would recommend a re-think, if you really need to wrap each text box with an update panel. Update panels are useful but you need to be careful in their usage. An plain jQuery Ajax solution may be better in your scenario.

AJAX.Net - UpdatePanel doesn't delete old content

I'm using AJAX.Net (3.5) inside a usercontrol.
The usercontrol contains an UpdatePanel, and inside the UpdatePanelthere is a MultiView.
The ScriptManager is included in the page that act as container for the usercontrol.
To switch between views the usercontrol contains a simple button.
When I click it, the View is changed so the old content is hidden and new content is displayed.
My problem is that the content isn't hidden at all.
The view changes and the new content is displayed, but the old one remains on the page.
To isolate the problem, I tried changing the multiview and switching visibility of a simple label, but the behavior is the same.
Any ideas?
oh I understand. It's all right then. The problem is not of Ajax here. It's just you cannot embed something in <table> tags. In this case, you can try something different than the <table> control. Maybe a <div> or something else. I don't know exactly what sort of situation you have. Maybe you explain the result you want to achieve so I can give you some advice.
Regards
It seems that AJAX.Net doesn't work very well if you have part of a table outside the UpdatePanel.
On my control I want to show or hide some rows of a table. I included only the tr and td tags inside the updatepanel.
To reproduce the problem:
<table>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<tr>
<td>
<asp:Label ID="lblToShow" runat="server" Text="Label to show" Visible="false" />
<br />
<asp:Label ID="lblToHide" runat="server" Text="Label to hide" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</table>
If you change the visibility using:
lblToShow.Visible = true;
lblToHide.Visible = false;
The text of both labels are shown on the page (lblToHide does not hide)
If you move the table tags inside the UpdatePanel everything works fine.
call
updatepanel.Update()
after you make the changes to your updatepanel
or try
updatepanel.Controls.Clear();

Unable to get ASP.Net UpdateProgress to display

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 &quotGenerate" 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);
}

Resources