Renderowanie widoków częściowych w MVC 3 z obrazem ładującym Ajax

Question

Właśnie zacząłem używać Html.RenderPartial (usercontrol, model) do renderowania moich kontrolek użytkownika. Czy można zmienić tę funkcję, aby wyświetlać obraz ładujący Ajax podczas ładowania częściowego widoku?

EDYCJA: Próbowałem tego, ale nie mogłem go uruchomić. Mam częściowy widok tak (_FixtureList.cshmtl):

@model List<Areas.Gameplan.Models.Fixture> 

@foreach (var item in this.Model) 
{ 

<tr> 
    <td class="teamgrid">@Html.Encode(item.Week)</td> 
    <td><img src='@Html.Encode(item.Logo)' alt="Logo" /></td> 
    <td class="teamgrid">@Html.Encode(item.Opponent)</td> 
    <td class="teamgrid">@Html.Encode(item.Result)</td> 
</tr> 

I to jest obecnie, jak ja renderowania strony:

public ActionResult Cincinnati() 
    { 
     //renderpartial 
     List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2017", "Cincinnati"); 

     return View(lstFixtures); 
    } 

}

I to jest odpowiednia część mój widok (Cincinnati.cshtml):

@model List<Areas.Gameplan.Models.Fixture> 

@{ 
    ViewBag.Title = "Cincinnati Bengals"; 
    Layout = "~/Areas/Gameplan/Views/Shared/_Layout.cshtml"; 
} 


<div id="bigborder"> 

    <p> 
     <br /> 

    <div class="sidebarleftteam"> 

     <div id="divFixtures"> 

      <table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr> 

       @{ Html.RenderPartial("_FixtureList", this.Model); } 

      </table> 

Jak mogę zastosować Twój przykład do tego kodu?

EDIT:

Zdobione, to jak to zrobiłem:

public ActionResult MyPartial() 
    { 
     List<Fixture> lstFixtures = _Base.DataRepository.GetFixtureList("2016", "Cincinnati"); 
     return PartialView("_FixtureList", lstFixtures); 
    } 

I w widoku:

$.ajax(
{ 
    type: 'POST', 
    async: true, 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'html', 
    url: 'MyPartial', 
    beforeSend: function (xhr) { 
     $('#mydiv').addClass('ajaxRefreshing'); 
     xhr.setRequestHeader('X-Client', 'jQuery'); 
    }, 
    success: function (result) { 
     $('#mydiv').html("<table id='tblFixtures' align='center'><tr><th><img src='../../../../Content/Images/Gameplan/fixtureweek.jpg' /></th><th><img src='../../../../Content/Images/Gameplan/fixtureopponent.jpg' /></th><th/><th><img src='../../../../Content/Images/Gameplan/fixturescore.jpg' /></th></tr>" + result + "</table>"); 
    }, 

    error: function (error) { 
     alert(error); 
    }, 
    complete: function() { 
     $('#mydiv').removeClass('ajaxRefreshing'); 
    } 
}); 

Answer 1

to możliwe, aby zmienić tę funkcjonalność pokazać obraz ładujący się Ajax przy załadowanym obrazie cząstkowym?

Nie, Html.RenderPartial nie używa żadnej AJAX, zawartość jest bezpośrednio zawarta na serwerze.

Jeśli chcesz użyć AJAX zamiast Html.RenderPartial umieścić div w widoku:

<div id="mydiv" data-url="@Url.Action("MyPartial", "Home")"></div> 

następnie napisać działanie kontrolera że zwróci częściowy:

public class HomeController: Controller 
{ 
    // that's the action that serves the main view 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    // that's the action that will be invoked using AJAX and which 
    // will return the partial view 
    public ActionResult MyPartial() 
    { 
     var model = ... 
     return PartialView(model); 
    } 
} 

wtedy masz odpowiednie częściowe (~/Views/Home/Myartial.cshtml):

@model MyViewModel 
... 

i ostatnie krok to napisanie kodu javascript, który wyzwoli wywołanie AJAX:

$(function() { 
    var myDiv = $('#mydiv'); 
    $.ajax({ 
     url: myDiv.data('url'),  
     type: 'GET', 
     cache: false, 
     context: myDiv, 
     success: function(result) { 
      this.html(result); 
     } 
    }); 
}); 

, a ostatnim elementem jest wyświetlenie animacji ładowania. Można to zrobić na wiele sposobów. Jednym ze sposobów jest użycie global ajax event handlers:

$(document).ajaxSend(function() { 
    // TODO: show your animation 
}).ajaxComplete(function() { 
    // TODO: hide your animation 
}); 

Inną możliwością jest po prostu umieścić tekst lub obraz w div początkowo:

<div id="mydiv" data-url="@Url.Action("MyPartial", "Home")"> 
    Loading ... 
</div> 

i od zawartości DIV będzie zastąpić w sukces wywołanie zwrotne wywołania ajax z treścią częściowego tekstu ładującego zniknie. Po prostu zachowaj ostrożność, ponieważ jeśli wystąpi błąd, oddzwanianie powodzenia nie zostanie uruchomione, a element div pozostanie z pierwotnym tekstem. W takim przypadku preferowany jest cały moduł obsługi, aby ukryć animację.