javascript - 如何在javascript中动态添加asp-for
问题描述
我正在使用 Asp.Net MVC,并且我有一个如下所示的 DTO:
public class TaskDTO
{
public string TaskName { get; set; }
public string NextTaskName { get; set; }
public bool IsBasicTask { get; set; }
public int EstimatedTime { get; set; }
public List<ResourceTaskDTO> RequiredResources { get; set; }
}
public class ResourceTaskDTO
{
public string ResourceName { get; set; }
public int Id { get; set; }
public int Count { get; set; }
}
我想要做的是,在这个视图方面,我想要表格和表格来填充 TaskDTO。在视图方面,我有普通表单,还有一个由 javascript 填充的表以添加 ResourceTaskDTO。
@model CMBuilder.Models.Api.TaskDTO
@{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Task</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="TaskName" class="control-label"></label>
<input asp-for="TaskName" class="form-control" />
<span asp-validation-for="TaskName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="NextTaskName" class="control-label"></label>
<input asp-for="NextTaskName" class="form-control" />
<span asp-validation-for="NextTaskName" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="IsBasicTask" /> @Html.DisplayNameFor(model => model.IsBasicTask)
</label>
</div>
<div class="form-group">
<label asp-for="EstimatedTime" class="control-label"></label>
<input asp-for="EstimatedTime" class="form-control" />
<span asp-validation-for="EstimatedTime" class="text-danger"></span>
</div>
<div class="form-group">
<table class="table table-bordered" id="ResourceTable">
<tr>
<th>Resource Name</th>
<th>Id</th>
<th>Count</th>
<th><button type="button" name="add" id="btn_AddResource" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
</div>
<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>
@section Scripts
{
<script>
i = 0;
$("#btn_AddResource").click(function () {
var html = '';
html += '<tr>';
html += '<td><input type="text" asp-for="RequiredResources[i].ResourceName" class="form-control" /></td>';
html += '<td><input type="text" asp-for="RequiredResources[i].Id" class="form-control" /></label></td>';
html += '<td><input type="text" asp-for="RequiredResources[i].Count" class="form-control" /></td>';
html += '<td></td></tr>';
$('#ResourceTable').append(html);
i++;
});
</script>
}
但是,当我在控制器的“Create”方法中访问 ResourceTaskDTO 中的“RequiredResources”属性时,它为 NULL,并且似乎 javascript 代码没有挂钩到“RequiredResources”属性。
这是我的控制器代码:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("TaskName,NextTaskName,IsBasicTask,EstimatedTime,RequiredResources")] TaskDTO task)
{
if (ModelState.IsValid)
{
CMBuilderHandler Handler = new CMBuilderHandler(_service);
var res = await Handler.CreateTask(task);
if(res)
{
return Ok("Success");
}
else
{
return NotFound("Something went bad!");
}
}
return View(task);
}
我的代码有什么问题?为什么当我将 task.RequiredResources 取回控制器时它会为空?
解决方案
Razor 视图引擎不会处理使用客户端 JavaScript 对 DOM 进行的任何新添加,因此您不能依赖服务器端评估标记。由于asp-for
是 Razor Tag Helper,它不会被扩展。
您需要自己为每个表单输入设置名称和值属性。
$("#btn_AddResource").click(function () {
var html = '';
...
html += '<td><input type="text" name="RequiredResources[' + i + '].ResourceName" value="" class="form-control" /></td>';
html += '<td><input type="text" name="RequiredResources[' + i + '].Id" value="" class="form-control" /></label></td>';
...
$('#ResourceTable').append(html);
i++;
});
该名称需要与模型的属性相匹配,才能在提交到控制器操作时绑定值。
推荐阅读
- javascript - TensorFlowJs 和谷歌存储 | tf.loadLayersModel 出现 CORS 错误
- python - 如何使用正则表达式在 PDF 中搜索括号内的所有单词,除了一组特定的单词?
- reactjs - React SPA (Router) 创建 3d 动画(翻转/滚动)以在组件之间切换
- angular - 避免 Angular/TypeScript 变量绑定
- pyspark - 无法使用运动流在火花流中创建流
- python - 在 for 循环中附加来自 json 文件的数据帧
- java - 为什么这个 Java 方法调用被认为是模棱两可的?
- javascript - 鼠标悬停时居中图像
- elasticsearch - elasticsearch-rest-client-7.2.0 的间歇性 SocketTimeoutException
- excel - 如何评估列表中多个条件的真假