実行時に増加する動的フォームを作成

Question

私はMVCアプリケーション内でasp.netコアで作業しています。私はモデルに基づいてビューとコントローラを作成するスキャフォールディング機能を使用しています。私が使用しているモデルは以下の通りです：

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

ビューを介してユーザに表示するフォームは、「名前」のフィールドのみを表示します。私は、フォームがリストアイテムのフィールドを表示できるようにしたいと思います。ユーザーが別のリストアイテムを追加したい場合、ボタンを押して別のフィールドを追加することができます。実行時に追加するショッピングリスト項目の数を決定します。

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

これを行う簡単な方法があります：ここで

は、私が使用しているかみそりCSHTMLフォームのですか？私は数字をハードコードする必要はありません。

Answer 1

ユーザーがクライアント側で新しいフォーム要素を追加できるようにしたい場合は、更新するために、JavaScriptを使用する必要がありますDOMに追加する新しい要素を追加します。既存の項目を一覧表示するには、エディタテンプレートを使用します。これらの2つを混在させると、動的なフォームが得られます。以下は基本的な実装です。

エディタテンプレートを使用するには、プロパティタイプのエディタテンプレートを作成する必要があります。私はstringタイプの方が一般的なものに似ています。リスト項目を表すカスタムクラスを作成します。今

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>(); 
    } 
} 

、あなたのGETコントローラで今すぐ下記のコード

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

を持つことになりますItem.cshtmlと呼ばれるビューを~/Views/YourControllerNameか~/Views/Shared/下EditorTemplatesと呼ばれるディレクトリを作成し、作成し、ShoppingListのオブジェクトを作成し、ビューに送信します。

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

は今メインビューで、あなたがしなければならないのは、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> 

を呼び出しているマークアップは、新しいアイテムを追加するためのアンカータグを持っています。ユーザーがそれをクリックしたときに、我々は形式でname属性の値で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); 
    }); 

}); 

を新しい入力要素を追加する必要があり、ユーザーがクリックしたときだから、DOMに正しい名前で新しい入力要素を追加したときに送信ボタンをクリックすると、入力に対する正しい名前属性値があるのでモデルバインディングが正常に機能します。

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

あなたが（編集画面などのために）いくつかの既存の項目をプリロードしたい場合は、あなたがしなければならないのは、リストアイテムプロパティと正しい名前を持つ各項目の入力要素をレンダリングするの世話をするエディタテンプレートをロードされます属性値。

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

Answer 2

まず、ShoppingListクラスのパブリックアクセサリが必要です。

したがって、public class ShoppingList。

次は、あなたのビューには以下の変更が必要です。

@model ShoppingList 

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

だから、上記のコードはおおよそあなたが探しているコードです。 Razorでは、ビューの上部にある@modelを使用してモデル変数にアクセスできます。しかし、注意すべき点の1つは、モデルがサブフォルダに入っていれば、そのサブフォルダに入れる必要があることです。

ここに例があります：@model BethanysPieShop.Models.ShoppingCartです。ここで

はBethanysPieShopは、モデルがShoppingCartのクラスはである私のフォルダで、私のプロジェクト名です。