代码之家  ›  专栏  ›  技术社区  ›  Mantracker

如何在javascript中动态添加asp

  •  0
  • Mantracker  · 技术社区  · 5 年前

    我正在使用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; }
    }
    

    @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>
    }
    

    这是我的控制器代码:

        [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在我将其返回控制器时为空?

    0 回复  |  直到 5 年前
        1
  •  3
  •   Jasen    5 年前

    任何使用客户端JavaScript添加到DOM中的新内容都不会被Razor视图引擎处理,因此您不能依赖服务器端评估的标记。自从 asp-for

    您需要设置 名称 价值 每个表单输入的属性。

    $("#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++;
    });
    

    当提交到控制器操作时,名称将需要与模型的属性匹配以绑定值。