Как создать динамические выпадающие списки, которые растут в ASP.NET EF?

Question

Я пытаюсь реализовать дропбоксы, которые могут выглядеть предварительно заполненными и могут динамически увеличиваться при нажатии кнопки. Я начал с базовой реализации выпадающего списка, которая не растет динамически. Это мой контроллер + фрагмент кода DTO:

public class TaskDTO
{
     public string TaskTemplateName { get; set;}
}

public IActionResult Create()
{
        ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name");
        return View();
}

public async Task<IActionResult> Create([Bind("Id,TaskTemplateName")] TaskDTO task)
    {
        if (ModelState.IsValid)
        {
            //Do some stuff
        }
        ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name", task.TaskTemplateName);
        return View(task);
    }

Это мой код бритвы create.cshtml:

<h2>Create</h2>

<h4>TemplateTask</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="TaskTemplateName" class="control-label"></label>
            `  `<select asp-for="TaskTemplateName" class="form-control" asp-items="ViewBag.TaskTemplateId"></select>
            </div>

Затем я оглянулся и нашел ссылку , которая показывает, как создавать динамические формы, которые могут расти. Я попытался объединить эту идею с выпадающими списками. Основываясь на этом руководстве, вот мой новый код контроллера DTO +:

public class TaskTemplateDTO
{
    public string TaskTemplateName { get; set; }
}

public class TaskDTO
{
    public List<TaskTemplateDTO> TaskTemplateNames { get; set; }
}


public IActionResult Create()
    {
        var vm = new TaskDTO() { };
        ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name");
        return View(vm);
    }

public async Task<IActionResult> Create([Bind("Id,TaskName,TaskTemplateNames,ParentTasks,IsBasicTask,EstimatedTime,RequiredResources")] TaskDTO task)
    {
        if (ModelState.IsValid)
        {
            //Do some stuff
        }

        ViewData["TaskTemplateId"] = new SelectList(_context.TaskTemplates, "Id", "Name", task.TaskTemplateNames);
        return View(task);
    }

вот моя дополнительная бритва EditorTemplates, TaskTemplateDTO.cshtml:

@model Namespace.TaskTemplateDTO

<select asp-for="TaskTemplateName" class="TaskTemplate" asp-items="ViewBag.TaskTemplateId"></select>

Это мой код бритвы create.cshtml:

<h2>Create</h2>

<h4>TemplateTask</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">
                <table class="table table-bordered" id="TaskTemplateTable">
                    <tr>
                        <th>Task Templates</th>
                        <th><button type="button" name="add" id="btn_AddTaskTemplate" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                        @Html.EditorFor(f => f.TaskTemplateNames)
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>



@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>

        $("#btn_AddTaskTemplate").click(function () {
            var i = $(".TaskTemplate").length;
            var html = '';
            html += '<tr>';
            html += '<td><select type="text" name="TaskTemplateNames[' + i + '].TaskTemplateName" class="TaskTemplate" /></td>';
            html += '<td></td></tr>';
        });

$('#TaskTemplateTable').append(html);
    </script>
}

Приведенный выше код добавляет новые раскрывающиеся списки при нажатии, но раскрывающиеся списки не заполнены данными, что я сделал не так?

Answer 1

Вам понадобятся опции выбора, которые вы хотите, чтобы новые элементы управления были доступны для вашего метода javascript. Есть несколько способов сделать это, самый простой - спрятать его на html-странице в скрытом элементе управления select.

Ваш CSHTML:

<h2>Create</h2>

//Added the hidden HTML control here
    @Html.DropDownList("hidden-select", 
        new SelectList((IEnumerable) ViewData["TaskTemplateId"]), 
        null, new Dictionary<string, object>
            {
                { "id", "task-template-names" },
                { "style", "display: none" }
            })
<h4>TemplateTask</h4>
<hr />
<div class="row">
    <div class="col-md-4">
////other things you were doing

Это будет отображаться в вашем HTML как предварительно заполненный скрытый шаблон, из которого вы можете создавать новые выпадающие списки с опциями при нажатии кнопки.

    $("#btn_AddTaskTemplate").click(function () {
        var i = $(".TaskTemplate").length;
        var html = '';
        html += '<tr>';
        html += '<td><select type="text" name="TaskTemplateNames[' + i + '].TaskTemplateName" class="TaskTemplate">';
        html += document.querySelector("#task-template-names").innerHTML;
        html += '</select></td>';
        html += '<td></td></tr>';
    }); 

Я не смог протестировать этот код, потому что здесь настройка выходит за рамки моих возможностей, поэтому вам, возможно, придется немного его настроить. Если вы столкнулись с какими-либо трудными ошибками, дайте мне знать.