Remplir dynamiquement un formulaire en fonction de l'entrée de l'utilisateur dans ASP.Net MVC

Question

Ma question est similaire à here d'Engram, mais ma question va un peu plus loin. La façon dont je l'intention de travailler est que j'ai une zone de texte demandant combien d'entrées un utilisateur va faire. Après avoir saisi le nombre, j'ai besoin de créer autant de boîtes de texte pour permettre les entrées (et ensuite répéter le même processus avec ces boîtes de texte, mais bébé commence d'abord ...) J'ai essayé de récupérer les clés sur le poteau, mais ça revient la boîte de texte initiale demandant le nombre d'entrées. J'essaie toujours d'avoir une compréhension de MVC et les tutoriels/vidéos jusqu'ici ne plongent pas encore profondément dedans. Là encore, je sais que c'est probablement quelque chose que je pourrais gérer avec JQuery, mais je serais toujours coincé dans la même situation.

C'est le contrôleur que je utilise:

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

Et ceci est mon 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"]) %> 

Y at-il quelque chose que je donne sur, ne pas comprendre, ou devrais-je quitter alors que je suis parce que j'ai l'impression de ne jamais l'avoir?

Merci d'avance pour toute aide - j'essaie juste d'apprendre le plus possible.

Answer 1

Je décomposerais ceci par étapes, vous devrez ajouter une vue "Enregistrer" quelque part selon ce que vous voulez.

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> 

Et puis dans votre quelque chose comme contrôleur ceci:

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

Le problème est que votre </form> balise de fin doit venir à la fin de votre point de vue.

Essayez ce point de vue modifié:

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

je recommande l'approche de Scott dans la mesure où les meilleures pratiques. Cette réponse consiste à faire fonctionner votre scénario exact.

Answer 3

J'envisagerais d'ajouter les zones de texte côté client via javascript plutôt que de les renvoyer au serveur pour que le formulaire soit redessiné, en supposant que vous puissiez utiliser javascript comme condition d'utilisation de l'application. Si non, alors l'approche de Scott devrait fonctionner. De préférence, la méthode Save prendrait probablement un paramètre FormCollection plutôt que de traiter directement l'objet Request.

La solution javascript serait d'avoir une seule zone de texte et un bouton pour en ajouter un autre. L'utilisateur peut continuer à ajouter des zones de texte jusqu'à ce qu'elles en aient assez.

Answer 4

Merci pour l'aide les gars. J'ai réalisé à 5 ce matin que mon problème est que le formulaire n'incluait pas les nouvelles textboxes/j'avais besoin d'un autre formulaire. Je vais devoir sérieusement regarder Javascript et modifier réellement le DOM car il vaudrait mieux le garder côté client.

Merci beaucoup.