如何发送动态数量的HTML表单的控制器作为对象列表?

Question

我正在做一个。net Core MVC项目。在局部视图中，我希望将来自用户的一些信息填充为HTML表单。该信息是模型的变量，因此每个填充列表都是一个对象。在用户填充对象之后，我想把那个对象作为那个对象的List发送给我的控制器。用户可发送3张或5张或1张表格。我的问题是，当它只有一个表单发送，一切都很好，我给变量名称模型作为名称属性到我的HTML输入在一个表单标签和我的对象填充。但在这种情况下，我不知道会有多少个物体出现，我不知道如何得到一个物体列表。我希望你能明白。

这是我的视图:

@model List<EpubAdmin.Models.KyProducts>
@{
ViewData["Title"] = "AddBook";
Layout = null;
}
@foreach(var product in Model)
{
<div class="col col-xl-12">
<div class="row justify-content-center">

<div class="col-xl-5 col-lg-5 ">
<form method="post" action="/File/AddProductFile" enctype="multipart/form-data" id="myForm">

<br />
<b>Kitap Adı: </b>
<input class="form-control" value="@(Html.Raw(product.Name))" name="Name"/>
<br />
<b>Sayfa Sayısı: </b>
<input class="form-control" value="@product.PageNumber" name="PageNumber" />
<br />
<b>Product Id: </b>
<input class="form-control" value="@product.KyProductId" name="KyProductId" readonly />
<br />
<b>Barkod:  </b>
<input class="form-control" value="@product.Barcode" name="Barcode" readonly />
<input class="form-control" value="@product.Author" name="Author" hidden />
<input class="form-control" value="@product.ImageId" name="ImageId" hidden />
<input class="form-control" value="@product.PublisherName" name="PublisherName" hidden />
<input class="form-control" value="@product.PublisherId" name="PublisherId" hidden />

<br />
@*<select class="selectpicker" data-live-search="true" data-show-subtext="true">
<option value="0">Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>*@
@if (product.IsDuplicate)
{
<div class="alert alert-danger">
<p>* Bu kitap zaten ekli.</p>
</div>}
else
{
<h5>Kategori Seç</h5>
<select class="form-select ml-0" data-live-search="true">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<select class="form-select ml-5">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<select class="form-select ml-5">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<br />
<br />
<label for="file">Yüklenecek kitabı seçin.</label>
<input type="file" class="form-control-file" id="File" accept=".epub" name="File">   
}
</form>
<br />         
<br />
</div>
</div>
<br />
<hr />
<br />
</div>
}
<div class="float-right">
<button class="btn btn-info w-100" onclick="onclk()">Ekle</button>
</div>
<br />
<br />

<script>  
function onclk() {
$("#myForm").submit();       
alert("a");
}
</script>

控制器:

[HttpPost]
public IActionResult AddProductFile(List<KyProducts> model)                                              
{
foreach(var product in model)
{
if (product.file == null || product.KyProductId == 0 || product.PublisherId == 0)
{
return RedirectToAction("List", "Books");
}
}
}

我想在我的视图中使用for而不是foreach，这样我就可以获得索引，并可以将我的HTML属性命名为name="id+@i"，但这对我来说似乎不是最佳实践，也不确定它是否有效。我也想过在每个表单上放置隐藏的提交按钮，点击主提交按钮，触发所有隐藏的提交按钮，但这似乎不是最佳实践……你的想法是什么?

Answer 1

如果您想将列表传递给您的操作，请尝试将表单放在foreach之外，并更改输入的名称:

@model List<EpubAdmin.Models.KyProducts>
@{
ViewData["Title"] = "AddBook";
Layout = null;
}
<form method="post" action="/File/AddProductFile" enctype="multipart/form-data" id="myForm">
@{ var i = 0;}
@foreach (var product in Model)
{
<div class="col col-xl-12">
<div class="row justify-content-center">

<div class="col-xl-5 col-lg-5 ">

<br />
<b>Kitap Adı: </b>
<input class="form-control" value="@(Html.Raw(product.Name))" name="model[@i].Name" />
<br />
<b>Sayfa Sayısı: </b>
<input class="form-control" value="@product.PageNumber" name="model[@i].PageNumber" />
<br />
<b>Product Id: </b>
<input class="form-control" value="@product.KyProductId" name="model[@i].KyProductId" readonly />
<br />
<b>Barkod:  </b>
<input class="form-control" value="@product.Barcode" name="model[@i].Barcode" readonly />
<input class="form-control" value="@product.Author" name="model[@i].Author" hidden />
<input class="form-control" value="@product.ImageId" name="model[@i].ImageId" hidden />
<input class="form-control" value="@product.PublisherName" name="model[@i].PublisherName" hidden />
<input class="form-control" value="@product.PublisherId" name="model[@i].PublisherId" hidden />
<br />
@if (product.IsDuplicate)
{
<div class="alert alert-danger">
<p>* Bu kitap zaten ekli.</p>
</div>}
else
{
<h5>Kategori Seç</h5>
<select class="form-select ml-0" data-live-search="true">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<select class="form-select ml-5">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<select class="form-select ml-5">
<option selected>Tarih</option>
<option value="1">Çocuk</option>
<option value="2">Psikoloji</option>
<option value="3">Kültür</option>
</select>
<br />
<br />
<label for="file">Yüklenecek kitabı seçin.</label>
<input type="file" class="form-control-file" id="File" accept=".epub" name="File">
}
<br />
<br />
</div>
</div>
<br />
<hr />
<br />
</div>
i++;
}
<input type="submit" value="submit"/>
</form>

当你点击按钮时，它会把整个列表传递给action。