Luego de tanto luchar pudimos dar con el arreglo de esta preocupación que muchos de nuestros lectores de esta web han presentado. Si quieres aportar algún detalle puedes dejar tu conocimiento.
Solución:
No puede representar 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 de botón que carga la URL para la acción desde un archivo de datos attribute en el botón y dispara una solicitud GET para reemplazar el DIV contenido en la vista parcial con los contenidos actualizados.
$('.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 detailsDiv
para que simplemente reemplace todo con el contenido del resultado de la llamada.
Botón de vista principal
User
es el nombre del controlador y details
es el nombre de la acción en @Url.Action()
. Vista parcial de UserDetails
He usado ajax load para hacer esto:
$('#user_content').load('@Url.Action("UserDetails","User")');
@tvanfosson sorprende con su respuesta.
Sin embargo, sugeriría una mejora dentro de js y una pequeña verificación del controlador.
cuando usamos @Url
helper para llamar a una acción, vamos a recibir un html formateado. Sería mejor actualizar el contenido (.html
) no el elemento real (.replaceWith
).
Más información 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);
Te mostramos las comentarios y valoraciones de los lectores
Si tienes alguna incertidumbre y disposición de aumentar nuestro crónica eres capaz de escribir una reseña y con deseo lo leeremos.