c# - 在 asp.net core 3 MVC 中包含列表属性的模型的表单
问题描述
我正在尝试在 asp.net core 3 MVC 中创建一个表单。
模型是一个“包”类,包含关于包的不同属性,以及包List<item> items
中项目的属性,项目是定义的包含“项目”不同属性的类。
我应该如何为用户创建一个表单来添加一个新的“包”?
加上在其中插入项目,可以是任意数量的项目,我希望用户为每个项目插入一行(带有一个为新项目添加新输入行的按钮)并与最终表单一起提交。
任何帮助,将不胜感激。
解决方案
这是一个完整的工作演示:
模型:
public class Package
{
public int Id { get; set; }
public string Name { get; set; }
public List<Item> Items { get; set; }
}
public class Item
{
public int Id { get; set; }
public string ItemName { get; set; }
}
看法:
@model Package
<h1>Create</h1>
<h4>Package</h4>
<hr />
<div class="row">
<div class="col-md-4">
<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>
<button onclick="addRow()" type="button">Add Row</button>
<table id="AddItemsTable">
<tr>
<th>@Html.DisplayNameFor(model=>model.Items[0].ItemName)</th>
</tr>
</table>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
JS:
@section Scripts {
<script>
var counter = 0;
function addRow() {
var table = document.getElementById("AddItemsTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = '<input type="text" name="Items[' + counter+'].ItemName"/>';
counter++;
}
</script>
}
控制器:
// GET: Packages/Create
public IActionResult Create()
{
return View();
}
// POST: Packages/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Package package)
{
if (ModelState.IsValid)
{
_context.Add(package);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(package);
}
结果:
推荐阅读
- javascript - 找不到模块“actions-on-google”,正在使用 dialogflow
- android - Admob 查询广告很慢
- facebook - 如何在 Facebook 上发布自己的视频,使其不会自动播放?
- ios - SwiftUI 文本不会扩展到多行
- android - 使用 Kotlin DSL 发布库
- javascript - 使用 Weather API 并按日期排序
- xml - XSLT:复制 XML 的节点并更改命名空间
- oracle - 通过过程执行没有得到正确的输出
- mysql - Mysql加入同一张表而不反向
- ffmpeg - h264_mp4toannexb 过滤器在 ffmpeg 连接时无法接收输出数据包