Loading external .aspx file into AJAX Toolkit TabPanel

Hello,

I'm new to ASP.NET AJAX. I want to create a default page, maybe a master page. then i want to add the AJAX Toolkit TabContainer with different TabPanels for each of my other .aspx files (home.aspx, about.aspx, etc.) I want to know how I would setup the TabContainer with a tabpanel for each page and load those pages when the appropriate Tab is clicked. a small snippet of example code would be greatly appreciated

Thanks to all in advance

GL

How about something like this?

<ajaxToolkit:TabContainer ID="tabs" runat="server" Width="600px" Height="400px">
<ajaxToolkit:TabPanel ID="tabHome" runat="server" HeaderText="Home">
<ContentTemplate>
<iframe src="http://pics.10026.com/?src=home.aspx" width="100%" height="100%">
</iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="tabAbout" runat="server" HeaderText="About">
<ContentTemplate>
<iframe src="http://pics.10026.com/?src=about.aspx" width="100%" height="100%">
</iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Thanksctafield, that did the trick. works like a charm but I wonder if there might be another way besides frames. I dont like to use frames plus i'm concerned about browsers that may not support frames. Thank you for the quick response

If there is another way I would greatly appreciate the guide

Thanks

GL

Ok, When I used the iframe my pages end up having 2 separate vertical scrollbars. one for the main window and one for the iframe region. i cna see that confusing my users when they need to scroll up or down. has anyone thought of another solution?

you can actually turn off the scrollbars for the iframe - just make sure you set its width and height to 100% so data doesn't get chopped and that would get rid of the scrollbar for the iframe...

<

iframeid="TargetPane"scrolling="no"

Hi,

You might also be interested in reading one of Scott Guthrie'sblog posts where he created a class called ViewManager to render ASP.NET controls to HTML and send it via a webservice to the page.

Thanks,
Ted

You can add WebControls (.ascx) to each panel you want by using following code-behind:

AjaxControlToolkit.TabPanel tpHome = new AjaxControlToolkit.TabPanel();
tpHome.HeaderText = "Home";
tpHome.ContentTemplate = Page.LoadTemplate("Home.ascx");
tcDefault.Tabs.Add(tpHome);

AjaxControlToolkit.TabPanel tpAbout = new AjaxControlToolkit.TabPanel();
tpAbout.HeaderText = "About";
tpAbout.ContentTemplate = Page.LoadTemplate("About.ascx");
tcDefault.Tabs.Add(tpAbout);

tcDefault is TabContainer control.

AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
tab.HeaderText = "test_new_tab";
TabContainer1.Tabs.Add(tab);

??index error WHY?

Good piece of code to use the control on the code behind.
Even the control toolkit samples didn't have these in detail

However i couldn't load an external page onto the page.loadtemplate method
It throws the following error when trying with full path

Exception Details:System.Web.HttpException: 'http://localhost:8080/Documents/9245/bjk49000.PDF' is not a valid virtual path.

Any suggestions?

Rain Man

At the moment i'm using the following method by coding on the client end

<ajaxToolkit:TabPanel runat="server" ID="TabPanelAttachment" HeaderText="Attachments">
<ContentTemplate>
<iframe runat="server" id="iframePreview" width="850" height="800" frameborder ="0"> </iframe>
</ContentTemplate>
</ajaxToolkit:TabPanel
var urlPrefix = "http://localhost:8080/Documents/"
var urlSuffix = docId + "/" + fileName;
var url = urlPrefix + urlSuffix;

$find('TabContainerDocument').set_activeTabIndex(1);
document.getElementById('TabContainerDocument_TabPanelAttachment_iframePreview').src = url;

TabContainerDocument_TabPanelAttachment_iframePreview is the iframe id at run time
Hope that helps for someone who is trying on something similar

Happy coding

Rain Man

This reallyhas to be built into the TabPanel tool.

Haven't tried this but it might be another alternative to controls and iFrames...

Dynamic drive website has example of using Javascript to do page calls to a div, not too sure if will work in but might be good for a try?

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Dave