javascript - partialview - Renderizar vista parcial utilizando jQuery en ASP.NET MVC

mvc reload partial view with jquery

Question

¿Cómo renderizo la vista parcial usando jquery?

Podemos hacer la vista parcial de esta manera:

<% Html.RenderPartial("UserDetails"); %>

¿Cómo podemos hacer lo mismo usando jquery?

Answer 1

@tvanfosson mece con su respuesta.

Sin embargo, sugeriría una mejora dentro de js y una pequeña comprobación del controlador.

Cuando usamos el ayudante @Url para @Url una acción, recibiremos un html con formato. Sería mejor actualizar el contenido ( .html ), no el elemento real ( .replaceWith ).

Más acerca de en: ¿Cuál es la diferencia entre replaceQith () 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);
}

Answer 2

Deberá crear una Acción en su Controlador que devuelva el resultado renderizado de la vista parcial o el control "Detalles de Usuario". Luego solo use un Obtener en HTTP o Publicar desde jQuery para llamar a la Acción y obtener el HTML procesado que se mostrará.

Answer 3

He usado la carga de ajax para hacer esto:

$(''#user_content'').load(''@Url.Action("UserDetails","User")'');

Answer 4

Lo hice así.

$(document).ready(function(){
$("#yourid").click(function(){
$(this).load(''@Url.Action("Details")'');
});
});

Método de detalles:

public IActionResult Details()
{
return PartialView("Your Partial View");
}

Answer 5

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 agregarlo a la página utilizando jQuery / AJAX. A continuación, tenemos un controlador de clic de botón que carga la url para la acción desde un atributo de datos en el botón y dispara 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) {
$detailsDiv.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 es asumiendo que su vista parcial es un contenedor con el id detailsDiv para que solo reemplace 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>

Vista parcial de UserDetails

<div id="detailsDiv">
<!-- ...content... -->
</div>

Answer 6

Otra cosa que puedes probar (según la respuesta de tvanfosson) es esto:

<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 hace que tu @ Html.RenderAction use ajax.

Y para hacerlo todo fany sjmansy puedes agregar un efecto de fundido de entrada 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 que amo mvc :-)