Popolamento di un modulo basato dinamicamente sull'input dell'utente in ASP.Net MVC

Question

La mia domanda è simile a qui , ma la mia domanda va un po 'oltre. Il modo in cui intendo che funzioni è che ho una casella di testo che chiede quante voci un utente farà. Dopo aver inserito il numero, devo creare molte più caselle di testo per consentire le voci (e quindi ripetere lo stesso processo con quelle caselle di testo, ma prima i piccoli passi ...) Ho provato a raccogliere le chiavi sul post, ma restituisce solo la casella di testo iniziale che richiede il numero di voci. Sto ancora cercando di afferrare MVC e i tutorial / video fino ad ora non approfondiscono ancora. Inoltre, so che questo è probabilmente qualcosa che potrei gestire usando JQuery, ma sarei ancora bloccato nella stessa situazione.

Questo è il controller che sto 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");
    }

E questo è il mio 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"]) %>

C'è qualcosa che sto trascurando, non comprendo, o dovrei smettere mentre ci sono perché sembra che non lo capirò mai?

Grazie in anticipo per qualsiasi aiuto: sto solo cercando di imparare il più possibile.

Answer 1

Lo spezzerei per gradi, dovresti aggiungere un " Salva " visualizzare un posto a seconda di ciò che si desidera.

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>

E poi nel tuo controller qualcosa del genere:

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

Vorrei prendere in considerazione l'aggiunta delle caselle di testo sul lato client tramite javascript piuttosto che postare di nuovo sul server per avere il modulo ridisegnato, supponendo che tu possa vivere con javascript come requisito per l'utilizzo dell'applicazione. In caso contrario, l'approccio di @ Scott dovrebbe funzionare. Come preferenza preferirei che il metodo Save prendesse un parametro FormCollection piuttosto che occuparmi direttamente dell'oggetto Request.

La soluzione javascript sarebbe quella di avere una singola casella di testo e un pulsante per aggiungerne un'altra. L'utente può continuare ad aggiungere caselle di testo finché non ne ha abbastanza.

Answer 3

Il problema è che il tuo </form> tag finale deve arrivare alla fine della tua vista.

Prova questa vista modificata:

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

Consiglierei l'approccio di Scott per quanto riguarda le migliori pratiche. Questa risposta riguarda il funzionamento dello scenario esatto.

Answer 4

Grazie per l'aiuto ragazzi. Mi sono reso conto alle 5 di questa mattina che il mio problema era che il modulo non includeva le nuove caselle di testo / avevo bisogno di un altro modulo. Dovrò esaminare seriamente Javascript e in realtà modificare il DOM in quanto sarebbe meglio mantenerlo lato client.

Grazie mille.