c# - 将新项目添加到表单中的嵌套列表
问题描述
我正在使用 C# .NET Core 3.1 MVC 为库存管理器制作一个简单的应用程序,但我遇到了障碍
我有一个名为 Product 的类,它有一个颜色列表
public class Product : Entity
{
public string Name { get; set; }
public List<Collor> Collors { get; set; } = new List<Collor>();
}
我的班级 Collor 只有一个名为 Description 的属性
我正在为产品制作一个表单,我希望它有一个“添加颜色”按钮,一旦单击,就会使用删除按钮将新的颜色添加到颜色列表中,但我正在努力这样做,这是我的观点
<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>
<hr />
<h4>Collors</h4>
@{
foreach (var collor in Model.Collors)
{
<partial name="_Collor" model="collor" />
}
<input type="button" value="Add Collor" class="btn btn-success" />
}
<hr />
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
这是我的部分颜色形式
@model MyApp.Models.Collor
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
如何使按钮“添加颜色”在列表中动态创建新项目?
解决方案
这是一个关于如何将新项目动态添加到颜色列表的简单演示:
查看(我的项目中的 Index.cshtml):
@model Product
<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>
<hr />
<h4>Collors</h4>
<div id="colorlist">
@{
foreach (var collor in Model.Collors)
{
<partial name="_Collor" model="collor" />
}
}
</div>
<input type="button" onclick="CreateColor()" value="Add Collor" class="btn btn-success" />
<hr />
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
JS:
@section Scripts
{
<script>
function CreateColor() {
$('#colorlist').append('<div class="form-group"><label class="control-label">Description</label><input name="Description" class="form-control input-sm" /><input type="button" value="Delete" class="btn btn-danger" /></div >')
$('.btn-danger').click(function () {
$(this).closest('.form-group').remove();
})
};
</script>
}
控制器:
public async Task<IActionResult> Index()
{
var model = new Products()
{
Collors = collors //set color data for the partial view
};
return View(model);
}
[HttpPost]
public IActionResult Create(Products product, IFormCollection form)
{
//initialize the property
product.Collors = new List<Collor>();
//get the data from form
var color = form["Description"].ToArray();
foreach (var value in color)
{
product.Collors.Add(new Collor() { Description = value });
}
//do your stuff...
return View("Index");
}
推荐阅读
- android - 如何在原始功能之外增加动画的持续时间?
- ms-word - 使用旧版本的 RTF
- javascript - 基于 vue-route-link active 的动态颜色
- azure - 在 Azure 托管的多容器 Web 应用程序中,无法连接到 unix:///var/run/docker.sock 上的 Docker 守护程序
- python - 上传到 GitHub 的 Jupyter notebook 不显示folium map
- assembly - 大会 AT&T:movq %rdi, %rdx?
- java - 无法解决关闭 preparesStatement 的 SonarQube 错误
- ios - 无效的 `Podfile` 文件:无法加载此类文件 -- path/to/.ios/Flutter/podhelper.rb
- powerbi - Power Bi 排序日期表
- html - 用 svg 中的透明路径重叠彩色矩形/在与路径的交叉点上破坏矩形填充颜色