jquery tabs and asp.net master pages issue

问题

i have a website with master pages and content pages. the code for master page is:

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
    <form id="form1" runat="server">
    <div id="TopNav">
        <ul>
            <li><a href="TopDeals.aspx">Top Deals</a></li>
            <li><a href="AllDeals.aspx">All Deals</a></li>
            <li><a href="Account.aspx">Account</a></li>
            <li>
                <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
                <asp:Button ID="Search" runat="server" Text="Search" />
            </li>
        </ul>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <!--Adding jQuery-->
    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <!--JavaScript and jQuery functions-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TopNav").tabs();
        });
    </script>
</body>
</html>

And my content pages are like:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>

Now, the tabs renders perfectly but the text used inside tabs or

section is displayed back again in each tab content.

Screenshot of how it is rendering:

And here is the rendered HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title>

<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>

<body style="height: 800px">

    <form method="post" action="TopDeals.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />

</div>



<div class="aspNetHidden">



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />

</div>

    <div id="TopNav">

        <ul>

            <li><a href="TopDeals.aspx">Top Deals</a></li>

            <li><a href="AllDeals.aspx">All Deals</a></li>

            <li><a href="Account.aspx">Account</a></li>

            <li>

                <input name="ctl00$SearchBox" type="text" id="SearchBox" />

                <input type="submit" name="ctl00$Search" value="Search" id="Search" />

            </li>

        </ul>

    </div>

    <div>



Top deals page.



    </div>

    </form>

    <!--Adding jQuery-->

    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

    <!--JavaScript and jQuery functions-->

    <script type="text/javascript">

        $(document).ready(function () {

            $("#TopNav").tabs();

        });

    </script>

</body>

</html>

Anyone can tell what I am doing wrong here?

回答1:

The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First Tab</a></li>
       <li><a href="#tabs-2">Second Tab</a></li>
    </ul>
    <div id="tabs-1">
           Tab 1 Content
    </div>
    <div id="tabs-2">
           Tab 2 Content
    </div>
</div>

Note local referencing href on li and corresponding tab content div (with same id).

In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).

This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.

EDIT: work-around

Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.

For example, in master page

<div id="TopNav">
    <ul>
        <li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
        <li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
        <li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
        <li>
            <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
            <asp:Button ID="Search" runat="server" Text="Search" />
        </li>
    </ul>
    <div id="TabContent">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </div>
</div>

Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:

Tab1.HRef = "#TabContent";

Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.

Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).

EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.

$('.tabs').tabs({
  select: function(event, ui) {
     var url = $.data(ui.tab, 'load.tabs');
     location.href = url; // follow url
     return false; // to disable default handling
  }
});

来源：https://stackoverflow.com/questions/9459991/jquery-tabs-and-asp-net-master-pages-issue

标签

ASP.NET

jquery-ui

master-pages