Ajax成功時の部分ビューの更新　(ASP.NET Core MVC)

実現したいこと

Ajaxが成功した時に以下を行いたいです。
・部分ビューの更新
・親ビューへ成功メッセージの出力

前提

ASP.NET Core MVCで業務アプリケーションを作っています。
実装方法がわからない点について教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコードのように実装すれば、
Ajaxが成功した場合、部分ビューを更新できるところは実現できました。
・部分ビューの更新
・親ビューへ成功メッセージの出力
を行う場合、部分ビューを更新する情報、成功メッセージの情報をJasonで返す必要があると思いますが、
どのようにJSONに格納して、部分ビューを更新してよいかわかりません。

該当のソースコード

親ビュー (ParentView.cshtml):

@model ParentViewModel

@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
    <div class="form-group">
        @Html.LabelFor(model => model.Name)
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
    </div>

    <input type="submit" value="Submit" class="btn btn-primary" />
}

//部分ビューの描画場所
<div id="partialViewContainer">
    @Html.Partial("_PartialView", Model.PartialViewModel)
</div>

@section scripts {
    <script>
        // フォームのサブミット時にAjaxリクエストを送信して部分ビューを更新する
        $(function () {
            $('form').submit(function (event) {
                event.preventDefault();
                var form = $(this);

                $.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: form.serialize(),
                    success: function (result) {
                        $('#partialViewContainer').html(result);
                    }
                });
            });
        });
    </script>
}

部分ビュー (_PartialView.cshtml):

@model PartialViewModel

<h2>Partial View</h2>

<p>Name: @Model.Name</p>

コントローラー (HomeController.cs):

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var parentViewModel = new ParentViewModel();
        parentViewModel.PartialViewModel = new PartialViewModel();

        return View("ParentView", parentViewModel);
    }

    [HttpPost]
    public IActionResult SubmitForm(ParentViewModel parentViewModel)
    {
        // フォームのデータを受け取り、部分ビューのモデルを更新する処理を行う

        // 部分ビューに渡すモデルを再取得する（更新したモデルを使用する）
        var updatedPartialViewModel = new PartialViewModel();
        updatedPartialViewModel.Name = parentViewModel.Name;

        // 部分ビューを再描画して返す
        return PartialView("_PartialView", updatedPartialViewModel);
    }
}

試したこと

下記のような形で実装できないか試しているのですが、
Controllerから返すJSONのhtmlContentsにどうやって部分ビューの更新情報をセットしてよいかわかりません。
該当のソースコードのコントローラーのメソッド(SubmitForm)で返している
PartialView("_PartialView", updatedPartialViewModel);をhtmlContentsにセットしてもうまくいかないことまではわかっております。

親ビュー (ParentView.cshtml):

@section scripts {
    <script>
        // フォームのサブミット時にAjaxリクエストを送信して部分ビューを更新する
        $(function () {
            $('form').submit(function (event) {
                event.preventDefault();
                var form = $(this);

                $.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: form.serialize(),
                    success: function (result) {
                        //■■■変更部分■■■
                        //成功したら・・・
                        if (result.success) {
                            //部分ビュー更新(ここで部分ビューを更新する情報を受け取りたい)
                            $('#partialViewContainer').html(result.htmlContents);
                            //親ビューへ成功メッセージの出力(ここで出力するメッセージを受け取りたい)
                            $('#messageContainer').html('<div>' + result.message + '</div>');
                        } 
                    }
                });
            });
        });
    </script>
}

コントローラー (HomeController.cs):

    [HttpPost]
    public IActionResult SubmitForm(ParentViewModel parentViewModel)
    {
        // フォームのデータを受け取り、部分ビューのモデルを更新する処理を行う

        // 部分ビューに渡すモデルを再取得する（更新したモデルを使用する）
        var updatedPartialViewModel = new PartialViewModel();
        updatedPartialViewModel.Name = parentViewModel.Name;
　　　
        //■■■変更部分■■■
        // JSONを返す。
        return Json(new { success = true, .htmlContents=(ここにどうやってセットすればよいわからない。) ,message = "処理成功" });
    }

補足情報（FW/ツールのバージョンなど）

ASP.NET Core MVC
.NET6
Visual Studio 2022

退会済みユーザー

2023/05/27 07:17 編集

ASP.NET のタグをつけてください。 Jason は JSON の間違いだと思いますが訂正願います。

退会済みユーザー

2023/05/27 09:33

Jason は JSON の間違いだと思いますが訂正願います。一カ所直ってますが、もう一カ所あります。

行動規範の内容に同意します

回答1件

ベストアンサー

親ビューへ成功メッセージの出力

// フォームのサブミット時にAjaxリクエストを送信して部分ビューを更新する

どうして「親ビューへ成功メッセージの出力」「フォームのサブミット」をする必要があるのでしょうか？

普通に考えて AJAX を使うということは、AJAX 要求を出して帰ってきた応答でページの部分的な更新を行うケースですが、その理解で合ってますよね？

であれば「フォームのサブミット」はしません。サブミットすると返ってきた応答で画面全部が再描画されてしまいますから。

「親ビューへ成功メッセージの出力」も必要ないと思います。ページの部分的な更新が完了すればそれは成功ということのはずですから。

AJAX 要求に対する応答は、(1) 部分ビューを使って html ソースを返す、または、(2) JSON 文字列を返すのが一般的です。

(1) の場合は例えばページに div 要素を配置しておいて、その中身を返ってきた html ソースで書き換える、(2) の場合は返ってきた JSON 文字列を JavaScript オブジェクトにデシリアライズし、JavaScript で html 要素を組み立ててページに表示するという形になります。

質問には部分ビューを使うと書いてあるので、上の (1) のケースになるのではないですか？

その具体例は以下の記事を見てください。

jQuery ajax で部分ビューの呼出・表示 (CORE)
http://surferonwww.info/BlogEngine/post/2020/03/07/use-jquery-ajax-to-request-and-render-partial-view.aspx

投稿2023/05/27 08:00

編集2023/05/27 08:13

退会済みユーザー

総合スコア0

yoshin

2023/05/27 09:21

ご回答ありがとうございます。 >>普通に考えて AJAX を使うということは、AJAX 要求を出して帰ってきた応答でページの部分的な更新を行うケース>>ですが、その理解で合ってますよね？ →合っています。 >>質問には部分ビューを使うと書いてあるので、上の (1) のケースになるのではないですか？ →(1) のケースになります。ご提示いただいた記事を確認いたします。事情がありまして確認するのに時間がかかってしまうかと思います。

退会済みユーザー

2023/05/27 09:36

時間がかかること了解しました。不明点があればここコメント欄で聞いてください。

yoshin

2023/06/01 01:41 編集

お時間かかりすみません。参考のサイトを確認し、部分ビューを使って html ソースを返す。ページに div 要素を配置しておいて、その中身を返ってきた html ソースで書き換える。方法で進めることにしました。ご回答いただきありがとうございました。

行動規範の内容に同意します