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

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

ただいまの
回答率

90.34%

  • JavaScript

    17529questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    7704questions

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

  • jQuery

    7109questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1154questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • ASP.NET MVC Framework

    69questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

非同期更新でSubmit

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 396

DgRp_08

score 46

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

①1回のsubmitボタン押下でsubmit処理が勝手に2回走らないようにする
②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も使ったことはありますが、使い慣れておらずよく理解できていません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2018/07/24 21:14

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

    キャンセル

  • SurferOnWww

    2018/07/24 21:15

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

    キャンセル

  • SurferOnWww

    2018/07/24 21:26

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

    キャンセル

  • SurferOnWww

    2018/07/24 22:01

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

    キャンセル

回答 2

checkベストアンサー

0

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のクリアと、必須条件をいれました

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 20:30

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

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

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

    キャンセル

  • 2018/07/24 20:53 編集

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

    キャンセル

  • 2018/07/24 21:38 編集

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

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

    キャンセル

  • 2018/07/25 20:53

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/25 20:56

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

    キャンセル

  • 2018/07/25 22:10

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    17529questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • C#

    7704questions

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

  • jQuery

    7109questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1154questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • ASP.NET MVC Framework

    69questions

    ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。