Как отобразить частичный вид в MVC5 через вызов ajax контроллеру и вернуть HTML

Как использовать AJAX для загрузки полного частичного представления, отображаемого в html (поэтому я просто установил div.html)

Мне нужен вызов ajax для вызова действия контроллера, который отобразит полное частичное представление (красное) и добавит его в конец загруженного в данный момент?

[Я знаю, как добавлять к DOM и как делать вызовы AJAX]

Мне нужно знать, что является лучшим сантехникой для этого, , какой тип ActionResult должен возвращать действие и , если есть уже встроенный механизм для этого, чтобы избежать повторного использования колеса?

Ответы

Ответ 1

В ASP.NET MVC есть встроенные помощники ajax, которые могут охватывать основные сценарии.

Вам необходимо установить и передать jquery.unobtrusive-ajax библиотеку JavaScript (+ jQuery). Затем в главном представлении (скажем, index.cshtml) введите следующий код:

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>

Примечание: @Ajax.ActionLink хелпер принимает параметр AjaxOptions для дополнительных настроек.

В контроллере (скажем HomeController.cs) вы должны вернуть PartialViewResult:

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

Наконец, вы определяете частичный вид 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 />
}

И что это. Когда какой-либо пользователь нажимает кнопку Load More, будет загружено больше сообщений.

Примечание 1: вы можете реализовать функцию OnBegin для реализации фактической логики для принятия решения о том, какие следующие сообщения для загрузки (например, получить идентификатор последнего загруженного сообщения и отправить его на сервер).

Примечание 2: тот же результат может быть достигнут с помощью пользовательских вызовов jQuery.ajax (без jquery.unobtrusive). Единственными отличиями будут ручные вызовы ajax и события click.

Надеюсь, это поможет. При необходимости я могу написать более полный пример.

Ответ 2

Я рекомендую получить библиотеку Westwind.Web.Mvc из NUGET, и вы можете запустить любое из своих представлений в строке, чтобы вернуться в качестве результата JSON

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

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

Как пояснил @Guruprasad в комментариях, вы можете просто вернуть частичный вид с контроллера MVC с помощью return PartialView(model), но с помощью RenderPartialView вы получите его как строку, которую вы можете выводить как JSON вместе с любыми другими значениями, если обязательный. Это будет работать, если вы решите использовать WebAPI, потому что у него нет возможности визуализации встроенного представления.