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

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

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

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

Q&A

1回答

9048閲覧

【ASP.NET】POSTした時にページを更新したい。

Hisaro

総合スコア7

ASP.NET

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

0グッド

0クリップ

投稿2017/03/07 06:19

編集2017/03/07 07:17

###前提・実現したいこと
最初に開いた時に下の方にボタン一覧を表示し、テキストボックスに入れた値をADDボタンで追加、POST送信して、Index.cshtmlのボタンを増やそうとしております。

###発生している問題・エラーメッセージ
デバッグするとIndex.cshtmlまで動いているのですが、画面が更新されていないような状態です。

特になし

###該当のソースコード

【Index.cshtml】 <form name="frmEtc"> <input type="text" name="etchour" id="etchour" value="00" maxlength="2" style="width:80px">: <input type="text" name="etcmin" id="etcmin" value="15" maxlength="2" style="width:80px"> </form> <input type="text" name="outoftask_name" id="otherTitle" value="その他"> <button type="button" class="btn-success" onclick="add_bottoninput_set()">ADD</button> <div class="row"> <!-- ボタン作成される予定 --> <div class="col-md-9" id="btnTasks"></div> </div> <script> // JSONデータを取得 var activities = '@Html.Raw(ViewBag.Json)'; var data = JSON.parse(activities); // ボタンを作成 var html = ""; for (var i = 0; i < data.Others.length; i++) { html += "<button type='button' class='btn btn-info btn-block' style='text-align:left;'>" + data.Others[i].title + "</button><br/>"; } var btnTasks = document.getElementById("btnTasks"); btnTasks.innerHTML = html; // ADDボタン処理 function add_bottoninput_set() { // 初期値 var etchour = 0; var etcmin = 0; etchour = document.frmEtc.etchour.value; etcmin = document.frmEtc.etcmin.value; var length = Object.keys(data.Others).length; var maxIndex = parseInt(length); var delobj = { "title": "", "ActivityHours": "0", "ActivityMinutes": "0", "ActivitySeconds": "0" }; data.Others[maxIndex] = delobj; data.Others[maxIndex].title = document.getElementById("otherTitle").value; data.Others[maxIndex].ActivityHours = etchour; data.Others[maxIndex].ActivityMinutes = etcmin; var req = new XMLHttpRequest(); req.open("POST", "/Home/Index", true); req.setRequestHeader('Content-Type', 'application/json; charset=utf-8'); req.setRequestHeader('Content-Length', data.length); req.send("{'updateData':'" + JSON.stringify(data) + "'}"); return false } </script> 【HomeContoroller】 namespace WebTest02.Controllers { public class HomeController : Controller { public ActionResult Index() { ViewBag.Title = "テストアプリ"; mdlTEST activities = new mdlTEST(); activities.Others = new List<mdlTEST.TestModel>(); //TODO Azure Storage or SQLから取得 activities.Others.Add(new mdlTEST.TestModel() { title = "その他01" }); activities.Others.Add(new mdlTEST.TestModel() { title = "その他02" }); ViewBag.Json = JsonConvert.SerializeObject(activities); return View(activities); } [HttpPost] public ActionResult Index(string updateData) { mdlTEST activities = new mdlTEST(); activities = JsonConvert.DeserializeObject<mdlTEST>(updateData); ViewBag.Json = JsonConvert.SerializeObject(activities); ModelState.Clear(); return View(activities); } } } 【mdlTEST】 namespace WebTest02.Models { public class mdlTEST { public List<TestModel> Others { get; set; } public class TestModel { public string TaskId { get; set; } public string title { get; set; } public string dueDateTime { get; set; } public string ActivityHours { get; set; } public string ActivityMinutes { get; set; } public string ActivitySeconds { get; set; } public bool IsReported { get; set; } } } }

###試したこと
再描画的なことができればいけるかなと思い、reloadを入れて見ましたがすべて初期値に戻ってしまいました。

原因がわかる方がいらっしゃったら御教授お願い致します!!

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2017/03/07 06:38

コードを問題を再現できる必要最低限に削ることはできませんか? 
Hisaro

2017/03/07 07:18

確認ありがとうございます。不要部分を削除して更新致しました!
退会済みユーザー

退会済みユーザー

2017/03/07 08:12

ajax を使っているようですが、応答を処理するコードが見当たりません。根本的なところで考え違いをしているような気がします。
guest

回答1

0

テキストボックスに入れた値をADDボタンで追加、POST送信して、Index.cshtmlのボタンを増やそうとしております。

ボタンを増やすにあたり、サーバー側での何らかの処置が必要なのでしょうか? でなけば、クライアント側だけで JavaScript でボタンを増やすことができるはずですが。

そうしてないということは、サーバー側で何らかの処置が必要なのであろうと想像していますが、それはどういう処置ですか? 具体的に書いていただけませんか? (コードを読めばわかるとは言わないでくださいね)

サーバー側での処置の結果を受け取ってボタンを追加するという場合、ajax を使うなら、要求をかけたら、その応答を JavaScript で受け取って処置して、JavaScript でボタンを追加する必要がありまます。

質問者さんのコードを見ると、そのような JavaScript のコードは見当たりません。

POST 要求すると、View 全体が再描画されると期待されているのでしょうか? POST して View を再描画するためには、input type="submit" のようなボタンクリックで POST 要求をかける必要があるのですが。

そのあたりを再検討してはいかがですか?

投稿2017/03/07 10:19

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問