web-dev-qa-db-ja.com

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

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

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

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

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

enter image description here

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

注1：OnBegin関数を実装して、次にロードする投稿を決定するための実際のロジックを実装できます（たとえば、最後にロードされた投稿の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