AjaxControlToolkit TabContainer ActiveTabChanged event fired twice when UpdatePanel and ToolkitScriptManager is used? - asp.net

I recently upgrade this configuration:
ASP.NET 2.0
AjaxControlToolkit, 1.0.20229.0
System.Web.Extensions, Version=2.0.0.0
To
ASP.NET 3.5
System.Web.Extensions, Version=3.5.0.0
AjaxControlToolkit , Version=3.5.40412.0
I have the following structure:
<asp:ToolkitScriptManager ID="PageScriptManager" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
<ContentTemplate>
<ajaxToolkit:TabContainer
OnActiveTabChanged="TabContainerCarga_ActiveTabChanged"
AutoPostBack="True">
<ajaxToolkit:TabPanel
ID="tabRelatorios"
runat="server"
HeaderText="Relatórios">
<ContentTemplate>
<CustomUserControl:relatorios id="CustomControl" Visible="False" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="CustomControl" />
</Triggers>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ... />
<ajaxToolkit:TabPanel ... />
<ajaxToolkit:TabPanel ... />
<ajaxToolkit:TabPanel ... />
All the has the same first structure. At the serverside code, I have:
protected void TabContainerCarga_ActiveTabChanged(object sender, EventArgs e)
{
//handles TabPanels show/hide and fill up forms grids.
}
CustomControl has a grid which has some post-backs to perform operation like adding and removing records. When CustomControl loads it fills two <asp:DataGrid /> components.
<asp:DataGrid /> load a list
with some text box, which the user
may fill out and press a button to
add records.
<asp:DataGrid
/> show any entered information. To history purposes.
The strange known behavior is, it actually fire ActiveTabChanged twice. In the first time, it act like I'm loading the CustomControl state for the first time and them goes do the event.
I can't use some solution I've seen like set isFormLoaded flag or even fire a javascript postBack function.
I think about placing a IsLoaded flag structured in a ViewState inside the control. And restart it after any fired event inside the custom control.
What do you think about this and there is any solution arround?

I couldn't solve this problem because it comes from the internal mechanics of this component. I wouldn't go through that jungle. So I asked a designer to draw cool tabs for me and wrote my own tab control using AJAX and Rest Services style. That's it! The behavior I wanted now I have it and works pretty nice now; controllable and loads less JavaScript code into the client machine. Stop using that shit!

Related

ASP.NET update panel nested refreshing

This code is in a user control . and i am providing a sample code structure to get an overview .
<Update Panel UpdateMode= "Conditional">
<panel></panel>
<panel>
<button></button>
</panel>
<updatepanel UpdateMode="Conditional"></updatepanel>
</Updatepanel>
so when i click a button in the second panel , i am supposed to hide that panel and it is happening but simultaneously the other panels are getting refreshed . what could be the possible reason for that ?
Based on the code snippet you may have a couple issues to fix:
Make sure you have a ScriptManager on the page with EnablePartialRendering="true"
Correct your markup by making the <UpdatePanel> elements ASP.NET UpdatePanel controls by prefixing them with "asp:".
Add UpdateMode="Conditional" to both of your UpdatePanel controls
Move the sections you want to update asynchronously into the UpdatePanel controls.
Example
<asp:ScriptManager ID="MyScriptManager" EnablePartialRendering="true" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="MyUpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" />
</ContentTemplate>
</asp:UpdatePanel>
The following article is a great resource to learn more about the UpdatePanel with details on it's capabilities.
Understanding Partial Page Updates with ASP.NET AJAX

All UpdatePanels posting back at the same time

I have a C# .net 4.0 website project with a fairly complicated filtered search page on it. There are multiple UpdatePanels that are added within a Repeater. When one UpdatePanel does a postback - all the other UpdatePanels also postback at the same time.
This becomes a problem because there can be lots and lots of UpdatePanels dependent on the number of items the user chooses to view. I know UpdatePanels are not ideal - I didn't write this but have to try and fix it quickly!
There is LandingPage that holds an UpdatePanel with a Repeater control inside. Within the repeater is a user control called Article. The Article control contains some HTML and a second user control called Save. The Save control has an UpdatePanel too.
The problem I have is that only the first btnSave event gets raised. So if I click "btnSave" it works but all subsequent button click events do not fire.
I have also noticed that ALL instances of the UpdatePanel in the Save control postback at the same time - is this normal?
So a simplified view of the page is like so:
LandingPage.aspx
<asp:UpdatePanel ID="pnl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Repeater ID="resultsRep" runat="server">
<ItemTemplate>
<uc:Article id="Article1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<asp:Button id="btnLoadMore" runat="server" Text="Load More" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadMore" EventName="Click" />
</Triggers>
<asp:UpdatePanel>
Custom User Control "Article"
<asp:PlaceHolder ID="ArticlePanel" runat="server">
<!-- Assorted HTML stuff here -->
<uc:Save id="Save1" runat="server" />
</asp:PlaceHolder>
Custom User Control "Save"
<asp:UpdatePanel ID="ctl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<asp:LinkButton ID="btnSave" runat="server" OnClick="btnSave_Click" CausesValidation="False" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
Thanks in advance as always.
EDIT
After further investigation, using Firebug console I found that the subsequent postbacks don't occur because the following error is thrown:
505|error|500|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.|
So it seems somehow I am posting back something dodgy?
The problem was down to the use of nested UpdatePanels. I don't know where the error itself actually comes from but after trial and error I figured out that the parent UpdatePanel wasn't configured properly.
The parent UpdatePanel should have been like so :
<asp:UpdatePanel ID="pnl" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
The difference being UpdateMode="Always" and ChildrenAsTriggers="true". The UpdateMode tells the parent UpdatePanel to refresh when any of the children reload. The ChildrenAsTriggers attribute allows child UpdatePanels to cause the refresh of the parent.
So now it works - mostly. I still have the issue of every single UpdatePanels posting back everytime. Its really inefficient but I can't seem to stop it.

How to force button do a full postback instead of asynchronous postback

In an ASP.NET 4.0 web application, I have a user control that is wrapped by an UpdatePanel (see the code below).
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Obviously, this works great for every ASP.NET control that causes a postback in my user control because it makes it occur asynchronously. However, there is one process that this doesn't work for!
I have an ASP.NET button (Create Report) in the user control that makes an asychronous request to the server. The server then creates an Excel spreadsheet and then places the spreadsheet in the HttpResponse to send back to the client's browser so they can open/save it. However, it blows up at this point because the request to the server is asynchronous and apparently you can't put a binary in the HttpResponse during an asynchronous request.
How do I get around this?
Register this button as synchronous postback control in user control's Page_Load method: ScriptManager.GetCurrent(Page).RegisterPostBackControl(CreateReportButton);
you can add triggers to UpdatePanels that allow full post back. here's an example
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnID" />
</Triggers>
</asp:UpdatePanel>
Make use of the triggers within the update panel to reference the custom control and an event registered on the report button within the control, e.g.
<Triggers>
<asp:PostBackTrigger ControlID="customCtrl" EventName="ReportButtonClicked" />
</Triggers>
Similar to Eric's answer. I have not tried this, but it may work...
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<UC:MyCustomCtrl ID="customCtrl" runat="server" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="customCtrl$btnID" />
</Triggers>
</asp:UpdatePanel>
I did something similar to this a while back for validation controls, so it seems logical that it work here too.
Use your DOM viewer (I use Chrome's element inspector) and see what your button's "NAME" is (not ID). And starting with the portion containing the overall user control's name, use the rest.

getting null path while uploading image upload in .net

I have used file upload control of asp.net but I am getting empty string while saving.my code-
<asp:FileUpload ID="fuProductLogo" runat="server" CssClass="file paddBottom5px" />
.cs code is-
if (fuProductLogo.PostedFile != null && fuProductLogo.PostedFile.ContentLength > 0)
{
...
}
but the .PstedFile and .CountLength is coming zero but the same code is working fine in another page.Please help.
There are several things to check here:
as #williem said, remove updatepanel from the form if you are using it
add enctype="application/x-www-form-urlencoded" in the form tag
Please remember to update your post after your code modifications and checks.
If the FileUpload is in an UpdatePanel it will be cleared on each ajax-postback. You can use multiple UpdatePanels around the FileUpload control and keep the FileUpload out of them. Also make sure that the button that triggers the actual upload does a real postback, not an asyncpostback. Do this by adding the button to the PostbackTrigger of it's UpdatePanel or by taking it out of the UpdatePanel.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server" />
<asp:Button ID="Submit" runat="server" Text="Submit" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Submit" />
</Triggers>
</asp:UpdatePanel>
You can also use an AsyncFileUpload control from the Asp.net Ajax Toolkit, it works inside an UpdatePanel but it is a little harder to get this to work.

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