在 Javascript 脚本 MVC 中访问 SelectListItem 值和文本

Question

我正在构建一个动态 web 表单（意味着可以根据需要添加额外的字段行），其中包含一个可搜索的下拉列表作为从数据库填充条目的字段之一。 我正在通过 select2 使下拉列表可搜索，并且我正在使用 javascript append 向表单添加新行。 我有一个 <SelectListItem>ViewBag 元素，我试图用它来填充每一行中的下拉框。 目前，我可以创建与 List 元素中的项目一样多的条目，但我无法访问项目的 Value 和 Text 属性以填充下拉列表。 我能够访问 Selected 属性。

我的 Controller 如下所示：

//Populate program search dropdown from DB
                List<SelectListItem> ls = new List<SelectListItem>();
                var lm = entities.SCInnovationProject;
                foreach (var temp in lm)
                {

                    ls.Add(new SelectListItem() { Text = temp.ProjectName, Value = temp.SCInnovationProjectId.ToString() });
                }
                ViewBag.projectSearch = ls;

我的视图的 Javascript 部分如下所示：

<script>
    var counter = 1;
    $(function () {
        $('#add').click(function () {
            $('<tr id="tablerow' + counter + '">' +
                '<td>' +
                '<select class="catch form-control" id="dependentProjectID_' + counter + '_" name="dependentProjectID[' + counter + ']"><option value="">Select dependent project</option>' +
                @{foreach (var item in ViewBag.projectSearch)
                    {
                        @:'<option value="@item.Value">@item.Text</option>' +
                    }
                 }
                '</select>' +
                '</td>' +
                '</tr>').appendTo('#submissionTable');
                $('.catch').select2();
                counter++;
                return false;
        });
    });
    function removeTr(index) {
        if (counter > 1) {
            $('#tablerow' + index).remove();
            counter--;
        }
        return false;
    }
</script>

如果我为“item.Selected”切换“item.Value”和“item.Text”，代码将执行并在下拉列表中显示“False”。 如果有人能告诉我如何访问“值”和“文本”字段来填充下拉列表，我将不胜感激。

Answer 1

无需使用javascript来填充表。 为此，您需要将html与Razor结合使用。 我相信这是你试图做的

<table>
    @for (var i = 0; i < @ViewBag.projectSearch.Count; i++)
    {
        <tr id=@string.Format("tablerow{0}", @i)>
            <td>
                @Html.DropDownList("dependentProjectID_" + i, (List<SelectListItem>)@ViewBag.projectSearch, "Select dependent project", null)
            </td>
        </tr>
    }
</table>

Answer 2

我测试了你的代码，看来我这边没有问题。

看法：

<button id="btn">Test</button>

<div id="submissionTable"></div>

脚本：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>

    $("#btn").click(function () {
        var counter = 1;
        $('<tr id="tablerow' + counter + '">' +
            '<td>' +
            '<select class="catch form-control" id="dependentProjectID_' + counter + '_" name="dependentProjectID[' + counter + ']"><option value="">Select dependent project</option>' +
            @{foreach (var item in ViewBag.projectSearch)
                {
                    @:'<option value="@item.Value">@item.Text</option>' +
                }
             }
            '</select>' +
            '</td>' +
            '</tr>').appendTo('#submissionTable');
            $('.catch').select2();
            counter++;
            return false;

    })
</script>

Controller：

List<SelectListItem> ls = new List<SelectListItem>();
ls.Add(new SelectListItem { Value = "1", Text = "A" });
ls.Add(new SelectListItem { Value = "2", Text = "B" });
ls.Add(new SelectListItem { Value = "3", Text = "C" });
ViewBag.projectSearch = ls;

结果：

您可以调试检查 ViewBag 中的值，如果您使用item.Value和item.Text ，是否有任何错误消息？