2012-05-11 38 views
3

所以目前,我有網頁加載這樣的:如何在ASP.NET應用程序的加載區中加載部分視圖?

<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加載的局部視圖並在手風琴部分展開時插入它們以加速頁面的初始加載。

我已經試用過<%= Ajax.ActionLink ... %>和JavaScript加載它,但我不能得到它的工作。任何建議,將不勝感激。

+0

確保您指定的標籤正確的技術,在這種情況下是'ASP.NET MVC'。 –

回答

0

那麼它不完全做到這一點請求數據時,但我身邊改變了一些東西,能夠通過執行以獲得所需的功能以下:

$(document).ready(function() { ... }); I U sed

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

對於每個手風琴選項卡。所以現在頁面加載得更快,然後在數據加載時填充div。如果直到數據加載後纔打開div,他們不會知道它做了任何背景的事情,否則它只是說「正在加載...」並很快被填入。

0

如果在安裝控制器動作(PartialViewResult)這些諧音,你可以用jQuery的$就調用加載它們。你會寫類似

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

這種做法將讓你抵消你的加載時間就像你在點擊方法或一些其他事件描述當您切換手風琴。

UPDATE

如果你已經有本地本頁面的數據,我建議做一些像Handlebars模板,只需$(「格」)追加()的數據,你的頁面。是在哪裏DIV是選擇要包含在數據中。

+0

我看着的是,雖然我不能找到一種方法,把數據放到它沒有做一個數字,已經做得到這一點數據庫查詢。 – Alex

+0

啊 - 我想我沒有意識到數據已經可用於視圖。 –

相關問題