How to avoid postback on tab click to load a page/section.

Question

Hi Guys,

I am using .NET, XSLT to achieve below functionality, however there is some challenges we are facing.

I have to implement tab functionality on a page. I have got 4 different pages.

1) index.aspx 2) g.aspx 3) f.aspx 4) s.aspx

tab1|tab2|tab3|tab4 (Will appear on screen)

"index.aspx" will be my landing page, having the tabs control in it i.e. "tab1" will be selected default with "index.aspx" page open. when user click on "tab2" it will open "g.aspx",normally opening this page is very easy,however I need that there should not be any postback, so something ajax concept will happen. If it has been normal text page, it would have very easy to implement this, however there could be .net usercontrols on that page and they may give postback while using them and also we can have JAVASCRIPT "disabled" too. I have pasted the below example code from g.aspx which will be get rendered when user click on "tab2".

<div class="tabs-container" id="tabs" style="display: block;">
    <div class="contentContainer">
        <p>
            View your New Delhi flights!
        </p>
                <ucFS:ctlDestinationFS ArrivalDate="02/02/2011" DepartureDate="02/02/2011" runat="server" ArrivalStationCode="DEL" />
    </div>
</div>

Below are the challenges we are facing to achieve this functionality.

1) There should not be any postbacks. 2) Normal text pages can be taken, however what to do for the .net usercontrols. 3) There can be javascript disabled for that page.

Can anybody share his thought how to achieve this functionality.

Thanks,

Best Regards, Manoj

Answer 1

Cross browser tabbed pages with embedded links at cssplay by Stu Nicholls might help, if you can:

• Provide tabs in divs
• Load all user controls on PageLoad
• And then switch through tabs