我一直在網上搜索這個特定問題的答案，但似乎找不到。
我目前正在使用 Razor 頁面創建一個表單，但無法找到如何創建一個表單輸入，該表單輸入能夠為表單中的一個專案采用多個值。下面我將發布一個快速示例來說明我的意思。
當前問題：當我以編程方式添加另一個輸入時，它最多只會添加 2 個并且不會發送值
模型：
public class FormInput
{
public List<Address> Addresses { get; set; }
public List<Category> Categories { get; set; }
}
剃須刀頁面：
public class FormPage : PageModel
{
[BindProperty] public FormInput _Input { get; set; }
}
HTML頁面：
<form>
<ul class="Category-Container">
<li>
<input asp-for="_Input.Addresses" type="text" />
<button type="button" onclick="this.AddCategory">
Add New Address
</button>
</li>
</ul>
<div>
<input asp-for="_Input.Categories" type="text" />
<button type="button" onclick="this.AddNewInput">
Add New Category
</button>
</div>
</form>
Javascript：
var categoryContainer = document.getElementById("Category-Container");
function AddCategory() {
var input = document.createElement("input");
input.classList.add("w-100");
input.name = "BusinessCategory";
var inputCol = document.createElement("div");
inputCol.classList.add("col-8");
inputCol.appendChild(input);
var btn = document.createElement("button");
btn.classList.add("btn");
btn.classList.add("btn-primary");
btn.innerText = "Add New Category";
var btnCol = document.createElement("div");
btnCol.classList.add("col");
btnCol.appendChild(btn);
var row = document.createElement("li");
row.classList.add("row");
var part1 = row.appendChild(inputCol);
var part2 = part1.appendChild(btnCol);
categoryContainer.appendChild(part2);
}
javascript 函式中有一點斷開，但您可以假設 HTML 示例中的 Button 和 Input 也在列內，我認為這不會產生很大的不同，但請告訴我它是否是一個
uj5u.com熱心網友回復：
標簽助手不能將復雜的模型型別資料傳遞給后端，它只允許簡單型別。也就是說，你需要在asp-for.
然后，如果要獲取串列模型，則需要特定的串列索引，例如：_Input.Categories[0].PropertyName。
不確定您的整體觀點是什么，這是一個關于如何將串列模型傳遞給后端的簡單演示：
模型：
public class FormInput
{
public List<Address> Addresses { get; set; }
public List<Category> Categories { get; set; }
}
public class Address
{
public string Name { get; set; }
}
public class Category
{
public string BusinessCategory { get; set; }
}
看法：
@page
@model IndexModel
<form method="post">
<ul id="Category-Container">
<li>
<input asp-for="_Input.Categories[0].BusinessCategory" type="text" />
<button type="button" onclick="AddCategory()">
Add New Address
</button>
</li>
</ul>
<div>
<input asp-for="_Input.Addresses[0].Name" type="text" />
<button type="button" onclick="this.AddNewInput">
Add New Category
</button>
</div>
<input type="submit" value="Post"/>
</form>
JS：
@section Scripts
{
<script>
var count = 1; //add count...
var categoryContainer = document.getElementById("Category-Container");
function AddCategory() {
var input = document.createElement("input");
input.classList.add("w-100");
//change the name here.....
input.name = "_Input.Categories[" count "].BusinessCategory";
var inputCol = document.createElement("div");
inputCol.classList.add("col-8");
inputCol.appendChild(input);
var btn = document.createElement("button");
btn.classList.add("btn");
btn.classList.add("btn-primary");
btn.innerText = "Add New Category";
var btnCol = document.createElement("div");
btnCol.classList.add("col");
btnCol.appendChild(btn);
var row = document.createElement("li");
row.classList.add("row");
var part1 = row.appendChild(inputCol);
part1.appendChild(btnCol); //change here...
categoryContainer.appendChild(part1); //change here...
count ; //add here ...
}
</script>
}
后臺代碼：
public class IndexModel: PageModel
{
[BindProperty] public FormInput _Input { get; set; }
public IActionResult OnGet()
{
return Page();
}
public void OnPost()
{
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/351177.html