Saltar al contenido

Renderizar vista parcial usando jQuery en ASP.NET MVC

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *