web-dev-qa-db-ja.com

コントローラへのajax呼び出しを介してMVC5で部分ビューをレンダリングし、HTMLを返す方法

AJAXを使用して、htmlでレンダリングされた完全な部分ビューをロードする方法(したがって、div.htmlを設定するだけです)

完全な部分ビュー(赤)をレンダリングし、現在ロードされているビューの最後に追加するコントローラーアクションを呼び出すには、ajax呼び出しが必要ですか?

[DOMに追加する方法と、AJAX呼び出し]を行う方法を知っています。

私はこのための最良の配管アプローチ、アクションが返すべきActionResultのタイプおよびthisの組み込みメカニズムが既にある場合、車輪の再発明を避けるために?

enter image description here

17
Paceman

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ボタンをクリックすると、さらに投稿がロードされます。

注1OnBegin関数を実装して、次にロードする投稿を決定するための実際のロジックを実装できます(たとえば、最後にロードされた投稿のIDを取得して、サーバ)。

注2:カスタムjQuery.ajax呼び出し(jquery.unobtrusiveなし)でも同じ結果が得られます。唯一の違いは、手動のajax呼び出しとクリックイベントです。


お役に立てれば。必要に応じて、より完全な例を書くことができます。

22
Viktor Bahtev

NUGETから_Westwind.Web.Mvc_ライブラリを取得することをお勧めします。任意のビューを文字列に対して実行して、JSONの結果として返すことができます。

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

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

@Guruprasadがコメントで述べたように、return PartialView(model)を使用してMVCコントローラーから部分的なビューを返すことができますが、RenderPartialViewでは、他の値とともにJSONとして出力できる文字列として取得しますもし必要なら。これは、組み込みのビューをレンダリングする機能がないため、WebAPIを使用する場合に機能します。

2
Luke