How do I use AJAX controls when my site was not created with AJAX enabled?

My site is not originally created with AJAX Conotrol Toolkit Web Site. How do I use the TabContainer and TabPanel?

Step 1 - Add the following references to your project...

.NET: System.Web.Extensions

.NET: System.Web.Extensions.Design

PROJECT / BROWSE: AjaxControlToolkit

Step 2 - Modify your web.config (add in the bits you don't have)

<configSections><sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"><section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/><section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/><section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/></sectionGroup></sectionGroup></sectionGroup></configSections><system.web><pages><controls><add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></controls></pages><compilation debug="true"><assemblies><add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/><add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Management, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></assemblies></compilation><httpHandlers><remove verb="*" path="*.asmx"/><add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/></httpHandlers><httpModules><add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></httpModules><system.webServer><validation validateIntegratedModeConfiguration="false"/><modules><add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></modules><handlers><remove name="WebServiceHandlerFactory-Integrated"/><add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/><add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/></handlers></system.webServer>

Step 3 - Top of your aspx page

<%

@.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>
<%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

I think that's about it!

Thanks! I'll give that a try. By the way, does the IIS server needs to have some kind of update for all my AJAX enabled pages to work?

As long as you've installed the ASP.NET AJAX (downloadable from this site ajax.asp.net) then you'll be fine - it has to be installed on the machine you're using as the web server as it places itself in the GAC.

How do I change the TabControl background images?

Hi, Does anyone know how I can change the folder images in an AJAX 1.0 TabContainer? I had recently posted in hopes of finding an existing CssClass, but no luck. Is it possible to change these images? I want to swap out that folder image that contains the yellow stripe header.

Thanks! Jason

Currently they are hard-bound to tab implementation. If you could open a work itemhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/Create.aspx we will investigate possible solutions like moving the tabs.css file and the images out of the control code so that it can be easily configured by end users.

The owner of the TabPanel and Calendar extenders has just posted a blog that documents how to customize a tabpanel and calendar. There is a cssclass property that can be set that contains the settings for the different classes. Seehttp://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx.

How do I access controls in a TabContainer for FormView Select Parameters

I have a page with a gridview which is inside a tab panel.

Depending upon the selection in the GridView I need to set a Select Parameter for a FormView on another area of the page.

I simply get the error "Could not find control 'GridView2' in ControlParameter 'PoemID'"

Any suggestions ?

i got the same problem trying to access a label inside a tabcontainer...

someone pease help us!

I have had some success with resolving a similar problem by adding the name of the container to to the ControlId parameter as follows: ContainerName$Gridview2

I have an UpdatePanel with a textbox inside, further down the page I have a tab panel that needs to reference the value entered into the textbox and was able to get it to work by having the following syntax:<asp:ControlParameterControlID="UpdatePanel1$TextBox1" ...... what I can't work out is how to reference the same textbox from the tabpanel if it was placed within another tabpanel above or a different container such as an accordion panel. let me know if this gives you any clues...

Found any solution yet? I'm also facing the same problem. Thank you for sharing.

Men, thanks to you I could fix my application...

You just have to do the same with all the controls of the panel, but remember to use the tab container and the tab panel, OK... Here my example... Thnaks

--

SelectMethod="GetEmpleado_MByNumero"TypeName="RecursosHumanoBLL"UpdateMethod="UpdateEmpleadosMByNumeroEmpleado"OldValuesParameterFormatString="{0}">

<SelectParameters>

<asp:ControlParameterControlID="udpConsultaEmpleado$tcEmpleados$tpFiltro$gvEmpleados"DefaultValue="1"Name="Numero"

PropertyName="SelectedValue"Type="Int32"/>

</SelectParameters>

--

I hope it work for you too

How do i abort Ajax TabContainer Tab Change?

I have a Ajax TabContainer that has 3 tabs and each of the tab contains a formview to display/update data. When the user modifies any data in the edit mode in the formview and tries to change tab without updating the data, i would like to display a warning message to alert the user that he/she has some unsaved data in the form and abort the tab change. I sort of have an idea how to do it but somehow it's giving me a runtime javascript object reference = null runtime error on sender.set_activeTabIndex(0); in tabChanged(). Can someone help please? Thanks.

Current Code:

<script type="text/javascript">

var isDirty = false;

var prevTabIndex = 0;

function tabChanged(sender, args)

{

if (isDirty)

{

sender.set_activeTabIndex(0);

prevTabIndex = parseInt(sender.get_activeTabIndex());

}

}

function setDirty(objID)

{

if (document.getElementById(objID).value != document.getElementById(objID).defaultValue)

{

//alert("Old Value: "+document.getElementById(objID).defaultValue+", New Value: "+document.getElementById(objID).value);

isDirty=true;

}

}

</script>

<cc1:TabContainerID="TabContainer1"runat="server"Width="818px"Height="260px"ActiveTabIndex="0"OnClientActiveTabChanged="tabChanged">

<cc1:TabPanelID="TabPanel1"runat="server"HeaderText="TabA">

<HeaderTemplate>TabA</HeaderTemplate>

<ContentTemplate>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:FormViewID="fvA"runat="server"DefaultMode="readonly"DataSourceID="dsA"OnModeChanging="changeFormViewMode">

<ItemTemplate>

FieldA :<%# Eval("FieldA") %>

</ItemTemplate>

<EditItemTemplate>

FieldA:

<asp:TextBoxID="TextBoxA"runat="server"Text='<%# Bind("FieldA") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelID="TabPanel2"runat="server"HeaderText="TabB">

<HeaderTemplate>TabB</HeaderTemplate>

<ContentTemplate>

<asp:UpdatePanelID="UpdatePanel2"runat="server">

<ContentTemplate>

<asp:FormViewID="fvB"runat="server"DefaultMode="readonly"DataSourceID="dsB"OnModeChanging="changeFormViewMode">

<ItemTemplate>

FieldB :<%# Eval("FieldB") %>

</ItemTemplate>

<EditItemTemplate>

FieldB:

<asp:TextBoxID="TextBoxB"runat="server"Text='<%# Bind("FieldB") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

Hi Sazabi,

After a quick glance, I found that there maybe a endless loop in your code. When you change the actived Tab, it will raise OnClientActiveTabChanged event and there's set_activeTabIndex() in your code, then it will raise OnClientActiveTabChanged once more.

You should do some modification. For example:

var flag = false;
function tabChanged(sender, args){
if(flag) {flag = false; return;}
flag = true;
sender.set_activeTabIndex(0);
prevTabIndex = sender.get_activeTabIndex();
}

Best regards,

Jonathan

how can i set tabpanels on right side of a tabcontainer

HI all,

How can i set tabpanels on right side of a tabcontainer

hello all...

does anyone know.. please do write a reply...

i see only no replies