如何在 ASP.NET 应用程序的手风琴 div 中加载部分视图？答案

【问题标题】：How do you load a partial view within an accordian div in an ASP.NET application?如何在 ASP.NET 应用程序的手风琴 div 中加载部分视图？
【发布时间】：2012-05-20 07:00:08
【问题描述】：

所以目前，我的页面正在加载：

    <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 来加载它，但我无法让它工作。任何建议将不胜感激。

【问题讨论】：

确保在标签中定位正确的技术，在本例中为ASP.NET MVC。

标签： javascript jquery ajax asp.net-mvc accordion

【解决方案1】：

如果您为这些部分设置控制器操作 (PartialViewResult)，您可以使用 jQuery $.ajax 调用加载它们。你会写类似

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

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

更新：

如果您已经拥有此页面的本地数据，我建议您执行类似Handlebars 模板的操作，只需 $("div").append() 将数据添加到您所在的页面，其中 div 是选择器你想包含数据。

【讨论】：

我对此进行了调查，但我无法找到将数据放入其中的方法，而无需执行一些已经完成的数据库查询。
啊——我想我没有意识到数据已经可用于视图。

【解决方案2】：

好吧，当请求数据时它并没有完全做到这一点，但我改变了一些东西，并且能够通过执行以下操作来获得所需的功能：

在$(document).ready(function() { ... });我用过

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

对于每个手风琴标签。所以现在页面最初加载得更快，然后在加载数据时填充 div。如果在加载数据之前没有打开 div，他们不会知道它做了任何背景工作，否则它只会显示“正在加载...”并很快被填写。

【讨论】：