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

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

ただいまの
回答率

90.50%

  • ASP.NET

    529questions

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

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

受付中

回答 1

投稿 編集

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

Hisaro

score 1

前提・実現したいこと

最初に開いた時に下の方にボタン一覧を表示し、テキストボックスに入れた値を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を入れて見ましたがすべて初期値に戻ってしまいました。

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2017/03/07 15:38

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

    キャンセル

  • Hisaro

    2017/03/07 16:18

    確認ありがとうございます。不要部分を削除して更新致しました!

    キャンセル

  • SurferOnWww

    2017/03/07 17:12

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

    キャンセル

回答 1

0

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • ASP.NET

    529questions

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