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

Question

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

我的控制器如下所示：

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

Answer 1

无需使用 javascript 来填充 table。你需要结合使用 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>

控制器：

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，有没有报错信息？

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

Accessing SelectListItem Value and Text in a Javascript script MVC

javascript

asp.net

model-view-controller

razor

asp.net-core