asp.net-mvc-3 - タブ mvc3 の下に間違ったデータが表示される

Question

複数のタブを表示するホームページがあります。

ページの最初のタブにタブを追加しようとしていますが、jquery および ajax 呼び出しを使用してこれを行っています。タブのカウントはフェッチされたデータに依存します。

たとえば、私のホームコントローラーには、フェッチされたデータに応じて、製品、製造元タブ、および製品タブの下に表示する詳細アクションがあり、国のタブを表示しています。データはメーカータブの下に表示されています。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<EmsAdmin.Models.abc>" %>

abc の詳細 abc の詳細 <% Html.RenderPartial("abc", Model); %>

製品

<% if ((Boolean)ViewData["HasWTB"]) // 製品別の行き先はありますか? { %>

メーカー

<% } %>

レポート

<% if ((Boolean)ViewData["HasInText"]) { %>

カテゴリー

<% } %>

地域

    </ul>
    <div class="panes">
        <!-- Products -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Products"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of products-->
        <% if ((Boolean)ViewData["HasWTB"])
           // Do they have the Where to by product?
           { %>
        <!-- where to buy -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Manufacturers"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of where to buy -->
        <% } %>
        <!-- Request Reports see Reports.ascx-->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Reports"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of request reports -->
        <% if ((Boolean)ViewData["HasInText"])
           { %>
        <!-- In Text -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("InText"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of in text -->
        <% } %>
        <!-- Ranges or SubBrands -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Ranges"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of ranges of SubBrands -->
        <!-- Ranges or Region -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Regions"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of ranges of Regions -->
        <!-- Categories -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("Categories"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end of Categories -->
           <!-- REgions -->
        <div class="pane">
            <div style="clear: both;">
                &nbsp;</div>
            <% Html.RenderPartial("REgions"); %>
            <div style="clear: both;">
                &nbsp;</div>
        </div>
        <!-- end ofFilters -->
    </div>
</div>
<script type="text/javascript">
    //<![CDATA[

    // Set the tabs to be tabs
    $(function () {
        // setup ul.tabs to work as tabs for each div directly under div.panes
        $("ul.tabs").tabs("div.panes > div");
    });
    //]]>
</script>

Answer 1

私は間違っているかもしれませんが、MVC 2 コードのように見えます。

非常に単純なタブの jQuery の例はたくさんあります。これは、MVC3 と Razor で twitter ブートストラップを使用します。

@model Layout.Models.DataModel
<script type="text/javascript">
$(document).ready(function () {
    //  show the first tab
    $('#homeTabs a:first').tab('show');
});    
</script>
<div class="container">
<ul class="nav nav-tabs" id="homeTabs">
    <li><a href="#section11" data-toggle="tab">1.1</a></li>
    <li><a href="#section12" data-toggle="tab">1.2</a></li>
    <li><a href="#section13" data-toggle="tab">1.3</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="section11">
        @{
            Html.RenderPartial("Details.1.1", Model);
        }
    </div>
    <!-- section11 end-->
    <div class="tab-pane active" id="section12">
    </div>
    <!-- section12 end-->
    <div class="tab-pane active" id="section13">
    </div>
    <!-- section13 end-->
</div>
<!-- tab-content end-->
</div>
<!-- container end-->

それが役立つことを願っています