Renderizar vista parcial usando jQuery en ASP.NET MVC
¿Cómo renderizo la vista parcial usando jquery?
Podemos renderizar la Vista parcial así:
<% Html.RenderPartial("UserDetails"); %>
¿Cómo podemos hacer lo mismo usando jquery?
No puedes renderizar una vista parcial usando solo jQuery. Sin embargo, puede llamar a un método (acción) que representará la vista parcial y la agregará a la página usando jQuery/AJAX. A continuación, tenemos un controlador de clic en un botón que carga la URL de la acción desde un atributo de datos en el botón y activa una solicitud GET para reemplazar el DIV contenido en la vista parcial con el contenido actualizado.
$('.js-reload-details').on('click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var $detailDiv = $('#detailsDiv'),
url = $(this).data('url');
$.get(url, function(data) {
$detailDiv.replaceWith(data);
});
});
donde el controlador de usuario tiene una acción llamada detalles que hace:
public ActionResult Details( int id )
{
var model = ...get user from db using id...
return PartialView( "UserDetails", model );
}
Esto supone que su vista parcial es un contenedor con la identificación, detailsDivde modo que simplemente reemplaza todo con el contenido del resultado de la llamada.
Botón de vista principal
<button data-url='@Url.Action("details","user", new { id = Model.ID } )'
class="js-reload-details">Reload</button>
Useres el nombre del controlador y detailses el nombre de la acción en @Url.Action(). Vista parcial de detalles de usuario
<div id="detailsDiv">
<!-- ...content... -->
</div>
He usado carga ajax para hacer esto:
$('#user_content').load('@Url.Action("UserDetails","User")');
@tvanfosson es genial con su respuesta.
Sin embargo, sugeriría una mejora en js y una pequeña verificación del controlador.
Cuando usamos @Urlel asistente para llamar a una acción, recibiremos un html formateado. Sería mejor actualizar el contenido ( .html) no el elemento real ( .replaceWith).
Más sobre en: ¿ Cuál es la diferencia entre replaceWith() y html() de jQuery?
$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
$('#detailsDiv').html(data);
});
Esto es especialmente útil en árboles, donde el contenido se puede cambiar varias veces.
En el controlador podemos reutilizar la acción dependiendo del solicitante:
public ActionResult Details( int id )
{
var model = GetFooModel();
if (Request.IsAjaxRequest())
{
return PartialView( "UserDetails", model );
}
return View(model);
}
Otra cosa que puedes probar (basada en la respuesta de tvanfosson) es esta:
<div class="renderaction fade-in"
data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>
Y luego en la sección de scripts de tu página:
<script type="text/javascript">
$(function () {
$(".renderaction").each(function (i, n) {
var $n = $(n),
url = $n.attr('data-actionurl'),
$this = $(this);
$.get(url, function (data) {
$this.html(data);
});
});
});
</script>
Esto representa tu @Html.RenderAction usando ajax.
Y para hacerlo todo fantástico, puedes agregar un efecto de aparición gradual usando este CSS:
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
-o-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
Hombre, amo mvc :-)
Deberá crear una acción en su controlador que devuelva el resultado representado de la vista o control parcial "Detalles del usuario". Luego, simplemente use un Http Get o Post de jQuery para llamar a la Acción y obtener el html renderizado que se mostrará.
