jquery - vista - partial view mvc 5

Cómo representar una vista parcial en MVC5 a través de una llamada ajax a un controlador y devolver HTML

Question

¿Cómo puedo usar AJAX para cargar una vista parcial completa renderizada en html (así que solo configuré el div.html)

¿Necesito la acción del controlador de llamada a llamada ajax que generará una vista parcial completa (roja) y la agregará al final de la que está cargada actualmente?

[Sé cómo agregar a DOM y cómo hacer llamadas AJAX]

Necesito saber cuál es el mejor enfoque de plomería para esto, qué tipo de ActionResult debería devolver la acción y si ya hay un mecanismo incorporado para evitar reinventar la rueda.

Answer 1

Hay ayudantes ajax integrados en ASP.NET MVC que pueden cubrir los escenarios básicos.

jquery.unobtrusive-ajax instalar y jquery.unobtrusive-ajax biblioteca JavaScript jquery.unobtrusive-ajax (+ dependencia de jQuery). Luego, en su vista principal (digamos index.cshtml) ponga el siguiente código:

Index.cshtml

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

Nota : @Ajax.ActionLink helper acepta el parámetro AjaxOptions para más personalizaciones.

En el controlador (digamos HomeController.cs ) debe devolver PartialViewResult :

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

Finalmente, define la vista parcial MorePosts.cshtml :

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

Y eso es. Cuando algún usuario hace clic en el botón Load More , se cargarán más publicaciones.

Nota 1 : puede implementar la función OnBegin para implementar la lógica real para decidir cuáles son las siguientes publicaciones para cargar (por ejemplo, obtener la identificación de la última publicación cargada y enviarla al servidor).

Nota 2 : se puede lograr el mismo resultado con llamadas jQuery.ajax personalizadas (sin jquery.unobtrusive). Las únicas diferencias serán las llamadas manuales ajax y los eventos de clic.

Espero que esto ayude. Puedo escribir un ejemplo más completo si es necesario.

Answer 2

Recomiendo obtener la biblioteca Westwind.Web.Mvc de NUGET y puede ejecutar cualquiera de sus vistas en una cadena para volver como un resultado JSON

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

Como @Guruprasad dijo en los comentarios, simplemente puede devolver una vista parcial desde un controlador MVC usando return PartialView(model) , pero con RenderPartialView lo obtiene como una cadena que puede generar como JSON junto con cualquier otro valor si es necesario . Esto funcionará si elige usar WebAPI, ya que no tiene la capacidad de representar una vista integrada.