質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

.NET

.NETとは、主に.NET Frameworkと呼ばれるアプリケーションまたは開発環境を指します。CLR(共通言語ランタイム)を搭載し、入力された言語をCIL(共通中間言語)に変換・実行することが可能です。そのため、C#やPythonなど複数の言語を用いることができます。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

3679閲覧

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

yoshin

総合スコア39

.NET Core

.NET Coreは、マネージソフトウェアフレームワークでオープンソースで実装されています。クロスプラットフォームを前提に考えられており、Windows/Mac/Linuxで動くアプリケーションを作成することが可能です。

.NET

.NETとは、主に.NET Frameworkと呼ばれるアプリケーションまたは開発環境を指します。CLR(共通言語ランタイム)を搭載し、入力された言語をCIL(共通中間言語)に変換・実行することが可能です。そのため、C#やPythonなど複数の言語を用いることができます。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2023/05/27 06:09

編集2023/05/27 09:15

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/05/27 07:17 編集

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

退会済みユーザー

2023/05/27 09:33

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

回答1

0

ベストアンサー

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

// フォームのサブミット時に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 ソースで書き換える。 方法で進めることにしました。 ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問