Création de formulaires dynamiques qui se développent au moment de l'exécution

Question

Je travaille sur le noyau asp.net dans une application MVC. J'utilise la fonction d'échafaudage qui crée les vues et le contrôleur basé sur un modèle. Voici le modèle que j'utilise:

class ShoppingList 
{ 
    public int ShoppingListId { get; set; } 
    public string Name { get; set; } 
    public List<string> ListItems { get; set; }    
} 

Le formulaire qui affiche à l'utilisateur via l'affichage affiche uniquement le champ Nom. Je voudrais que le formulaire soit en mesure d'afficher un champ pour un élément de liste, puis si l'utilisateur souhaite ajouter un autre élément de liste, il peut appuyer sur un bouton pour ajouter un autre champ pour le faire. Au moment de l'exécution, ils décident du nombre d'éléments de liste d'achats qu'ils souhaitent ajouter.

est ici la forme cshtml de rasoir J'utilise:

<form asp-action="Create"> 
    <div asp-validation-summary="ModelOnly" class="text-danger"></div> 
     <div class="form-group"> 
      <label asp-for="Name" class="control-label"></label> 
      <input asp-for="Name" class="form-control" /> 
      <span asp-validation-for="Name" class="text-danger"></span> 
     </div> 
    <div class="form-group"> 
    <input type="submit" value="Create" class="btn btn-default" /> 
    </div> 
</form> 

est-il un moyen facile de le faire? Je ne veux pas avoir à coder en dur un nombre.

Answer 1

Si vous voulez permettre à l'utilisateur d'ajouter un nouvel élément de formulaire sur le côté client, vous devez utiliser javascript pour mettre à jour le DOM avec le nouvel élément que vous voulez ajouter. Pour lister les éléments existants, vous pouvez utiliser des modèles d'éditeur. Mélanger ces 2 vous donnera une forme dynamique. Ce qui suit est une implémentation de base. Pour utiliser les modèles d'éditeur, nous devons créer un modèle d'éditeur pour le type de propriété. Je ne ferais pas cela pour le type string qui ressemble plus à un type générique. Je créerais une classe personnalisée pour représenter l'élément de liste.

public class Item 
{ 
    public string Name { set; get; } 
} 
public class ShoppingList 
{ 
    public int ShoppingListId { get; set; } 
    public string Name { get; set; } 
    public List<Item> ListItems { get; set; } 

    public ShoppingList() 
    { 
     this.ListItems=new List<Item>(); 
    } 
} 

Maintenant, créez un répertoire appelé EditorTemplates sous ~/Views/YourControllerName ou ~/Views/Shared/ et créer une vue appelée Item.cshtml qui aura le code ci-dessous

@model YourNameSpaceHere.Item 
<input type="text" asp-for="Name" class="items" /> 

maintenant dans votre contrôleur GET, créez un objet de la ShoppingList et envoyer à la vue.

public IActionResult ShoppingList() 
{ 
    var vm = new ShoppingList() { }; 
    return View(vm); 
} 

maintenant dans la vue principale, Tout ce que vous avez à faire est d'appeler la méthode EditorFor

@model YourNamespace.ShoppingList 
<form asp-action="ShoppingList" method="post"> 
    <input asp-for="Name" class="form-control" /> 
    <div class="form-group" id="item-list"> 
     <a href="#" id="add">Add</a> 
     @Html.EditorFor(f => f.ListItems) 
    </div> 
    <input type="submit" value="Create" class="btn btn-default" /> 
</form> 

Le balisage a une balise d'ancrage pour ajouter de nouveaux éléments.Ainsi, lorsque l'utilisateur clique dessus, il faut ajouter un nouvel élément d'entrée avec la valeur d'attribut name dans le format ListItems[indexValue].Name

$(function() { 

    $("#add").click(function (e) { 
     e.preventDefault(); 
     var i = $(".items").length; 
     var n = '<input type="text" class="items" name="ListItems[' + i + '].Name" />'; 
     $("#item-list").append(n); 
    }); 

}); 

Ainsi, lorsque l'utilisateur clique, il ajoute un nouvel élément d'entrée avec le nom correct du DOM et quand Si vous cliquez sur la liaison du modèle de bouton d'envoi, cela fonctionnera correctement car nous avons la valeur d'attribut de nom correcte pour les entrées.

[HttpPost] 
public IActionResult ShoppingList(ShoppingList model) 
{ 
    //check model.ListItems 
    // to do : return something 
} 

Si vous souhaitez précharger des éléments existants (pour l'écran d'édition, etc.), Tout ce que vous devez faire est de charger la ListItems propriété et le modèle de l'éditeur prendra soin de rendre les éléments d'entrée pour chaque élément avec le nom correct valeur d'attribut.

public IActionResult ShoppingList() 
{ 
    var vm = new ShoppingList(); 
    vm.ListItems = new List<Item>() { new Item { Name = "apple" } } 
    return View(vm); 
} 

Answer 2

D'abord, vous devez avoir un accesseur public à votre classe ShoppingList.

Ainsi, public class ShoppingList.

Ensuite, vous aurez besoin des modifications suivantes.

@model ShoppingList 

<h1>@Model.Name</h1> 
<h2>@Model.ShoppingListId</h2> 
foreach(var item in Model.ListItems) 
{ 
    <h3>@item</h3> 
} 

Donc, le code ci-dessus est à peu près ce que vous cherchez. Dans Razor, vous pouvez accéder aux variables des modèles en utilisant le @model en haut de la vue. Mais une chose que vous devez noter est que si votre modèle est dans un sous-dossier, vous devrez ajouter quelque chose à cela.

Voici un exemple: @model BethanysPieShop.Models.ShoppingCart.

Ici BethanysPieShop est mon nom de projet, modèles est mon dossier la classe ShoppingCart est.