Geek asks and answers

How do you load a partial view in a div agreement in an ASP.NET application?

so currently i have a page loading this:

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

with this java script to make accordion material:

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

I want to configure it to use AJAX to load partial views and insert them when this part of the accordion is expanded to speed up the initial loading of the page.

I tried both <%= Ajax.ActionLink ... %>and javascript to load it, but I can't get it to work. Any suggestions would be appreciated.

+3
source share
2 answers

Well, this is not entirely true when data is requested, but I changed some things and was able to get the desired functionality by doing the following:

$(document).ready(function() { ... });

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

. , div, . div , , , - , "..." .

0

Controller Actions (PartialViewResult) , jQuery $.ajax. -

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

, - , .

:

, - Handlebars $( "div" ).append() , , div - , .

0

More articles:


All Articles