4

現在、私はこれをロードしているページを持っています:

    <div class="accordion">
        <h2><a href="#">Pending Flyers</a></h2>
        <div id="flyers-0" class="accordion-item"><% Html.RenderPartial("ManageFlyers", new { flyers = pendingFlyersWithCategory }); %></div>
        <h2><a href="#">Approved Flyers</a></h2>
        <div id="flyers-1" class="accordion-item"><% Html.RenderPartial("ManageFlyers", new  { flyers = approvedFlyersWithCategory }); %></div>
        <h2><a href="#">Denied Flyers</a></h2>
        <div id="flyers-2" class="accordion-item"><% Html.RenderPartial("ManageFlyers", new  { flyers = deniedFlyersWithCategory }); %></div>
        <h2><a href="#">Published Flyers</a></h2>
        <div id="flyers-3" class="accordion-item"><% Html.RenderPartial("ManageFlyers", new  { flyers = publishedFlyersWithCategory }); %></div>
        <h2><a href="#">Expired Flyers</a></h2>
        <div id="flyers-4" class="accordion-item"><% Html.RenderPartial("ManageFlyers", new  { flyers = expiredFlyersWithCategory }); %></div>
    </div>

この Java スクリプトを使用して、アコーディオンの操作を行います。

<script language="javascript" type="text/javascript">
    if ($('.accordion').length > 0) {
        $('.accordion-item').hide();
        $('.accordion-selected').show();

        $('.accordion h2').click(function () {
            $(this).next('.accordion-item').slideToggle('slow');
        });

        $('.accordion h2 a').click(function () {
            var element = $(this).parent().next('.accordion-item');
            element.slideToggle('slow');
            return false;
        });
    }
 </script>
 <script type="text/javascript">
     $(document).ready(function () {

         // Accordian state restore
         var accord = '<%= Session["accordianIndex"] %>';
         var currentindex = 0;

         if (accord != "") {
             currentindex = accord;
         }

         $("#flyers-" + currentindex).slideToggle("slow");
         // end Accordian state restore
     });

     $("div.description").expander({
         slicePoint: 200
     });
</script>

ページの初期読み込みを高速化するために、AJAX を使用して部分ビューを読み込み、アコーディオンのその部分が展開されたときにそれらを挿入するように設定したいと考えています。

と javascriptの両方<%= Ajax.ActionLink ... %>をロードしてみましたが、動作しません。任意の提案をいただければ幸いです。

4

2 に答える 2

0

これらのパーシャルのコントローラー アクション (PartialViewResult) をセットアップすると、jQuery の $.ajax 呼び出しでそれらをロードできます。あなたは次のようなものを書くでしょう

$.ajax({ url: /controller/Action, data: {stuff} });

このアプローチにより、アコーディオンを切り替えたときにクリック メソッドまたはその他のイベントで説明したように、ロード時間をオフセットできます。

更新：

このページにローカルなデータが既にある場合は、Handlebarsテンプレートのようなものを実行し、現在のページにデータを $("div").append() することをお勧めします。div は、含めるセレクターです。データイン。

于 2012-05-11T17:24:17.180 に答える
0

データが要求されたときにそれを正確に行うわけではありませんが、いくつか変更して、次のようにして目的の機能を得ることができました。

$(document).ready(function() { ... });私が使った中で

$('#flyers-0').load('<%= Url.Action("ManageFlyers", new { stuff }) %>');

アコーディオンタブごとに。そのため、ページの最初の読み込みがはるかに速くなり、データの読み込み時に div が埋められます。データが読み込まれるまで div が開かれないと、バックグラウンドで何かが行われたことがわかりません。

于 2012-05-14T13:26:30.463 に答える