Как динамически добавлять asp-for в javascript

Question

Я работаю с 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>
}

Однако, когда я получаю доступ к атрибуту «RequiredResources» в ResourceTaskDTO в контроллереМетод «Создать», это 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 обнуляется, когда я возвращаю его обратно на контроллер?

Answer 1

Любые новые дополнения к DOM с клиентским JavaScript не будут обрабатываться механизмом представления Razor, поэтому вы не можете полагаться на оцененную разметку на стороне сервера.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * *1007* * * * * * * * *1007* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 100 * * * 100 * * *.1008 *

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

Имя должно соответствовать свойствам вашей модели, чтобы связать значения при отправке в действие контроллера.