非同期更新でSubmit

Question

下方記載のコードで、以下①、②、③に注意して部分ビュー更新したい時、どのように記述すればいいでしょうか。
※Chrome、IE、Firefox、Opera等主要ブラウザで正常に動かせるようにしたいです。

①１回のsubmitボタン押下でsubmit処理が勝手に２回走らないようにする
②submit完了後、連続でsubmitできるようにする（保存処理後画面をリロードなどしなくても続けて保存処理が出来る）
③textareaは投稿の機能と最新データ（投稿内容）表示を兼任しているので、保存処理後の再描画時は最新データを表示します。つまり、保存ボタン押下直前と押下後の画面表示は変わりません。

<!-- 全体 -->
<div id="all">
  <div id="comment">
    @Html.Partial("_Comment", model)
  </div>
</div>


<!--"_Comment.cshtml"-->
<form id="myform">
  <textarea id="commentValue" name="comment">
  </textarea>
  <input id="save-button" type="submit" value="保存">
</form>

$('#myform').submit(function (event) {
        event.preventDefault();
      
        var url = "@Url.Action("Save", "Home")";
        var $form = $(this);
        var $button = $form.find('submit');

　　　　//textareaの入力内容取得
        var commentData = $("#commentValue").val();

        $.ajax({
            url: url,
            type: 'POST',
            dataType: "html", // 適切か不明
            data: {"comment": commentData},// 適切か不明
            cache: false,
            beforeSend: function(xhr, settings) {// 適切か不明
                $button.attr('disabled', true);// 適切か不明
            },
        }).done(function (data) {
            $form[0].reset();// 適切か不明
            $("#comment").html(data);// 適切か不明
            $button.attr('disabled', false);// 適切か不明
            alert('保存しました。');
        }).fail(function (jqXHR, textStatus, errorThrown) {
　　　　　　//他必要な記述がいまいちわからない
            alert('保存処理に失敗しました。');
        });
    })

//　HomeController
[HttpPost]
public ActionResult Save()
{
 var comment = Request.Form["comment"];
 DB更新メソッド(comment);
 
 var model = 最新データ取得メソッド;
 return PartialView("_Comment", model);
}
```　

わからない点が多すぎて恐縮ですが、ご教授宜しくお願い致します

追記 以下開発環境です。
Windows7
Visual Studio Express 2015 for web
.NET Framework 4.5.2
MVC：ver.5.2.3.0
主にクライアント側のスクリプトの記述の問題で、開発環境の記述は必要性は低いと思って省略してしまいました。
申し訳ありません。

AjaxHelper（Ajax.BeginForm, Ajax.ActionLink） などを使わない理由は特に無く、強いて言えば参考にしたソースを見よう見まねした時にAjaxHelperが使われていなかったことと、使い慣れていないことが理由です。razorも使ったことはありますが、使い慣れておらずよく理解できていません。

Comments

[退会済みユーザー]

ASP.NET MVC の話ですよね？　であれば、ASP.NET または ASP.NET MVC Framework のタグを付けてください。

[退会済みユーザー]

それから、あなたの開発環境（OS, .NET, MVC, Visual Studio のバージョンなど）を書いてください。

[退会済みユーザー]

ASP.NET MVC の話だとすると、AjaxHelper（Ajax.BeginForm, Ajax.ActionLink など）を使わない理由があるのですか？

[退会済みユーザー]

MVC4 のタグを付けたようですが間違いないですか？ MVC5 では？ MVC5 であれば、MVC5 のタグはないので、ASP.NET MVC Framework のタグの方が良いと思います。

Answer 1

ASP.NET MVC の基本に忠実に作れば、フレームワークの方がいろいろと面倒を見てくれます。質問者さんがアップされたコードのように自己流でやるのは、自力でいろいろ解決せねばならず（特に検証関係が問題）、決してお勧めできません。

ASP.NET MVC の基本に忠実に書くと以下のような感じになります。検討してみてください。分からないところはあるかもしれませんが、基本のキなので、ぜひ理解してください。

(0) AjaxHelper が使えるようにする。詳しくは以下の記事参照。

MVC5 で AjaxHelper が働かない
http://surferonwww.info/BlogEngine/post/2018/05/28/ajaxhelpers-do-not-work-on-mvc5-application-created-by-visual-studio-template.aspx

(1) Model を定義し、それにデーターアノテーション属性を付与してユーザー入力の検証ができるようにする（下の例では、必須入力にするとともに文字数を 15 文字に制限しています）。textarea 要素がレンダリングされるよう、適切な DataType 属性を付与する。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity;

namespace Mvc5App.Models
{
    public class TextAreaModel
    {
        [Required]
        [StringLength(15)]
        [DataType(DataType.MultilineText)]
        public string Comment { get; set; }
    }
}

(2) Index4 アクションメソッドは初期画面用（それに対応する View の中に部分ビューを配置）。データを受信する Save アクションメソッドには ValidateAntiForgeryToken 属性を付与。送信されたデータがモデルバインドされるよう上に定義した Model のクラスを引数に取る。ModelState.IsValid でデータアノテーション属性による検証結果を取得し検証 OK / NG を判定。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AdventureWorksLT;
using Mvc5App.Models;

namespace Mvc5App.Controllers
{
    public class CustomerController : Controller
    {
        public ActionResult Index4()
        {
            TextAreaModel model = new TextAreaModel();
            return View(model);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Save(TextAreaModel model)
        {
            if (ModelState.IsValid)
            {
                // コメントの取得
                string comment = model.Comment;

                // DB の更新。コードは省略
            }
            return PartialView("_Comment", model);
        }
    }
}

(3) 上の Index4 アクションメソッドが使う Index4.cshtml は以下の通り。Visual Studio の MVC テンプレートが自動生成するレイアウトページ _Layout.cshtml を利用する。検証用のスクリプト、Button の二度推し防止のためのスクリプトを追加する。

@model Mvc5App.Models.TextAreaModel

@{
    ViewBag.Title = "Index4";
}

<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>
}

(4) 上の Index4.cshtml 内に配置する部分ビュー _Comment.cshtml。AjaxHelper の Ajax.BeginForm を利用。ボタンをクリックすると非同期で Html.EditorFor(model => model.Comment) からレンダリングされた textarea 要素の文字列が Save アクションメソッドに POST されます。戻ってきた応答で UpdateTargetId に指定した div 要素の中身が replace されます。OnBegin, OnComplete に［保存］ボタンを Disable / Enable するためのスクリプト（上の Index4.cshtml に含まれる）のメソッド名を設定します。

@model Mvc5App.Models.TextAreaModel

@using (Ajax.BeginForm("Save", "Customer", 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>    
}

以上ですが、不明点があれば聞いてください。

Comments

[DgRp_08]

返信が遅くなり申し訳ありません。
詳しくご教示いただき、ありがとうございます。
今回はajax記述についてがメインで、時間も無かった為試せていないのですが、しっかり理解し今後使えるようにしていきたいと思います。
ありがとうございました。

[退会済みユーザー]

何でもいいから目先の課題が解決できればいいと言う訳ではないと思いますが、そうであれば最低でもフレームワークに備わっているセキュリティ対策は使うようにしてください。ユーザー入力の検証とか XSS 対策とか。上に書いたように ASP.NET MVC の基本に忠実に行えば実装できます。悪意の攻撃者はネットに五万といるのですから。

Answer 2

submitしたときにsubmitボタンのdisableをtureにして
ajaxの処理が正常終了するdoneの中で
disabledをfalseにもどしてやってください

sample

postで送信する前提ならこうしてみては？

$(function(){
  $('#myform').on('submit',function(e) {
    e.preventDefault();
    var url=$(this).attr('action');
    var sb = $(this).find(':submit');
    var ta = $(this).find('textarea');
    var data=new FormData($(this).get(0));
    sb.prop('disabled',true);
    $.ajax({
    url: url,
    type: 'post',
    data: data,
    processData: false,
    contentType: false,
    }).done(function (data) {
      console.log(data);//戻り値があるなら表示
      sb.prop('disabled',false);
      ta.val('');
      console.log('保存しました。');
    }).fail(function (xhr,err) {
      console.log(err);
    });
  });
});

<form id="myform" action="・・・" method="post">
<textarea id="commentValue" name="comment" required>
</textarea>
<input id="save-button" type="submit" value="保存">
</form>

※連続投稿を想定してtextareのクリアと、必須条件をいれました

Comments

[DgRp_08]

ご回答有り難うございます！

>submitしたときにsubmitボタンのdisableをtureにして
>ajaxの処理が正常終了するdoneの中で
>disabledをfalseにもどしてやってください

以下部分の記述では誤りでしょうか？
----------------------
beforeSend: function(xhr, settings) {// 適切か不明
$button.attr('disabled', true);// 適切か不明
},
----------------------
}).done(function (data) {
$button.attr('disabled', false);// 適切か不明
----------------------

[yambejp]

sample追記しておきました（その後一部調整はいりました）

[DgRp_08]

sampleまでありがとうございます。
現在試せる場所に居ない為、ご回答いただいた内容を参考に試した後、改めてご連絡させていただきます。

補足ですが、連続投稿はしますがtextarea内に入力した内容は常に蓄積されていくイメージなので、クリアしません。textareaが投稿の機能と投稿後の表示を兼任しています。なので、保存処理後は最新データを再表示する用にしたいため、適切か分からないのですが『$("#comment").html(data);』と記述して、再表示するようにしております。。。

[DgRp_08]

ご教示いただいたサンプルをごっそり真似て動作確認したところ、バッチリ実現したいことが100％実現できました。
大変助かりました。ありがとうございました。