Representación de vistas parciales en MVC 3 con Ajax cargando la imagen

Question

Acabo de empezar a usar Html.RenderPartial (usercontrol, modelo) para representar mis controles de usuario. ¿Es posible cambiar esta funcionalidad para mostrar una imagen de carga de Ajax mientras se carga la vista parcial?

EDITAR: Lo intenté pero no pude hacerlo funcionar. Tengo una vista parcial como esto (_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> 

y esto es actualmente la forma en que estoy haciendo que la página:

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

     return View(lstFixtures); 
    } 

}

y esta es la parte pertinente de mi punto de 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> 

¿cómo iba a aplicar su ejemplo a este código?

EDIT:

lo descubrió, esto es cómo lo hice:

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

Y en la 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

¿Es posible cambiar esta funcionalidad para mostrar una imagen de carga de Ajax mientras se carga la vista parcial?

No, Html.RenderPartial no utiliza ningún AJAX, el contenido está directamente incluido en el servidor.

Si desea utilizar AJAX en lugar de Html.RenderPartial poner un div en su opinión:

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

luego escribir una acción de controlador que le devolverá la parcial:

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

, entonces tendrá la correspondiente parcial (~/Views/Home/Myartial.cshtml):

@model MyViewModel 
... 

y el último paso es escribir javascript que dará lugar a la llamada AJAX:

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

y la última pieza es mostrar una animación de carga. Esto podría hacerse de múltiples maneras. Una forma es utilizar el global ajax event handlers:

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

Otra posibilidad es simplemente poner algún texto o imagen en su div inicialmente:

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

y puesto que el contenido de este div serán sustituidos en el éxito devolución de llamada de la llamada ajax con el contenido del parcial, el texto de carga desaparecerá. Solo tenga cuidado con esto porque si hay un error, la devolución de llamada correcta no se activará y el div permanecerá con su texto inicial. Por lo tanto, se prefiere el controlador completo en este caso para ocultar la animación.