回答編集履歴

追記

2022/02/03 02:41

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -190,7 +190,7 @@
 @*<h2>Index4</h2>*@
 ```
-の部分の @{ ... } をコメントアウトして、@*<h2>Index4</h2>*@ を解除して実行し、textarea に abc と入力して［保存］ボタンをクリックすると以下のようになります。
+の部分の ```@{ ... }``` をコメントアウトし、```@*<h2>Index4</h2>*@``` のコメントを解除して実行し、textarea に abc と入力して［保存］ボタンをクリックすると以下のようになります。
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-03/78b70320-09e4-4c8d-81b1-10fff872315f.jpeg)

2022/02/03 02:17

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -3,3 +3,201 @@
 MVC5 で AjaxHelper が働かない
 http://surferonwww.info/BlogEngine/post/2018/05/28/ajaxhelpers-do-not-work-on-mvc5-application-created-by-visual-studio-template.aspx
+---
+**追記**
+下のコメント欄の 2022/02/03 09:35 私のコメントで、
+> 「Post/Redirect/Get パターンを使おうとして先の私のコードを書き換えた時」のコードが見つかって、質問に書いてある「一回目は OK だが二回目以降がダメ」が再現できました。後で回答欄に追記しておきます。
+・・・と書いた件です。
+> ＜参考にした質問ページ＞
+> https://teratail.com/questions/137630
+の私の回答のコードを、Post/Redirect/Get パターンを使うように書き直したものが以下のコードです。
+提示したコードではビュー Index4.cshtml に対症療法を施していますので「一回目は OK だが二回目以降がダメ」という問題は出ませんが、この追記の下の方に問題を再現する方法を書きます。
+もし、Post/Redirect/Get パターンというのが何か不明でしたら以下の記事の中頃の画像以下を読んでください。
+EditorFor と DisplayFor の違い
+http://surferonwww.info/BlogEngine/post/2013/03/27/editorfor-and-displayfor-display-different-values.aspx
+**モデル TextAreaModel**
+```
+using System.ComponentModel.DataAnnotations;
+namespace Mvc5App.Models
+{
+    public class TextAreaModel
+    {
+        [Required]
+        [StringLength(15)]
+        [DataType(DataType.MultilineText)]
+        public string Comment { get; set; }
+    }
+}
+```
+**ビュー Index4.cshtml**
+```
+@using Mvc5App.Models
+@model Mvc5App.Models.TextAreaModel
+@{
+    ViewBag.Title = "Index4";
+}
+@{
+    // Redirect/Get のとき _ViewStart.cshtml で設定されている_Layout.cshtml が
+    // ダブる。<h2>Index4</h2> もダブる。そうなると Ajax.BeginForm が働かない。
+    // これはその対症療法
+    TextAreaModel model = TempData["ValidatedModel"] as TextAreaModel;
+    if (model != null)
+    {
+        Layout = null;
+    }
+    else
+    {
+        <h2>Index4</h2>
+    }
+}
+@*<h2>Index4</h2>*@
+<div>
+    @Html.Partial("_Comment", Model)
+</div>
+@section Scripts {
+    @Scripts.Render("~/bundles/jqueryval")
+    <script type="text/javascript">
+    //<![CDATA[
+        function disableSaveButton() {
+            $("#save-button").attr('disabled', 'disabled');
+        }
+        function enableSaveButton() {
+            $("#save-button").removeAttr('disabled');
+        }
+    //]]>
+    </script>
+}
+```
+**部分ビュー _Comment.cshtml**
+```
+@model Mvc5App.Models.TextAreaModel
+@using (Ajax.BeginForm(
+    "Save",
+    "Ajax",
+    new AjaxOptions
+    {
+        InsertionMode = InsertionMode.Replace,
+        HttpMethod = "POST",
+        UpdateTargetId = "replaceArea",
+        OnBegin = "disableSaveButton",
+        OnComplete = "enableSaveButton"
+    }))
+{
+    // Html.AntiForgeryToken はここではダメ。
+    <div id="replaceArea">
+        @Html.AntiForgeryToken()
+        @Html.EditorFor(model => model.Comment)
+        @Html.ValidationMessageFor(model => model.Comment)
+        <br />
+        <input id="save-button" type="submit" value="保存">
+    </div>
+}
+```
+**コントローラー AjaxController**
+```
+using System.Linq;
+using System.Web.Mvc;
+using Mvc5App.Models;
+namespace Mvc5App.Controllers
+{
+    public class AjaxController : Controller
+    {
+        public ActionResult Index4()
+        {
+            TextAreaModel model = TempData["ValidatedModel"] as TextAreaModel;
+            if (model == null)
+            {
+                // 初期画面
+                model = new TextAreaModel();
+                model.Comment = "初期値";
+            }
+            return View(model);
+        }
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Save(TextAreaModel model)
+        {
+            if (!Request.IsAjaxRequest())
+            {
+                return Content("AJAX を使った非同期呼び出ししかできません。");
+            }
+            if (ModelState.IsValid)
+            {
+                // コメントの取得
+                string comment = model.Comment;
+                // DB の更新。コードは省略
+                // Post/Redirect/Get パターンを使う
+                TempData["ValidatedModel"] = model;
+                return RedirectToAction("Index4");
+            }
+            return PartialView("_Comment", model);
+        }
+    }
+}
+```
+上に「この追記の下の方に問題を再現する方法を書きます」と書いた件ですが、ビュー Index4.cshtml に施した対症療法を解除すると再現できます。
+```
+@{
+    // Redirect/Get のとき _ViewStart.cshtml で設定されている_Layout.cshtml が
+    // ダブる。<h2>Index4</h2> もダブる。そうなると Ajax.BeginForm が働かない。
+    // これはその対症療法
+    TextAreaModel model = TempData["ValidatedModel"] as TextAreaModel;
+    if (model != null)
+    {
+        Layout = null;
+    }
+    else
+    {
+        <h2>Index4</h2>
+    }
+}
+@*<h2>Index4</h2>*@
+```
+の部分の @{ ... } をコメントアウトして、@*<h2>Index4</h2>*@ を解除して実行し、textarea に abc と入力して［保存］ボタンをクリックすると以下のようになります。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-03/78b70320-09e4-4c8d-81b1-10fff872315f.jpeg)
+こうなってしまうと Ajax.BeginForm は働かず、次の［保存］ボタンクリックで以下のようになってしまいます。
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-02-03/39f5fa21-1053-4f91-88c2-1f8378fa931a.jpeg)
+質問者さんのコードとは違うとは思いますが、問題としている現象は同じということは、似たようなことにっているのではないでしょうか？
+なお、原因は調べ切れていません。対症療法で逃げてしまったので。想像ですが、Ajax.BeginForm は本来は上のような使い方をするものではなく、想定外のことに対応できていないということのような気がします。