Filling a form dynamically based on user input in ASP.Net MVC

Question

My question is similar to Engram here , but my question goes a bit further. The way I intend to work is a text box asking how many records the user will make. After entering the number, I need to create many more text fields to allow entries (and then repeat the same process with these text fields, but first the steps for the child ...) I tried to collect the keys in the message, but it only returns in the initial The text field asks for the number of records. I'm still trying to understand MVC, and the tutorials / videos still haven't delved into that. Again, I know that this is probably something I could use with jQuery, but I would still be stuck in the same situation.

This is the controller I use:

[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");
    }

And this is my 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"]) %>

Is there something that I forget without understanding, or should I leave while I am on it, because it seems that I will never get it?

Thanks in advance for any help - I'm just trying to learn as much as possible.

Answer 1

I would break it in stages, you would need to add “Save” anywhere, depending on what you want.

Scott

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

And then in your controller something like this:

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 . , , , , Save FormCollection, Request.

javascript . , .

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

Thanks for helping the guys. This morning, I realized that my problem was that the form did not include new text fields / I needed a different form. I will have to seriously look into Javascript and actually modify the DOM, as it would be better to keep it on the client side.

Many thanks.