Rellenar un formulario dinámicamente en función de la entrada del usuario en ASP.Net MVC

Question

Mi pregunta es similar a aquí , pero mi pregunta va un poco más allá. La forma en que tengo la intención de que funcione es que tengo un cuadro de texto que pregunta cuántas entradas va a hacer un usuario. Después de ingresar el número, necesito crear esa cantidad de cuadros de texto más para permitir entradas (y luego repetir el mismo proceso con esos cuadros de texto, pero primero los primeros pasos ...) Intenté recolectar las claves en la publicación, pero solo devuelve el cuadro de texto inicial que solicita la cantidad de entradas. Todavía estoy tratando de comprender MVC y los tutoriales / videos hasta ahora no profundizan en esto todavía. Por otra parte, sé que esto es probablemente algo que podría manejar usando JQuery, pero aún estaría atrapado en la misma situación.

Este es el controlador que estoy usando:

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

Y este es mi 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"]) %>

¿Hay algo que estoy pasando por alto, que no entiendo, o debería dejarlo mientras estoy en eso porque parece que nunca lo entenderé?

Gracias de antemano por cualquier ayuda, solo estoy tratando de aprender lo más que puedo.

Answer 1

Yo dividiría esto en etapas, necesitarás agregar un " Guardar " ver en algún lugar dependiendo de lo que quieras.

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>

Y luego en su controlador algo como esto:

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

Consideraría agregar los cuadros de texto del lado del cliente a través de JavaScript en lugar de volver a publicarlos en el servidor para volver a dibujar el formulario, suponiendo que pueda vivir con JavaScript como requisito para usar la aplicación. Si no, entonces el enfoque de @ Scott debería funcionar. Como cuestión de preferencia, probablemente haría que el método Save tome un parámetro FormCollection en lugar de tratar directamente con el objeto Request.

La solución de JavaScript sería tener un solo cuadro de texto y un botón para agregar otro. El usuario podría continuar agregando cuadros de texto hasta que tenga suficiente.

Answer 3

El problema es que su </form> etiqueta final debe aparecer al final de su vista.

Pruebe esta vista modificada:

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

Recomendaría el enfoque de Scott en cuanto a las mejores prácticas. Esta respuesta se trata de hacer que su escenario exacto funcione.

Answer 4

Gracias por la ayuda chicos. A las 5 de la mañana me di cuenta de que mi problema es que el formulario no incluía los nuevos cuadros de texto / necesitaba otro formulario. Tendré que analizar seriamente Javascript y modificar el DOM, ya que sería mejor mantenerlo del lado del cliente.

Muchas gracias.