在ASP.NET应用程序中，如何在折叠div内加载部分视图？

Question

目前，我让页面加载了以下内容：

    <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>

使用此JavaScript来实现手风琴效果：

<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来加载它，但无法使其正常工作。如有建议，敬请提出。

- Alex

---

请确保在标签中选择正确的技术，这种情况下应该是 ASP.NET MVC。 - James Johnson

Answer 1

如果您为这些部分设置控制器操作（PartialViewResult），则可以使用jQuery $.ajax调用加载它们。您可以编写类似以下的代码：

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

这种方法可以让您偏移加载时间，就像您在单击方法或切换手风琴的某些其他事件中描述的那样。

更新：

如果您已经将数据本地化到此页面，请建议使用Handlebars模板，并只需将数据$("div").append()添加到所在页面中选择器为div的容器中。

- Ryan Lanciaux

---

我研究了一下，虽然我找不到一种方法将数据放入其中，而不必执行已经完成的多个数据库查询以达到这一点。 - Alex

啊 -- 我想我没有意识到数据已经可用于视图了。 - Ryan Lanciaux

Answer 2

好吧，它并不是在请求数据时立即执行，但我改变了一些东西，并通过以下方式获得了所需的功能：

在 $(document).ready(function() { ... }); 中，我使用了

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

对于手风琴标签中的每一个，现在页面初始加载速度更快，然后在数据加载时填充div。如果直到数据加载后才打开div，则用户不会知道它进行了任何后台操作，否则它只会显示“正在加载...”并很快被填充。

- Alex