Showing posts with label net. Show all posts
Showing posts with label net. Show all posts

Wednesday, March 28, 2012

update several textboxes from different services

I am trying to write my first application using atlas. what i want is to have 3 labels and one textbox. and one button.

the user enters a word into the textbox and clicks the button. what i then want to happen is for all 3 labels to be populated by calls to 3 separate webservices. sounds simple enough but..

these webservices may take some time to return, and i don't want to postback the entire page and then the user have to wait for each service to return before the page reloads.

What i want is for each label to be updated independently, so label1 migth be updated before 2 and 3
and 3 might be updated before 2. but at least the time the user has to wiat before something is returned is only as long as it takes for the first label to be updated.

i've read the following article on codeproject
http://www.codeproject.com/Ajax/HelloAtlas.asp

but this just deals with a partial postback to the same page, which isn't what i need to do.

If anyone can help or point me in the direction of an article that does something similar to what i would like to do, i'd appreciate it loads.

hello.

well, the scenario you describe can be easilly achieved by using the client portion of atlas. check this page:

http://atlas.asp.net/docs/atlas/doc/services/consuming.aspx#simple


Thanks for the reply. funnily enough i'd just started reading that tutorial.

I have made some progress. i enter a value in a texbox click a button. then 2 webservices are called asyncronously (ws1 sleeps for 5 seconds and returns a string ws sleeps for 2 seconds and returns a string) the results from these ws are then displayed in 2 textboxes.

However in order for the results to update these textboxes i've had to use standard html tags, not asp.net labels, i guess because they are generated server side.

What i would like to do is combine what i have so far with the display opf a progress animation like in this codeproject article.

http://www.codeproject.com/Ajax/HelloAtlas.asp

i think what i'm asking is how can i control an update panel and updateprogress cotnrol via javascript.

all i want it to be able to is whilst the webservice is being called, display a little .gif, and then when the webservice returns output the results within a dif

below is my code so far. any help would be appreciated

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"><Services><atlas:ServiceReferencePath="WebService.asmx"/><atlas:ServiceReferencePath="WebService2.asmx"/></Services></atlas:ScriptManager><div></div><inputid="inputName"/><inputid="buttonGo"type="button"value="GO"onclick="return OnbuttonGo_click()"/><atlas:UpdatePanelID="wsOne"runat="server"><ContentTemplate><inputid="Label1"type="text"/>

<inputid="Label2"type="text"/>

</ContentTemplate>

</atlas:UpdatePanel>function OnbuttonGo_click()

{

//Oh yes. method one gets called first but 2 returns first oh yes as ws one sleeps for 5 secs and ws2 only sleeps for 2.//now need to look at batching//and also need to look at how to update sections of the html page with the results.//can i use updatepanels?

requestSimpleService = WebService.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteOne,

//Complete event

OnTimeout

//Timeout event

);

//Call script proxy passing the input element data

requestSimpleService = WebService2.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteTwo,

//Complete event

OnTimeout

//Timeout event

);

returnfalse;

}

function OnCompleteOne(result)

{

document.getElementById(

'Label1').value = result;

}

function OnCompleteTwo(result)

{

document.getElementById(

'Label2').value = result;

}

function OnTimeout(result)

{

alert(

"Timed out");

}


Ok, made a bit more progress. i can now output my results to separate divs.

All i need to be able to do now is to display a .gif in each div until the function returns.

function OnCompleteOne(result)

{

document.getElementById(

'wsone').innerHTML = result;

}

function OnCompleteTwo(result)

{

document.getElementById(

'wstwo').innerHTML = result;

}

<atlas:UpdatePanelID="wsOnePanel"runat="server"><ContentTemplate><divid="wsone"></div><divid="wstwo"></div></ContentTemplate></atlas:UpdatePanel>


hello.

first, you don't need to use an updatepanel in this scenario. the updatepanel let's you refresh a portion of the page but it should only be used when you're transforming an aspx page into an atlas page. second, you can do what you want easilly: to do that, you just need to show the icon during the start method and hide it during the end method.


aha well i've got it working. basically after each webservice call i set the inner html of the divs to the animated gif.

Then on completion the oncomplete function is called, which overwrites the innerhtml with the result.

requestSimpleService = WebService.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteOne,

//Complete event

OnTimeoutOne

//Timeout event

);

//display .gif

document.getElementById(

'wsone').innerHTML ='<img src=blue_forward.gif />'//Call script proxy passing the input element data

requestSimpleService = WebService2.testAsync(

document.getElementById(

'inputName').value,//params

OnCompleteTwo,

//Complete event

OnTimeoutTwo

//Timeout event

);

//display .gif

document.getElementById(

'wstwo').innerHTML ='<img src=blue_forward.gif />'

Update textbox value

Dear friends,


I'm trying to update a textbox value by values that occour in a for each statement.
Ex.:

List<string> words = new List<string>();
words.Add("Test1<br>");
words.Add("Test2<br>");
words.Add("Test3<br>");
words.Add("Test4<br>");
words.Add("Test5<br>");

foreach (string s in words)
{
txtOcorrencias.Text += s;
System.Threading.Thread.Sleep(2000);
}

I want that each word appear for time, but when the function runs, all the words at the same time.

How I code this?

It's because you are doing this on the server. The server doesn't return the page to the browser every time it sleeps. It runs all of the code and then renders the page.

Have you considered doing this in javascript?


Yes, I try to use javascript but I used Thread to simulate other methods that the application have to execute on the server.


This is one way of doing it:http://encosia.com/2007/10/03/easy-incremental-status-updates-for-long-requests/


gt1329a

I'm using the code you recommend to me, It works 100%.

Thanks.

update the contents of the update panel

i have an update panel that fetches data from the database...what i want to achieve is that whenever the database is updated, the contents of the update panel will also update. pretty much like gmail.Big Smile but im not sure if this is possible with the update panel. thank you.

Yes. this is possible. You have to use timer control to periodically check the database for new records. integrate your update panel with timer control.

or else check the below link

http://www.asp.net/learn/videos/view.aspx?tabid=63&id=78

Please Don't forget to 'Mark as Answered' if your problem get solved.

Update the gridview by using AJAX.

Hi,

Can anyone help me regarding update data in the gridview by using AJAX. Once enter the values textboxes and saved into Database, then gridview has to update the new changes. I am using C#.

Pls help me to know about this.

Thank you.

Call the Update method of the UpdatePanel which contains the GridView programmatically after you save values to the database.

...// Save to database

UpdatePanel1.Update();

Thanks

Update to Beta 2.0 and can not run on Server

I have recently upgraded my Web Page to use the new AJAX 2.0 beta. I have also included the November CTP. This works fine on my local PC, but when I run it on my Server, it blows up.

I had initially included all of my DLL's in the Bin folder. After reading many of the posts, I decided to install the ASPAJAXExtSetup.msi and ASPAJAXCTP.msi onto my server. No joy.

I get the following error message:

Server Errorin'/EDCC_Test' Application.------------------------Index was outside the bounds of the array. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack tracefor more information about the error and where it originatedin the code. Exception Details: System.IndexOutOfRangeException: Index was outside the bounds of the array.Source Error: An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identifiedusing the exception stack trace below. Stack Trace: [IndexOutOfRangeException: Index was outside the bounds of the array.] EDCC.PageBase.curUser() +687 File_Home.Page_Load(Object sender, EventArgs e) +92 System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e) +15 System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +34 System.Web.UI.Control.OnLoad(EventArgs e) +99 System.Web.UI.Control.LoadRecursive() +47 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1061 ------------------------Version Information: Microsoft .NET Framework Version:2.0.50727.42; ASP.NET Version:2.0.50727.210

I am not sure where to start debugging this code. As I stated above, it works fine on my machine, but not from the server.

Can someone help point me in the correct direction? Is there a way to "Debug" the page from the server side like from within Visual Studio? Maybe allowing me to "step" through the code? Is there a way to show a more verbose error message that will point me in a better direction?

Thanks,

Bryan

PS: Before I upgraded my site to the Beta 2.0, it was running fine. (Thank goodness I had the foresite to try to install it onto a "test" site before making it live.) Big Smile

hello.

well, it looks like you're passing an index too big for an array.

to see how to get more info about the error on an asp.net, take a look at the <customerrors> element.


Hello,

I agree with Luis. I mean i'm not completely sure that by upgrading you broke something. You probably have a dropdownlist or maybe an array that isn't getting data put into it. What does your code look like? What does the data access layer look like?

Not sure of any way to actually do debugging on the server like you can in the VS2005 IDE, unless you can recreate the environment on your local machine (Database, Web Application etc.)

VS2005 Team System Developer includes the ability to do unit tests. This allows for you to actually step through your code and make sure that all of the pieces are logical and you don't have issues that would show up until you actually loaded up the website onto the server and tested.

Good luck and happy thanksgiving.

JoeWeb


Thanks all for your replies.

I figured out my problem by republishing a million times with different "Response.Write" and "Response.End" statements until I found the error.

I am developing an Intranet site, and I rely on the Windows user name to authenticate. When I created a "test" web site on my server, I had the "Allow Anonymous Logins" box checked somewhere in the properties. Once I removed this, it worked flawlessly. Jeesh, newbie mistake.

Bryan

Update to the latest Control Toolkit

If I want to update to the latest AJAX Control Toolkit and install the ASP.NET Future, what are the steps that I need to take?

For installation of Ajax toolkit watch this video and documentation at

http://ajax.asp.net (last video as of todays posting)

For futures which is still in development

http://www.asp.net/downloads/futures/default.aspx, select quickstarts from there


I already know how to install AJAX toolkit. I just wanted to how to update to the latest version. Some of the question are: Do I need to delete anything? If yes, what? If not, will it automatically update the controls in my Toolbox?

As for the Future, I already watch the video there...but it was not helpful nor does it answer my question. My question was, and I will repeat again, if I don't already have a Dynamic Data Website, what do I need to modify or configure my site so that I can go ahead and use the Future components? Second of all, the video is not in C# so it is pretty much useless to me because I don't program in python.


Well if you do exact installation in same folder where you extracted your zip files and installation, then it will overwrite, I usually keep a copy of previous dll just in case. However I did a check two weeks ago and the old toolkit is exactly the same as new one.

As for futures is concerned, I would suggest you to wait, but the choice is yours? However play with it if you want. you can always convert python to c#, logic remains the same. Hope that helps pal


Thanks for the response. I'll keep that in mind.


Mark that as answer for other people looking for the same question or put a response and mark as an answer


Sorry. I thought I did. I have been having so much problem with the asp.net website lately. The page kept going blank or not loading at all.


Infact this forum page crashes everynow and then too..


So just to clarify for the hard of thinking, to install the latest toolkit on top of the previous one, all I have to do is:

download the latest version zip file


On your server, just replace the old AjaxControlToolkit.dll with the new one. That's it.

On your dev box, replace the old files with the new files, run the VSI, and update your Toolbox if you've added the Toolkit there. That should be it.

Update Trigger and GridView problem

Hi!

I have an Accordion on my page. In one AccordionPane, i have an UpdatePanel containing a GridView and a button under. When i try to access my gridview in the code-behind, i encounter a problem. The trigger of my button doesn't work, the method associated with my button isn't called. If i click a second time and the button, it postback my page and i lose all the data and the page. if i click a third time, the trigger associated with the button finally works.

I only get this problem when i try to access my GridView in my page.

I add my code and underlined the line which causes the problem, i remove it everythin works fine

aspx file:

<asp:UpdatePanelID="UpdatePanelGridStartSecurities"runat="server"UpdateMode="Conditional"ChildrenAsTriggers="false">

<ContentTemplate>

<divclass="ContentPaneDetails">

<%-- GridView : Supports de depart--%>

<divclass="ContentPaneElement">

<asp:GridViewID="GridViewGainOption_StartSecurities"runat="server"AutoGenerateColumns="false"BackColor="White"

BorderStyle="None">

<Columns>

<%-- Inclure --%>

<asp:TemplateField>

<HeaderTemplate>

<labelid="LbGainOption_Include">

Include

</label>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:RadioButtonID="GainOption_Include"runat="server"BackColor="ActiveCaptionText"GroupName="IncludeExclude"

Checked='<%# ((bool)DataBinder.Eval(Container.DataItem, "IsExcluded"))?false:true %>'/>

</ItemTemplate>

<ItemStyleBorderColor="Black"BorderWidth="1px"HorizontalAlign="Center"/>

</asp:TemplateField>

<%-- Exclure --%>

<asp:TemplateField>

<HeaderTemplate>

<labelid="LbGainOption_Exclude">

Exclude

</label>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:RadioButtonID="GainOption_Exclude"runat="server"BackColor="ActiveCaptionText"GroupName="IncludeExclude"

Checked='<%# DataBinder.Eval(Container.DataItem, "IsExcluded") %>'/>

</ItemTemplate>

<ItemStyleBorderColor="Black"BorderWidth="1px"HorizontalAlign="Center"/>

</asp:TemplateField>

<%-- Valeur mobilière --%>

<asp:TemplateField>

<HeaderTemplate>

<labelid="LbGainOption_SecurityName">

Valeur mobilière

</label>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:TextBoxID="GainOption_SecurityName"runat="server"BorderStyle="None"Text='<%# GetSecurityName(Convert.ToInt32(DataBinder.Eval(Container.DataItem, "SecurityId"))) %>'></asp:TextBox>

</ItemTemplate>

<ItemStyleBorderColor="Black"BorderWidth="1px"/>

</asp:TemplateField>

<%-- Isin Code --%>

<asp:TemplateField>

<HeaderTemplate>

<labelid="GainOption_IsinCode">

Isin

</label>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:TextBoxID="GainOption_IsinCode"runat="server"BorderStyle="None"Text='<%# GetIsinCode(Convert.ToInt32(DataBinder.Eval(Container.DataItem, "SecurityId"))) %>'></asp:TextBox>

</ItemTemplate>

<ItemStyleBorderColor="Black"BorderWidth="1px"/>

</asp:TemplateField>

<%-- Seuil --%>

<asp:TemplateField>

<HeaderTemplate>

<labelid="LbGainOption_Threshold">

Seuil %

</label>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:TextBoxID="GainOption_Threshold"runat="server"BorderStyle="None"Text='<%# DataBinder.Eval(Container.DataItem, "TriggerringThreshold") %>'></asp:TextBox>

</ItemTemplate>

<ItemStyleBorderColor="Black"BorderWidth="1px"/>

</asp:TemplateField>

<%-- Supprimer --%>

<asp:TemplateField>

<HeaderTemplate>

</HeaderTemplate>

<HeaderStyleBackColor="#D5DAE0"BorderStyle="None"/>

<ItemTemplate>

<asp:LinkButtonID="GainOption_Delete"runat="server"CommandName="Delete">Supprimer</asp:LinkButton>

</ItemTemplate>

<ItemStyleBackColor="#D5DAE0"BorderStyle="None"/>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</div>

<divclass="ContentPaneDetails">

<divclass="ContentPaneElement">

<%-- Ajouter un nouveau support de départ --%>

<asp:LinkButtonID="GainOption_AddStartSecurity"runat="server"Text="Ajouter une valeur"OnClick="GainOption_AddStartSecurity_Click">

</asp:LinkButton>

<br/>

<%-- Nom du support --%>

<asp:LabelID="LbGainOption_StartSecurityName"runat="server"Visible="false"Text="Valeur moblière :"></asp:Label>

<asp:TextBoxID="GainOption_StartSecurityName"runat="server"Visible="false"></asp:TextBox>

<asp:ImageButtonID="ImgGainOption_StartSecurityName"runat="server"ImageUrl="~/Images/Directory.gif"Visible="false"/>

<ajaxToolkit:AutoCompleteExtenderID="AutoCompleteGainOption_StartSecurityName"runat="server"TargetControlID="GainOption_StartSecurityName"

ServicePath="WebServices/AutoComplete.asmx"ServiceMethod="GetSecuritiesListByLongName"CompletionSetCount="3"MinimumPrefixLength="3"

CompletionListCssClass="autocomplete_completionListElement"CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"UseKeyValuePairs="true"

KeyHiddenFieldID="HiddenModify_SecurityId">

</ajaxToolkit:AutoCompleteExtender>

<%-- Isin du support --%>

<asp:LabelID="LbGainOption_StartIsinCode"runat="server"Visible="false"Text="Isin : "></asp:Label>

<asp:TextBoxID="GainOption_StartIsinCode"runat="server"Visible="false"></asp:TextBox>

<asp:ImageButtonID="ImgGainOption_StartIsinCode"runat="server"ImageUrl="~/Images/Directory.gif"Visible="false"/>

<ajaxToolkit:AutoCompleteExtenderID="AutoCompleteGainOption_StartIsinCode"runat="server"TargetControlID="GainOption_StartIsinCode"

ServicePath="WebServices/AutoComplete.asmx"ServiceMethod="GetSecuritiesListByIsinCode"CompletionSetCount="3"MinimumPrefixLength="3"

CompletionListCssClass="autocomplete_completionListElement"CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"UseKeyValuePairs="true"

KeyHiddenFieldID="HiddenModify_SecurityId">

</ajaxToolkit:AutoCompleteExtender>

<%-- Seuil du support --%>

<asp:LabelID="LbGainOption_StartThreshold"runat="server"Visible="false"Text="Seuil : "></asp:Label>

<asp:TextBoxID="GainOption_StartThreshold"runat="server"Visible="false"></asp:TextBox>

<%-- Insert --%>

<asp:LinkButtonID="InsertGainOption_StartSecurity"runat="server"Visible="false"Text="Insert"OnClick="InsertFromSecurity_Click"></asp:LinkButton>

</div>

<divclass="Clear">

</div>

</div>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="GainOption_AddStartSecurity"EventName="Click"/>

<asp:AsyncPostBackTriggerControlID="InsertGainOption_StartSecurity"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

cs file:

protectedvoid Page_Load(object sender,EventArgs e)

{

if (IsPostBack ==false)

{

HiddenModify_NavigationMode.Value ="1";

//HiddenModify_NavigationMode.Value = "2";

//HiddenModify_MonitoringMandateId.Value = "7";

LogicMonitoringMandates monitorings =LogicMonitoringMandates.getInstance();

LogicGainMandateOptions gainOptions =LogicGainMandateOptions.getInstance();

LogicLossMandateOptions lossOptions =LogicLossMandateOptions.getInstance();

LogicSellMandateOptionDetails sellDetails =LogicSellMandateOptionDetails.getInstance();

LogicBuyMandateOptionDetails buyDetails =LogicBuyMandateOptionDetails.getInstance();

LogicPortfolios portfolios =LogicPortfolios.getInstance();

LogicSecurities securities =LogicSecurities.getInstance();

LogicPortfolioPositions positions =LogicPortfolioPositions.getInstance();

LogicPortfolioPositionDetails details =LogicPortfolioPositionDetails.getInstance();

securities.GetSecurities();

if (HiddenModify_NavigationMode.Value =="1")

{

/*

RadioButton gainOption_AutomaticPerimeter = (RadioButton)AccordionPaneGainOption.FindControl("GainOption_AutomaticPerimeter");

RadioButton gainOption_00007Threshold = (RadioButton)AccordionPaneGainOption.FindControl("GainOption_00007Threshold");

gainOption_AutomaticPerimeter.Checked = true;

gainOption_00007Threshold.Checked = true;

*/

}

if (HiddenModify_NavigationMode.Value =="2")

{

int l_intMonitoringMandateId =Convert.ToInt32(HiddenModify_MonitoringMandateId.Value);

monitorings.GetMonitoringMandateByMonitoringMandateId(l_intMonitoringMandateId);

gainOptions.GetMandateOptionsByMonitoringMandateId(l_intMonitoringMandateId);

HiddenModify_GainMandateOptionId.Value =Convert.ToString(gainOptions.GetMandateOptionFromIndex(0).MandateOptionId);

GridView gridViewGainOption_StartSecurities = (GridView)AccordionPaneGainOption.FindControl("GridViewGainOption_StartSecurities");

The problem comes if I add the line above

//sellDetails.GetMandateOptionDetailsByMandateOptionId(Convert.ToInt32(HiddenModify_GainMandateOptionId.Value));

//gridViewGainOption_StartSecurities.DataSource = sellDetails.TABLE;

//gridViewGainOption_StartSecurities.DataBind();

AccordionPaneSignaletique_DataBind();

AccordionPaneGainOption_DataBind();

}

}

}

Does anyone know what i can do? Can i add the trigger of the updatePanel in the code behind in the pageload method ?

Thanks in advance,

I've been looking for this problem for all my weekend and i found what was the problem!!!!!!!

The problem comes from the Accordion component, during the Page_Load, the Accordion and the child component doesn't exists, but in my case i didn't get any error of "not found controls".

I found a fix on this page :

http://couldbedone.blogspot.com/2007/07/what-wrong-with-accordion-control.html

Thanks a lot to this guy!

i just added Accordion.FindControl("nothing") on a Page_Init and it works great now!

Update trigger in AccordianPane - How to find Control

Hi, I have an accordian with 3 panes. I have buttons and controls in those panes. One of these buttons is used to update an UpdatePanel. I have tried setting theAsyncPostBackTriggerEventName="Click"ControlID="SearchButton", but because the button is in a Accordian it has a different id ID assume.

How can i assign this in the code? What would my findControl() need to be? I get ErrorObject reference not set to an instance of an object.

I have been trying stuff like :

Dim SearchBtnAsNew AsyncPostBackTrigger

SearchBtn.ControlID =Me.FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("SearchButton").ClientID.ToString

MsgBox(Me.FindControl("MyAccordion").FindControl("AccordionPane1").FindControl("SearchButton").ClientID.ToString)

SearchBtn.EventName ="Click"

Me.gridViewUpdate.Triggers.Add(SearchBtn)

You are on the right path, but you are going about it all wrong. You are getting the Error because anytime you use FindControl, you need to cast it to a particular object type:

ProtectedSub Page_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRender

Dim SearchButtonAs Button
SearchButton =CType(MyAccordion.FindControl("AccordionPane1").FindControl("Button1"), Button)

Dim TrggrAsNew AsyncPostBackTrigger
Trggr.ControlID = SearchButton.UniqueID'UniqueID, not ClientID.
Trggr.EventName ="Click"
gridViewUpdate.Triggers.Add(Trggr)

EndSub


Yep that sorted it, Thanks a bunch DisturbedBudda

Update UpdatePanel from Thread

Hi,

I am currently investigating the functionality provided by the ASP.NET AJAX UpdatePanel. I am trying to update the content of a label placed inside an UpdatePanel, from a seperate thread. I have a Thread.Sleep(2000) in my second thread, and nothing happens to the label after waiting 2s. If I remove the sleep command, the label do get updated. What do I need to do in order to make this work?

hello.

can you give more info on what you'tr trying to do here?


I am trying to simulate a process that takes a while to comples. This could be some kind of data-manipulation, calculations or whatever. The problem is then that I want the page to load normally, and the start a new thread. Then the thread should just show the content when is's done.

Update UpdatePanel contents from a web method async call back

Hi,

I have several asp label controls contained in an UpdatePanel.

An asp button control has code behind that calls a web service method using an AsyncCallBack.

When the callback occurs, I need to show the results by setting the text property on the label controls but I cant get the label controls to update.

Does anyone know how to get this working??

Thanks,

Hi, not much use to you I'm afraid but I have a very similar problem. My callback event is from a remoting object rather than a web service and I need to update a gridview rather than text boxes.The callbacks fire at irregular intervals so I can't use a timer to generate a partial postback.

Thanks


Well, you can't really force a client refresh based on a server-side event, unfortunately. The best you can do is use a timer of some sort, despite the fact that the response is irregular. Now, something to realize is that the updatepanel sends all the same form data that you'd normally send for a full postback, so that's a fairly heavy way to do it when you're not sure if you need to or not.

What I'd do instead is have that AsyncCallBack's server-side 'on complete' handler update a variable at the appropriate scope (there's any number of choices to make there as to where to place that variable scope-wise, and what info it should contain; but those decisions are domain specific to your app). Anyway, do that and then set up a simple web service that provides a read-only view of that variable. Personally, I'd use a 'last updated' kind of thing, and have that in the update panel as well, that way you can compare the two times in the next step.

On the client side, create a simple script that fires at a set interval (again, whatever time is appropriate) using setTimeout or the Sys.Preview.Timer object (the latter being a lot easier to use, imo). That javascript function fires off a request to the web service you set up, and in its oncomplete handler, you check the response. If that variable's value indicates that a refresh is needed, then you have the javascript function initiate the updatepanel's asynch postback to refresh all the data.

Now, all that said, I probably would do the whole thing w/ web services myself, but I'm assuming that you need some of the major server-side features that the updatepanel technique allows you to use.

Hope that helps,

Paul

Update UpdatePanel using JavaScript

Hi Everybody,

i want to load dynamically content from some user controls (with forms,or some data-controls) using atlas. So i use an UpdatePanel for loadingthe user control into a placeholder.

Using buttons for loading new content works fine. But i still want touse a function which is callable per javascript. I think this way ismore flexable than using the Buttons, becaus every button needs it'sown Sub-Routine. But i want to have a function with an Parameter forloading the new content.

Has anybody a good idea how to realize this? Working with Update()-Function of UpdatePanel-Control doesn't logically work.

Here is some code:

At first my test-function

1 <WebMethod()> _
2Public Function Test(ByVal intIdAs String)As Boolean
3 Dim contentNameAs String = intId &".ascx"
4Dim contentControlAs Control = Page.LoadControl(contentName)
5
6 PlaceHolder.Controls.Add(contentControl)
7
8 UpdatePanel.Update()
9Return True
10 End Function

I called this per JS-Function ...

1function test(intId) {
2 PageMethods.Test(intId);
3}

... per onClick-Method of a Link

1<a href="#" onclick="test(1);">Test</a>
2
3 <atlas:UpdatePanel ID="UpdatePanel" runat="server">
4 <ContentTemplate>
5 <asp:PlaceHolder ID="PlaceHolder" runat="server">
6 </asp:PlaceHolder>
7 </ContentTemplate>
8 <Triggers>
9 <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
10 <atlas:ControlEventTrigger ControlID="Button2" EventName="Click" />
11 </Triggers>
12 </atlas:UpdatePanel>

But it doesn't work. I have tried so much.

Is there a possibilty to get User Controls generated HTML Code?
Or has anybody an idea for realizing this with an other way?

Thanks for all hints.

Regards,

AndréHi Andre,

The main problem with what you are attempting to do is that you are attempting to make a modification to the page without actually performing a postback. Executing the web service method "Test" from Atlas using the PageMethod.Test statement will execute your web method, but doesn't actually perform a postback and therefore you can't modify your page. The web method can really only return data, not have ASP.NET re-render part of the page.

A simple, but maybe not the best way of accomplishing this, is to use a hidden text field and a button to provide postback data. You set the value of the hidden text box to the data needed to create the user control (i.e. intId) and then click the button programmatically (i.e. button1.click). Then you have a common routine on the server, like your web method "test", that alters the page as necessary based upon the postback information.

HTH
Hi,

thank you. But isn't there another method for loadig content dynamically per ATLAS?
Or is there a possibility to create a new event, bind the UpdatePanel-Trigger and raise it with JavaScript?

I believe there must be a cleaner method than using a hidden textfield and call a button's sub.
How do you this?

Best regards,

André
Hi,

I am relatively new to ASP.NET and Atlas but have a similar question. Is there any way to generate an Update event on the UpdatePanel using client side Javascript?

I have a situation where I need to have two separate web applications for security reasons, but I want both applications to use a common search page. I can create a link on the first page (parent) to open the search page as a popup window easily enough. What I want to do is return the found item id back to the parent window and trigger an asynchronous update when the popup window is closed.

If I use javascript only, I can have a function in the parent window called 'Update()' and use it to create the xmlhttprequest object etc. I would prefer to use an Atlas UpdatePanel in the parent window and trigger an update from the popup window using the onunload event. (Note: the popup window page is not in the same application as the UpdatePanel)

Is this possible? Is there a better way to achieve this?

Regards,
Trevor.
OK, so I think we agree that a web method isn't going to do the trick for you as the page needs to go through its lifecycle and process the new UserControl and render it into Html.

There is no magic bullet in Atlas to load content dynamically. An UpdatePanel requires a postback to do any updating. You can use a web method to return an Html string to you and then parse it and place it where you want in the DOM, but that really is a lot of work and doesn't require an UpdatePanel.

That being said I'll assume that we agree that a postback needs to occur in order to load your user control into the page.

I believe you need a generalized method of posting back data that is not really related to a server control. The question remains; how to get the data back to the server on which control to load? The data has to be part of the post data. I suggest using a hidden text box as the transport mechanism as it's easy to work with and is fairly light weight and then telling that UpdatePanel to update through the use of clicking a hidden button. To be honest, I've used this pattern on a multi-million dollar application and have good success with it. I'm not saying it's perfect and maybe I'll see a better pattern that Ishould'veused, but it provides the flexibilty that you and I require.

Happy Coding
"Is there any way to generate an Update event on the UpdatePanel using client side Javascript?"

You need to have whatever is defined as a trigger of the UpdatePanel or a server control contained within the UpdatePanel cause a postback.

Happy Coding
Thanks for explaining that. I wasn't aware of the PageMethods collection until just now.

Trevor.

BUMP!!!

That worked Marvellously :)

I used it with a calendar control. I wanted to have different controls in a date cause a postback. WELL as far as I know adding sever controls doesn't work because they don't cause post backs when added inside a Day Cell.

SO dropped some anchors in the day. Had the onclick of the anchor fill a hidden field and click a button outside the updatepanel. Which triggered it :)

Works great.

Update UserControl from another UserControl in an UpdatePanel

I've got 2 usercontrols on my webpage (let's call them uc1 and uc2). In uc1 is a button. When I click on the button I bubble up the event to the main page. In the main page I handle the event. In the event handler on the main page I set a property of uc2 which sets the text of a label in uc2. I want this interaction to happen in an UpdatePanel so that the screen doesn't postback, but I can't seem to get it to work. Any direction would be greatly appreciated. I have a sample app if someone wants to see it.

Hi

I use that technique in nblogr. You can download nblogr's source from codeplex.

Basically you expose a method in your uc2 something like void DoUpdate()
And in that method you call myUpdatePanelID.Update()

and that should do the trick

Hope this helps you a little


Thanks so much! That did the trick!

Could you be a bit more specific? I downloaded that code but there is a lot of code there. Looking for a snippet....

Thanks.

Jeff


What part are you having trouble with? Bubbling up the event from the first control and modifying the second one, or having the UpdatePanel refresh after the changes have occurred?

I was having a similar issue. I've got two controls in two separate panels on one page and I'm using the event bubbling to get the two controls to communicate and toggle their visibility. I was forced to click the first control's button twice before the intended result would take place, even though all the code would execute while debugging. It seemed the first click wasn't updating the client but the second one did. Then I took a closer look at my container page, I didn't have the two controls in an UpdatePanel, even though the container page was setup for ajax. Wrapping the all the controls and panels in an UpdatePanel got it sorted.

Just thought it would be useful to note here.

-jason


Hi, What i have done in my application is like i have a combo inside a usercontrol , another control includes

a login page type controls , Now when ever the user selects any thing from the combo control the text on the login control also changes without full page refresh. If this is your prob. then below is how i did it.

Put your combo control inside UpdatePanel and contentTemplate tag. Dont do any thing with login control just put both of them on aspx page inside a Scriptmanager tag. and on page load of Login control put your logic . If this is not sufficient then i can send you the code .

Can you tell me how to stop the mail of Posts from this site to my mail box, or how to unsubscribe. becoz this thing has filled my personal ID.

Shrikant

Update/Add records without postbacks

Hi i have been seriuosly stuck for 2 months on this. I have created a sample project so you can see how i have tried to relsove this problem.

Aims

Load records into a gridView

Click record in gridView

play animation, opens panel

retrieve data for clicked record

Update the record

Use same animation to create new record

Click button

play animation, opens panel

Add new data

Save data

Default.aspx - Shows how i successfully retrieve data from grid and load it in the panel

Sam.aspx - Shows how i add and edit the data, but without call backs. Click on the edit linkbutton then press the new button to open panel.

Sam2.aspx - Shows how i swap the animations between one button and the other

I don't understand your question, when you add the controls under an UpdatePanel does not hide the postbacks?


Hi Sanson,

Based on your description, I think you are sharing your experience. But I think you have missed the URL. Would you please add it ? Thanks.

Best regards,

Jonathan


I bulit a mini project that i thought i could upload with my post, but i cant. I will have to upload the example project so you guys can see it.

Sorry, I could have sworn that there was an option to upload .doc

Updated Atlas info?

Wish Atlas guys had included the timestamp on this web page, so that one would know when it was updated last.

http://atlas.asp.net/docs/default.htm

Rightnow, I'm looking for the most uptodate (Dec 05) documentation & Hands-on labs for Atlas and I'm not sure if the above link is the right one.

-Rach

The Last-Modified HTTP Header indicates:

Mon, 19 Dec 2005 16:05:28 GMT

Plus the example for the AutoComplete stuff uses the new AutoCompleteExtender (http://www.nikhilk.net/Entry.aspx?id=100) stuff. So yes, it has been updated for this new build.

Updated control KIT

I downloadedhttp://atlas.asp.net/default.aspx?tabid=47 this tool kit and I copied .dll file to my existing Atlas project and I still dont see new control like (dropshadow, roundcorners,modalpopup etc)
How to fix it?

Even when I create new application using atlast template I dont see new controls?

What dll did you copy?

It could be that you've reinstalled Atlas ... not the Atllas Control Toolkit , they are different.


I downloaded the new tool kit and than extracted and copied the bin folder from sample project to my project.

If this is wrong download what I need to dowload and from where? (Note: I already have old atlas running on my current project)


The atlas assembly is: Microsoft.Web.Atlas.dll ... no update since April 6.

The latest control toolkit is: AtlasControlToolkit.dll ... and some of the samples need Microsoft.AtlasControlExtender.dll as well (like the Modal dialog sample).

Have you tried running the sample website that comes with the toolkit? If not, you should try ... it has working examples of all of the controls.

If it's a pre-existing project, you'll also need to add a new directive to your pages in order to start referencing the toolkit controls.

<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %
Hope I'm not repeating myself ... but the toolkit controls are open source samples of things that you can build on top of Atlas. I don't work for Microsoft ... so know idea if these things will be rolled into the core Atlas at somepoint. But at this point the goal is clearly to seed the developer community with cool things that you can do on top of the Atlas framework, get developers to submit new controls, etc.


Updated RoundedCornersExtender

Thought I'd share an update I made to the RoundedCornersExtender. As a summary, I added support to have the corners rounded outward or not at all. In addition, you can apply a different style to each corner individually.

Details are here:http://kyle.baley.org/NewPropertiesOnTheRoundedCornersExtender.aspx

Hi Kyle,

Very nice work!

Thanks,
Ted


The corner chooser is a must for the rounded corners extender!
Can we get this into an official build?
Please put this on a to do list somewhere!

Chris


I've created work item 5611. Thanks a bunch!!

I'd like to start by saying these changes are definitely an advantage, and as a Toolkit user I'd love to see them in the official release. I have another recommendation which I am amazed no one has attempted (correct me if I'm wrong).

In my opinion, anti-aliasing techniques should be applied (perhaps as an optional setting) to remove the "Microsoft Paint" feel from the rounded edges of the control's output. I know of several JavaScript methods to apply anti-aliasing techniques, and there are several algorithms available from a simple Google search.


one million thank yous!

I would like to suggest another feature for the RoundedCornersExtender:

In some cases it would be extremly nice if it would be possible to draw only a rounded outline around a panel. Guess I have a panel with white background and a blue border - and this border should become rounded. Until now, the extender draws solid regions (means: completely filled by a color) above and below the target panel - so it is not possible to use it for creating a rounded outline.

Or should I be mistaken and itIS already possible?

Regards,

ReneMT

Updated to latest release - profile now broken

I just upgraded my web application to the latest release of Ajax and now the app hangs on the login. I paused the code and it is hanging on getting a profile property. I even tried creating an entierly new membership database and it still does the same thing. The Website Configuration Tool still connects to the membership database, so I know its not a problem with the users or roles. Any help would be greatly appreciated.

MORE INFO -

When I pause the app, it always stops on one of two lines:

The first is in a generated code file -

ReturnCType(Me.GetPropertyValue("LastName"),String)

This is what lead me to believe it is a profile issue - this generated code file has all of my profile properties in it. When I set a watch on Me.getPropertyValue("LastName"), its value is "Cannot evaluate expression because we are stopped in a place where garbage collection is impossible...etc"

If I start running and then pause again, it stops on a line that begins:

IfNotMy.User.IsInRole("Administration")

So, naturally I set a watch on My.User - which yields a value of "error: cannot obtain value"

I have NO IDEA what to do next? Anybody?

We upgraded to the latest version of the toolkit a few days ago, and now are seeing a lot of things either not working, or working sometimes and sometimes not. I almost suspect there is a problem in this version, but I cannot find the old version to go back to...

TIA,

Bill


Figured it out...had an error infinite loop going. Had nothing to do with membership.

Updated to IE7 and have some formating error.

I had Ajax enabled website working with IE6 perfectly as soon as I updated my IE to IE7 I have problem with my formatting. All the data grids labels and text (controls) are all around. Panels are not working the same as before.

Any idea?

It's probably having to do with the fact that IE6 was horrible in terms of following the standards. If you look at your site in Firefox or Opera, it probably will look the same as in IE7. Without code, it's hard to pinpoint the problem, but you should invest some time in the various CSS sites like alistapart and csszengarden to start debugging. Also, install IE Developer Toolbar so that you can see where your objects are in the browser's view and what styles they are responding to at runtime.

Updated WebDev Helper

Thanks Nikhil.

http://www.nikhilk.net/WebDevHelperHTTPTracingUpdates.aspx

Wally

awesome!

UPDATED: AJAX FAQ? And: How to Style the AJAX tab controls tabs: complete information

UPDATE: see step #8 for updated information about the fix for the styles.

First of all, I would like to suggest that the AJAX section of the ASP.NET forums have its own FAQ section. I was going to post this in the general ASP.NET FAQ, but it didn't really fit, and there was no AJAX FAQ, so I'm posting it here.


Next: I have been looking for details on how to style the Tabs in the AJAX Toolkit's Tab control for over a week now. I have found information that is misleading, incomplete, outdated, and just plain wrong. And nowhere have I come across all the information needed to make it work in one place. So, I am posting this here. I hope that an AJAX FAQ can be created, and this post moved there.

I am including some background information, about the difficulties people are having in finding information on styling the tabs, first; after that I will include the complete instructions for styling the tabs.

First: the information on the documentation page for styling the tabs is misleading at best, as well as incomplete. The docs tell you that you can simply add your styles to your project as CSS, and neglect to tell you that you must add a "CssClass" attribute pointing to your new styles. They also state that, if you do not specify a style for a given element of the tabs, the "default" style will be used. What they don't say is that the default style isnot the style you see when you first drop a tab control on a form! That style is actually the "XP style" you can see in the "tabs.css" file in the source for the AJAX toolkit.
Actually, what the docs refer to as the default style is an extremely bare-bones style, with no tab images at all! Your first impression on seeing this style is likely to be what mine was: "something must be broken- or I must have done something wrong."

The docs lead you to believe that you can just specify a style for one element -- such as setting the font for the tab body -- and you will then see the style you set, and the rest of the styles will be the "normal" style (aka the XP style). Not so! What you will get if you try this is what looks like plain tabs, with your font - and no actual tab images! Instead, you will have the names of the tabs above, looking like plain text, with no tab images at all. As noted, this is because the default style is not the "XP style", but rather is an extremely plain style with no images. While the docs are technically correct, the average user is not going to understand that the default style is not the one the control "comes with".

Next, you will find suggestions on some web sites that you download the source code for the toolkit controls, and copy the styles from the "tabs.css" file as a starting point for your own styles. The problem is, when you download the source code, the 'tab-line.gif' image in the .ZIP archive is either corrupt or incorrect, and there is a problem with the .CSS. Apparently the latest version of the Toolkit has a corrected image, but the .CSS is still a problem. This causes a blank spot to appear in a line along the right edge of each tab. You can see this by copying the XP style from the tabs.css file in the source code and pasting it into a .CSS file in your project, then editing the URL references for the images to point to the images you extracted from the source code .ZIP file. There is a fix for this that HalH discovered:http://forums.asp.net/p/1067200/1972639.aspx#1972639

Some sites, and even some posts on this forum, that suggest you use the styles from the toolkit source - and then they list some of the code,but have incorrect syntax when referencing the images that are embedded in the controls! For the record, if you want to change some styles but not the images themselves, you'll want to keep the references to the embedded images; use the syntax in the "tabs.css" file in the source code. But be warned that you'll need to apply HalH's fix linked in above (it also appears below as item #8).

There are other issues, but the above three alone make it very difficult for someone to get started styling the tabs.

How to Style the AJAX tab control:

The method for changing the style of the tab control thatactually works is as follows:

    Download the source code for the AJAX toolkit from this page:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941 - make sure you grab the version with the source code!

    Open the .ZIP archive and extract the tabs.css file, and the tab images - get all 10 of the .gif files that start with "tab".

    Place the .gif files into a folder in your website, then right-click that folder in Solution Explorer and "Add Existing item..." for each image file.

    Open the "tabs.css" file and Copy the entire XP style. Paste it into a .CSS file in your project, such as the one you are already using.

    In the .CSS file in your project, edit this first part of each entry for the tab control:.ajax__tab_xp . You want to change it slightly, such as to.ajax__tab_xp2 - that is, add the number 2 to the end. Do this for each entry in the XP style; do itonly for the first item on each line.

    Go through each entry that contains a URL reference to a .gif file, and edit it to point to the .gif files you added to your project in step 3. If you placed them into a folder called "images" in your website's root folder, the reference should look like this (be sure you don't accidentally erase any style text from the end of each line):

    background:url(../images/tab.gif)

    At this point, if you view the page in a browser, you will see the issue mentioned above: the "blank spot", or missing pixels, along the right edge of each tab image.

    Next, apply HalH's fix as mentioned above (I'm quoting him here, for the most part): remove the reference to 'tab-line.gif' from the '.ajax__tab_header' definition - that is, delete the entire "background" portion of the style. Then, remove "padding-right:4px;" from the definition of '.ajax__tab_outer'. [EDIT- I have discovered that, at least with the latest version of the toolkit, you can leave the reference to the image in place, which restores the line along the top of the tabs.]

    Finally, open the page(s) in which you placed the tab controls in Source view. Edit the opening TabContainer tag in each file to add a CssClass reference to your new style. For the example above in step 5, the tag would look like this:

    <cc1:TabContainerID="TabContainer1"runat="server"ActiveTabIndex="1"CssClass="ajax__tab_xp2">

At this point, you will have a tab control that looks exactly the way an un-styled tab control would look! However, the difference is that you can now add/change the styles, and the changes you make will show up in the web page. Note: if you are happy with the image files that come with the stock XP style, don't change the background URL file references; you will still need to use HalH's fix, though.

It's surprising this control was released with a corrupt image [NOTE: THIS APPEARS TO BE FIXED IN THE LATEST VERSION] and broken CSS. Clearly the problem was fixed internally in the control's code and its internal image, since the control works when simply dropped unchanged on a webform, but the fix didn't get propagated to the publicly released source code... It would be nice to see Microsoft fix this issue, or at least postall of this information in the docs for the tab control...

Because I had so much trouble finding all this information, I am posting this here, in addition to posting this in the thread mentioned above.

Hopefully this will help someone else avoid the solid week I spent digging up this information from the few pages that have any info at all about this issue...

-Andrew

This is great stuff, thanks so much for sharing it. I see questions all the time wanting to know more about this topic.

I do have one problem and it may just be that you did this with a slightly older version of the toolkit, but my tabs.css does not reference xp anywhere. I have classes like.ajax__tab_default.ajax__tab_header and there is no reference to xp. Is there something I am missing?


Hi Chris-

AFAIK I am working with the latest version of the toolkit. I don't know why the XP style would be missing from your "tabs.css" file.

For the record, I will post the .CSS styles from my "tabs.css" file, and you can use them as a basis. Remember to remove the problem style as in my post above, and, if necessary, the reference to the problem .gif file:

/* xp theme */.ajax__tab_xp0 .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rmrJJ7SjYIGSDdAdtNw1Ew2&t=633167421400000000) repeat-x bottom;}.ajax__tab_xp0 .ajax__tab_outer {padding-right:4px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1yrs7q_zNUWaBBHgGRYOHKQ2&t=633167421400000000) no-repeat right;height:21px;}.ajax__tab_xp0 .ajax__tab_inner {padding-left:3px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY133ijxBIREEOoObFED_Bhzw2&t=633167421400000000) no-repeat;}.ajax__tab_xp0 .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbv_dPXVoiLJ4geaEoszM6Zx7A4pJ2521Vwp4VsPeLe2fQ2&t=633167421400000000) repeat-x;}.ajax__tab_xp0 .ajax__tab_hover .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rJjD_WkIfACTs9HQKpeKUA2&t=633167421400000000) no-repeat right;}.ajax__tab_xp0 .ajax__tab_hover .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rMUVO7awInbuj7kuhms0Aw2&t=633167421400000000) no-repeat;}.ajax__tab_xp0 .ajax__tab_hover .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1v5hLjjGOCMpBlMfF8JzFbA2&t=633167421400000000) repeat-x;}.ajax__tab_xp0 .ajax__tab_active .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY11YFCEA-F1KrZBMAZZJHpInefUOk0Ib7CmvpoDZVzyh41&t=633167421400000000) no-repeat right;}.ajax__tab_xp0 .ajax__tab_active .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1jldUXO80Ye5rs84ruU2hGw2&t=633167421400000000) no-repeat;}.ajax__tab_xp0 .ajax__tab_active .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rn-Bcdsd-Psg-56pH8vCFg2&t=633167421400000000) repeat-x;}.ajax__tab_xp0 .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

/****************************** END STYLES ********************************************************/

Here is the syntax for referencing a .gif file that is in a folder in your website- for this example, the file is in a folder named "images" which is in the root of the site:

background:url(../images/tab-line.gif)

Since I had such a rough time finding info on this, I am going to post a few links I found of use:

Ron Buckton, creator of the Tab control, has a page on styling the calendar and tabs:http://blogs.msdn.com/rbuckton/pages/ajaxskinning.aspx - I actually found several references to this article, but apparently his original domain went down or something, so I never did get to read it; but he contacted me with this updated link.

OK, this one pushed me over the edge.

I had such an irritating time getting the Tab control styled, that I have stopped resisting the flow, and I have started my own blog about ASP.NET and other related and unrelated stuff at:

http://acushen.spaces.live.com/blog/

I re-posted the how-to above, and am adding a series of additional posts detailing why it was so difficult to find out how to style the tabs. Rants? Maybe a little... :-)

I will also have some additional links and hints on styling the tab control...

-Andrew


This is great work Andrew. Thanks for sharing your learnings with the rest of the community.


andrew:

your post saved me a lot of time.

i had no tab styles because i embedded a tab container in a updatepanel. with the information from your post it took about 15 minutes to solve and get the styles working with the tab container inside the updatepanel.

thanks, chad


Guys-

I'm glad I was able to help.

I know how frustrating it was forme when I was trying to dig up this information, and very few sites hadanything on it. Those sites thatdid have something generally had only one piece of the puzzle, and/or part of their info was wrong...

Feel free to check out my brand-new Blog at:http://acushen.spaces.live.com/blog/. It was started as a direct result of my difficulties with the Tab control, and I have posted a bit more about my experiences with styling the Tab control...

-Andrew