Rendering di viste parziali in MVC 3 con Ajax caricamento immagine

Question

Ho appena iniziato a utilizzare Html.RenderPartial (usercontrol, model) per eseguire il rendering dei controlli utente. È possibile modificare questa funzionalità per mostrare un'immagine Ajax durante il caricamento della vista parziale?

EDIT: ci ha provato, ma non è riuscito a farlo funzionare. Ho una vista parziale come questo (_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> 

e questo è il momento come sto rendering della pagina:

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

     return View(lstFixtures); 
    } 

}

e questa è la parte rilevante del mio punto di vista (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> 

Come dovrei applicare il tuo esempio a questo codice?

EDIT:

capito, questo è come ho fatto:

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

E nella vista:

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

E 'possibile cambiare questa funzionalità per mostra un'immagine Ajax durante il caricamento dell'immagine mentre la vista parziale viene caricata?

No, Html.RenderPartial non utilizza alcun AJAX, il contenuto è direttamente incluso nel server.

Se si desidera utilizzare AJAX invece di Html.RenderPartial mettere un div nella vista:

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

quindi scrivere un'azione di controllo in grado di restituire il parziale:

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); 
    } 
} 

allora si avrà la corrispondente parziale (~/Views/Home/Myartial.cshtml):

@model MyViewModel 
... 

e l'ultimo passo è quello di scrivere javascript che attiverà la chiamata AJAX:

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

e l'ultimo pezzo è quello di mostrare un'animazione di caricamento. Questo potrebbe essere fatto in diversi modi. Un modo è quello di utilizzare il global ajax event handlers:

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

Un'altra possibilità è quella di mettere semplicemente qualche testo o l'immagine nel vostro div inizialmente:

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

e dal momento che il contenuto di questo div sara 'sostituito nel successo richiamata della chiamata ajax con il contenuto del partial, il testo di caricamento scomparirà. Basta fare attenzione con questo perché se c'è un errore la callback di successo non si innescherà e il div rimarrà con il suo testo iniziale. Quindi il gestore completo è preferito in questo caso per nascondere l'animazione.