UI tabs for main navigation (ASP.NET)

UI tabs for main navigation (ASP.NET)

Hi

I'm trying to use the UI tabs to navigate between ASP.NET pages, via ajax. This is the code I have at the moment:

  1. <script type="text/javascript">
        $(function() {
            $("#tabs").tabs();
        });


  2. </script>
  3. <div id="tabs">
        <ul>
            <li><a href="page1.aspx">Page 1</a></li>
            <li><a href="page2.aspx">Page 2</a></li>
            <li><a href="page3.aspx">Page 3</a></li>
            <li><a href="page4.aspx">Page 4</a></li>
        </ul>
    </div>






This will let me navigate from page to page, but the problem I have is when a button (or something else) is clicked on one of these pages, causing a postback. Firstly it will redirect away from the page that defines the tabs, and secondly the <form> tags and viewstate elements from all of the pages are rendered in the main page, which causes ASP.NET to have a fit.

Is there any way around these issues? The only thing I can think of right now is to switch to using user controls rather than pages to display the content, but I don't think that's ideal.

Thanks for any help!