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>

然后我环顾四周，发现这个link展示了如何创建可以增长的动态表单。我试图将这种想法与下拉框结合起来。根据该教程，这是我的新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页面中的隐藏选择控件中。

您的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>';
    });

我无法测试此代码，因为设置超出了我的范围，因此您可能需要对其进行一些调整。如果您遇到任何困难的错误，请告诉我。

如何创建在ASP.NET EF中增长的动态下拉框？

1 个答案: