ASP.Net MVCでのユーザー入力に基づいてフォームに動的に入力する

Question

私の質問は、Engramのこちらですが、私の質問はもう少し先に進みます。私がそれを機能させるつもりは、ユーザーがいくつのエントリを作成するかを尋ねるテキストボックスがあることです。彼らが番号を入力した後、エントリを許可するためにさらに多くのテキストボックスを作成する必要があります（そしてそれらのテキストボックスで同じプロセスを繰り返しますが、赤ちゃんの手順が最初です...）私は投稿のキーを収集しようとしましたが、戻りますエントリの数を尋ねる最初のテキストボックス。私はまだMVCを把握しようとしていますが、これまでのところチュートリアル/ビデオではこれについて深く掘り下げていません。繰り返しますが、これはおそらくJQueryを使用して処理できるものであることがわかりますが、それでも同じ状況に陥ります。

これは私が使用しているコントローラーです：

[AcceptVerbsAttribute("POST")]
    public ActionResult Create(int tbxNumberOfExercises)
    {
        ViewData["number"] = tbxNumberOfExercises;
        foreach (var key in Request.Form.Keys)
        {
            string keyString = key.ToString();
            if (keyString.StartsWith("tbox_exercise", StringComparison.OrdinalIgnoreCase))
            {
                string recNum = keyString.Substring(13, keyString.Length - 13);
                string approvedKey = Request.Form["tbox_exercise" + recNum];
                int number;
                int.TryParse(approvedKey, out number);
            }
        }
        return View("Create");
    }

これは私のaspxです：

<form action="/CreateWorkout/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
</form>
<% if (ViewData["number"] != null)%>
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null)
   {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++)
       {%>
          <br />
          <br />
          <%= Html.TextBox("tbox_exercise" + i) %>
    <% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>

見逃しているもの、理解していないものがありますか？

ご協力いただきありがとうございます-できるだけ多くのことを学ぼうとしています。

Answer 1

これを段階的に分割します。<！> quot; Save <！> quot;を追加する必要があります。必要に応じてどこかで表示します。

スコット

<form action="/Demo01/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
</form>
<% if (ViewData["number"] != null) {%>
<form action="/Demo01/Save" method="post">
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null) {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++) {%>
<br />
<br />
<%= Html.TextBox("tbox_exercise" + i) %>
<% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>
<input type="submit" value="Save Exercises" />
<% } %>
</form>

そしてコントローラーで次のようにします：

public class Demo01Controller : Controller {
    public ActionResult Create() {
        return View();
    }

    [AcceptVerbsAttribute("POST")]
    public ActionResult Create(int tbxNumberOfExercises) {
        ViewData["number"] = tbxNumberOfExercises;
        return View("Create");
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Save() {
        foreach (var key in Request.Form.Keys) {
            string keyString = key.ToString();
            if (keyString.StartsWith("tbox_exercise", StringComparison.OrdinalIgnoreCase)) {
                string recNum = keyString.Substring(13, keyString.Length - 13);
                string approvedKey = Request.Form["tbox_exercise" + recNum];
                int number;
                int.TryParse(approvedKey, out number);
            }
        }
        return View(); // return/redirect to wherever you want
    }
}

Answer 2

アプリケーションを使用するための要件としてjavascriptを使用できる場合は、サーバーに投稿してフォームを再描画するのではなく、javascriptを介してテキストボックスをクライアント側に追加することを検討します。そうでない場合は、@ Scottのアプローチが機能するはずです。好みの問題として、おそらくRequestメソッドを直接処理するのではなく、SaveメソッドにFormCollectionパラメーターを設定させるでしょう。

javascriptソリューションは、1つのテキストボックスと別のボタンを追加するボタンを持つことです。ユーザーは、十分な数になるまでテキストボックスを追加し続けることができます。

Answer 3

問題は、</form>終了タグがビューの最後に来る必要があることです。

この変更されたビューを試してください：

<form action="/CreateWorkout/Create" method="post">
Number of Exercises:
<%= Html.TextBox("tbxNumberOfExercises") %>
<br />
<br />
<input type="submit" value="Set Exercise Number" />
<% if (ViewData["number"] != null)%>
There are this many:<%=Html.Encode(ViewData["number"])%>
<br />
and this line should show up
<% if (ViewData["number"] != null)
   {
       int max = (int)ViewData["number"];

       for (int i = 0; i < max; i++)
       {%>
          <br />
          <br />
          <%= Html.TextBox("tbox_exercise" + i) %>
    <% }
   } %>
<% if (ViewData["s"] != null) %>
<%=Html.Encode(ViewData["s"]) %>
</form>

ベストプラクティスに関しては、スコットのアプローチをお勧めします。この答えは、正確なシナリオを機能させることです。

Answer 4

助けてくれてありがとう。今朝5時に、フォームに新しいテキストボックスが含まれていないことが問題であることに気付きました。別のフォームが必要でした。 Javascriptを真剣に検討し、実際にDOMを変更する必要があります。これは、クライアント側に保持する方が良いためです。

どうもありがとう。