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

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

新規登録して質問してみよう
ただいま回答率
85.50%
C#

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

JavaScript

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

jQuery

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

Ajax

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

ASP.NET MVC Framework

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

Q&A

解決済

2回答

2322閲覧

非同期更新でSubmit

DgRp_08

総合スコア56

C#

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

JavaScript

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

jQuery

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

Ajax

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

ASP.NET MVC Framework

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

0グッド

0クリップ

投稿2018/07/24 11:06

編集2018/07/24 13:21

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

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

html

1<!-- 全体 --> 2<div id="all"> 3 <div id="comment"> 4 @Html.Partial("_Comment", model) 5 </div> 6</div> 7 8 9<!--"_Comment.cshtml"--> 10<form id="myform"> 11 <textarea id="commentValue" name="comment"> 12 </textarea> 13 <input id="save-button" type="submit" value="保存"> 14</form>

JavaScript

1$('#myform').submit(function (event) { 2 event.preventDefault(); 3 4 var url = "@Url.Action("Save", "Home")"; 5 var $form = $(this); 6 var $button = $form.find('submit'); 7 8    //textareaの入力内容取得 9 var commentData = $("#commentValue").val(); 10 11 $.ajax({ 12 url: url, 13 type: 'POST', 14 dataType: "html", // 適切か不明 15 data: {"comment": commentData},// 適切か不明 16 cache: false, 17 beforeSend: function(xhr, settings) {// 適切か不明 18 $button.attr('disabled', true);// 適切か不明 19 }, 20 }).done(function (data) { 21 $form[0].reset();// 適切か不明 22 $("#comment").html(data);// 適切か不明 23 $button.attr('disabled', false);// 適切か不明 24 alert('保存しました。'); 25 }).fail(function (jqXHR, textStatus, errorThrown) { 26      //他必要な記述がいまいちわからない 27 alert('保存処理に失敗しました。'); 28 }); 29 })

C#

1// HomeController 2[HttpPost] 3public ActionResult Save() 4{ 5 var comment = Request.Form["comment"]; 6 DB更新メソッド(comment); 7 8 var model = 最新データ取得メソッド; 9 return PartialView("_Comment", model); 10} 11```  12 13わからない点が多すぎて恐縮ですが、ご教授宜しくお願い致します 14 15追記 以下開発環境です。 16Windows7 17Visual Studio Express 2015 for web 18.NET Framework 4.5.2 19MVC:ver.5.2.3.0 20主にクライアント側のスクリプトの記述の問題で、開発環境の記述は必要性は低いと思って省略してしまいました。 21申し訳ありません。 22 23AjaxHelper(Ajax.BeginForm, Ajax.ActionLink) などを使わない理由は特に無く、強いて言えば参考にしたソースを見よう見まねした時にAjaxHelperが使われていなかったことと、使い慣れていないことが理由です。razorも使ったことはありますが、使い慣れておらずよく理解できていません。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/07/24 12:14

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

退会済みユーザー

2018/07/24 12:15

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

退会済みユーザー

2018/07/24 12:26

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

退会済みユーザー

2018/07/24 13:01

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

回答2

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 05:57

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

DgRp_08

2018/07/25 11:56

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

退会済みユーザー

2018/07/25 13:10

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

0

ベストアンサー

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

sample

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

javascript

1$(function(){ 2 $('#myform').on('submit',function(e) { 3 e.preventDefault(); 4 var url=$(this).attr('action'); 5 var sb = $(this).find(':submit'); 6 var ta = $(this).find('textarea'); 7 var data=new FormData($(this).get(0)); 8 sb.prop('disabled',true); 9 $.ajax({ 10 url: url, 11 type: 'post', 12 data: data, 13 processData: false, 14 contentType: false, 15 }).done(function (data) { 16 console.log(data);//戻り値があるなら表示 17 sb.prop('disabled',false); 18 ta.val(''); 19 console.log('保存しました。'); 20 }).fail(function (xhr,err) { 21 console.log(err); 22 }); 23 }); 24});

HTML

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

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

投稿2018/07/24 11:25

編集2018/07/24 12:05
yambejp

総合スコア114572

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

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

DgRp_08

2018/07/24 11:30

ご回答有り難うございます! >submitしたときにsubmitボタンのdisableをtureにして >ajaxの処理が正常終了するdoneの中で >disabledをfalseにもどしてやってください 以下部分の記述では誤りでしょうか? ---------------------- beforeSend: function(xhr, settings) {// 適切か不明 $button.attr('disabled', true);// 適切か不明 }, ---------------------- }).done(function (data) { $button.attr('disabled', false);// 適切か不明 ----------------------
yambejp

2018/07/24 12:05 編集

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

2018/07/24 13:12 編集

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

2018/07/25 11:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問