0

誰かが次のことについてアドバイスしてくれるとありがたいです: メインビューにいくつかのタブがあります:

  <ul class='tabs' id="tabs" style="width: 100%">
        <li class="active"><a href='#tab1'>Status</a></li>
        <li class="inactive"><a href='#tab2'>Visit</a></li>
        ...
    </ul>


<div id='tab1'>
    <div id="StatusData">
        @{Html.RenderPartial("AddStatusPartial", Model.Card);}
    </div>
</div>
<div id='tab2'>
    <div id="VisitData">
        @{Html.RenderPartial("AddVisitPartial", Model.Card);}
    </div>
</div>

タブのスクリプトは次のように機能します。

 $('ul.tabs').each(function () {
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function (e) {
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));

            // Make the tab active.
            $active.addClass('active');

            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });
    });

必要なのは、コンテンツを表示するだけでなく、クリックしたときにコンテンツのみをリロードするsecond tab's(部分ビューを再レンダリングする) ことだけです。他のタブをクリックすると、現在は機能しているため、コンテンツが表示されるはずです。

データは他のタブで行われた変更に依存するため、2番目のタブを正確にリロードしたいので、それらの変更を表示するには、部分ビューを再レンダリングする必要があります。

リンクHere

4

1 に答える 1

0

対応する部分ビューを返すには、いくつかのアクションが必要です...

次に、次のようにコーディングする必要があります。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="/products/new">Tab 1</a></li>
    <li><a href="/products/resale">Tab 2</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

スクリプトは次のようになります。

 $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
于 2013-09-07T13:46:34.683 に答える