ASP.NET - Ajax Control Toolkit - TabContainer always hidden - asp.net

I used the following code to add TabContainer to page
<asp:TabContainer ID="TabContainer1" runat="server">
<asp:TabPanel runat="server" HeaderText="tab one" ID="TabPanel0">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel runat="server" HeaderText="tab two" ID="TabPanel1">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
but when the page is rendered TabPanel is always Hidden,I wateched the html code by Firebug and found visibility is hidden... what is the problem?
http://i.stack.imgur.com/m1eSW.jpg

Have you tried to set the ActiveTab-Property(from codebehind) or the ActiveTabIndex from codebehind or aspx?
You could also check if it works if you explicitly set the display to visible:
ActiveTabIndex="0" style="display:block;visibility:visible;"
Are you sure that the Ajax libraries are loaded correctly? Do you have other Ajax-Controls inside of your TabContainer? Check if all of your html in that page is valid.
Are you using the latest AjaxToolkit and the ToolkitScriptManager instead of the ScriptManger?

You need to use the Script Manager from the Ajax Control Toolkit, add it after the form tag.

i had the same issue and after 2 hours of googling i found a solution. In my case I had to change asp:ScriptManager to ajaxToolkit:ToolkitScriptManager.

You may want check that you have used ToolkitScriptManager instead of ScriptManager. This will solve your problem.

We've solved this problem at our company, after trying everything found on websites by changing the website's appPool from Classic to Integrated.

In my case: The active tab was hidden (server side: Visible="false").
It seems if you activate in server side a hidden tab, it'll add visibilty:hidden to the tabcontainer!

Try setting ActiveTabIndex="0" on the TabContainer

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

Calendar control without postback

I notice the calendar control in ASP.NET does not have an AutoPostBack property. I want that when I select a date from the control, the control must not post back the page. How do I do that?and one thing more when i hover over on the calender it shows me a script. "javascript:__doPostBack('Calendar2','5098')". So my question is how to disable this javascript to don't postback the values
There is no way to turn off the postbacks to the server but you can use updatepanel control which can help you some what.
According to PLBlum at the ASP.NET forums:
The Calendar control included with ASP.NET uses postbacks only. If you
added Microsoft ASP.NET AJAX to the page and put the calendar into an
UpdatePanel, it can reduce the appearance of postbacks by using
callbacks. But it still makes a trip to the server for each click on a
date or month.
Many people have created replacements to the Calendar control that
uses javascript to do the work. I am the author of one, in "Peter's
Date Package". You can locate others in these sites: the Control
Gallery (here under Resources), www.123aspx.com, and www.411asp.net.
You can add like following
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="ad_Cal" runat="server" OnSelectionChanged="ad_Cal_SelectionChanged" ></asp:Calendar>
<asp:Button ID="btn_Del_Day" runat ="server" Text ="Remove Day" OnClick="btn_Del_Day_Click" UseSubmitBehavior="False" BackColor="#4AA3DF" Font-Bold="True" ForeColor="White" />
<asp:Button ID="btn_sort_Date" runat="server" Text="Sort Days" UseSubmitBehavior="False" BackColor="#4AA3DF" Font-Bold="True" ForeColor="White" OnClick="btn_sort_Date_Click" />
<asp:ListBox ID="lst_ad_dates" runat="server"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
notice that you should use UseSubmitBehavior="False" with buttons also to stop postback for buttons in the same updatePanel
It works fine
I think you can use "CalendarExtender" from AjaxToolkit
<asp:TextBox ID="txtCalendarExtender" runat="server"></asp:TextBox>
<cc3:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtCalendarExtender" Format="dd/MM/yyyy">
</cc3:CalendarExtender>
Remember to add this code at the top of your page:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc3" %>

AjaxControlToolkit CalendarExtender Control not working in my website

I' using the AjaxControlToolkit CalendarExtender in my web site but after uploading it does how show the calendar control. I have registered the control on the page itself. The page postback when I click the image on which I applied the control.
What can be the reason of this?
Check whether you added ToolkitscriptManager in your page, which is in AjaxToolkit
If you are using an ImageButton to show the calendar,
then use ajax control toolkit and put these controls
<asp:ToolkitScriptManager runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="calIcon.jpg" />
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox1"
PopupButtonID="ImageButton1" runat="server">
</asp:CalendarExtender>
If you are still getting the page postback when clicking the ImageButton, you can add onClientClick='return false;' to the imageButton
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="calIcon.jpg"
OnClientClick="return false;" />
Drag and place Script manager at top of the ajax control or at top of the form.
As you said that ajax calender works fine on local but when you uploaded it it started creating problems following are the workarounds give them a try.
Check that whether you uploaded the ajax toolkit dll on the server or not.
secondly make sure that you uploaded updated web.config file.
let me know if its helpful otherwise i will try finding other workarounds

Drop Down List (in Update Panel) causing FULL PostBack!

I have a problem with my AJAX and ASP.NET 3.5 :(
Problem is really weird, as I'm using the same thing on different page and it works fine in there, but on this specific page, this is not working.
Here's what I have:
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional" Visible="true" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="ddlNewService_PortTelco" runat="server" Width="250" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="Provision_PortedTelcoChanged"></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
On the way before the DropDown there is one DIV (html one), and then few asp:Panels.
I do not understand why this is causing a FULL POST BACK ?!
Any ideas ? Thanks
i had the same problem... altho it's not showing in the copied code here, check to make sure you don't have any controls with ClientIDMode=Static within the updatepanel .... make them inherit
at least any controls that may trigger a postback
Me having the same problem...
CHECK your WEB.CONFIG
<xhtmlConformance mode="Legacy"/>
for this line.. and JUST REMOVE IT!!
Worked for me. Thanks http://andrew-murphy.co.uk/?p=152
You have your drop down list with an AutoPostBack set to true. That's why you have it post back instead of AsyncPostBack, if that is what you wanted.
Remove the AutoPostBack=true from the dropdownlist
and set an Async trigger for your UpdatePanel set to the dropdownlist and its eventname="SelectedIndexChanged"
Excuse my lack of programing skills :| It all worked all the time, but because one of the actions page "looked" like it's POST BACKED, when it wasn't. What a shame!!!
Sorry for waisting Your time!
Setting the AutoPostBack attribute to true should be enough to cause a partial postback but it's not what happens and a full postback is triggered instead as you correctly described.
The following workaround works for me:
Drop the AutoPostBack attribute.
Trigger the postback using the "onchange" client side event.
This is how the original DropDownList should look like:
<asp:DropDownList ID="ddlNewService_PortTelco" runat="server" Width="250" CssClass="dropdown" OnChange="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(this.name, '', true, '', '', false, true))" OnSelectedIndexChanged="Provision_PortedTelcoChanged"></asp:DropDownList>
For more details regarding the WebForm_PostBackOptions parameters see below:
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit)
http://msdn.microsoft.com/en-us/library/system.web.ui.postbackoptions_members(v=VS.90).aspx
If you have some asp component with Autopostback="true" and ClientIdMode="Static", you have to use the trigger.
Like this:
<asp:UpdatePanel ID="upPrinceOffuce" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPrintOffice" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="ddlPrintOffice" runat="server" ClientIDMode="Static" AutoPostBack="true" ...blah blah
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
How do you bind your DropDown? The code that you have provided works on my side with static items. Perhaps it is something in the other controls that is causing the problem.
I have noticed that your UpdatePanel has its UpdateMode property set to conditional, however you haven't defined any triggers.You can try to explicitly set that the update panel should perform async postback when your dropdown triggers its selectedIndexChanged event. You can use something like the following markup:
<asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Conditional" Visible="true"
RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="ddlNewService_PortTelco" runat="server" Width="250"
AutoPostBack="true" OnSelectedIndexChanged="Provision_PortedTelcoChanged">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlNewService_PortTelco" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Set AutoID value to ClientIDMode property. It worked for me. I have had different behaviour in different browsers (i.e. Google chrome and Firefox).
Had the same problem when the Dropdownlist Autopostback attribute was set to true
and fixed the problem by adding the dropdownlist ID to the updatepanel trigger
I had this problem. My Dropdownlist was inside of an HTML table and I had my Update Panel wrapped around two individual rows. I fixed the problem by wrapping the Update Panel around the entire table rather than just the two rows.
One alternative to fix this issue is:
Declare the library
using AjaxControlToolkit;
Then you can do something on these lines
private void InitControl()
{
//FIX - DROP DOWN
ToolkitScriptManager scrManager = (ToolkitScriptManager)Page.Master.Controls[0].Controls[0].FindControl("manScript");
scrManager.RegisterAsyncPostBackControl(ddlNewService_PortTelco);
}

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