創建在運行時增長的動態表單

我正在MVC應用程序內部的asp.net核心中工作。我正在使用基於模型創建視圖和控制器的腳手架功能。以下是我正在使用的模型：創建在運行時增長的動態表單

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

通過視圖向用戶顯示的窗體僅顯示名稱的字段。我希望表單能夠顯示列表項目的字段，然後如果用戶想要添加另一個列表項目，他們可以點擊按鈕添加另一個字段來執行此操作。他們在運行時決定他們想要添加多少購物清單項目。

這裏是剃刀CSHTML形式我使用：

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

是否有一個簡單的方法來做到這一點？我不想硬編碼一個數字。

來源

2017-10-20 conterio

使用jQuery將輸入元素添加到DOM。 – Shyju

我得到的問題是，當我提交表單時，新添加的元素不會與提交一起發送。 @Shyju – conterio

它只要我們的名字與模型綁定器正在尋找的內容相匹配就可以實現。分享你試過的代碼 – Shyju

如果你想允許用戶在你需要使用JavaScript來更新客戶端添加一個新的表單元素DOM與你想添加的新元素。要列出現有的項目，您可以使用編輯器模板。混合這兩個將給你一個動態的形式。以下是一個基本的實現。

要使用編輯器模板，我們需要爲屬性類型創建一個編輯器模板。我不會那樣做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>(); 
    } 
}

現在，~/Views/YourControllerName或~/Views/Shared/下創建一個名爲EditorTemplates目錄，並創建一個名爲Item.cshtml視圖裏面會有下面的代碼

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

現在，在您的GET控制器，創建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 
}

如果你想預加載一些現有的項目（編輯畫面等），所有你需要做的就是加載listItems屬性和編輯模板將渲染輸入元素與正確名稱每個項目的護理屬性值。

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

來源

2017-10-20 17:52:52 Shyju

首先這是你必須有一個公共存取你的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來訪問模型變量。但有一點你需要注意的是，如果你的模型是在一個子文件夾中，你需要在其中進行說明。

下面是一個例子：@model BethanysPieShop.Models.ShoppingCart。

這裏BethanysPieShop是我的項目名稱，型號是我的文件夾中的ShoppingCart類是英寸

來源

2017-10-20 17:30:37 Jared

創建在運行時增長的動態表單

回答

相關問題