Asp.net Core MVC 通过JS动态添加Select List

debugcn 发表于 Dev

奇拉格·帕特尔

我试图提供一个视图，人们可以在其中创建类别和子类别的列表。因此我需要允许用户动态添加行。每行将允许用户添加一个类别，然后如果他们想要一个子类别。对于第一行，我能使用ASP的项目属性绑定到的SelectList在我ViewBag，但是当我添加一个新行通过JS我不能做到这一点，我已经尝试了2种方法JS（在代码中所示）：

1 - 将 SelectList 存储在变量中并循环遍历它
2 - 将 asp-items 设置为 SelectList

有谁知道如何填充新添加的行？另外我将如何将数据中的输入绑定到我的模型；它必须在控制器中完成吗？

代码如下：

<script type="text/javascript">
    $(document).ready(function () {
        var categories = "@ViewBag.Categories";
        var catOptions = '';
        for (var i = 0; i < categories; i++) {
            catOptions = catOptions + '<option value="' + categories[i].CategoryId + '">' + categories[i].Name + '</option>'
        }

        $(document).on("click", "#btnAddCat", function () {
            var newCat =''+
                '<tr class="categorieRows">' +
                    '<td colspan="2">' +
                '<select>' +
                    catOptions +
                '</select>' +
                    '</td>' +
                    '<td>' +
                        '<button type="button" id="btnAddSubCat" class="btn btn-xs btn-primary classAdd">Add Sub Category</button>' +
                    '</td>' +
                '</tr>';
            $('#categoryTable').append(newCat);
        });

        $(document).on("click", "#btnAddSubCat", function () {
            var newSubCat = '' +
                '<tr class="categorieRows">' +
                    '<td></td>' +
                    '<td>' +
                        '<select asp-items="ViewBag.SubCategories"></select>' +
                    '</td>' +
                    '<td></td>' +
                '</tr>';
            $('#categoryTable').append(newSubCat);
        });
    });
</script>

@model IEnumerable<Categories>

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Surveys</h4>
<hr />
<table class="table table-striped" id="categoryTable">
    <thead>
        <tr>
            <th>
                Category
            </th>
            <th>
                Sub Categories
            </th>
            <th>
                <button type="button" id="btnAddCat" class="btn btn-xs btn-primary classAdd">Add Category</button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="categorieRows">
            <td colspan="2">
                <select asp-items="ViewBag.Categories"></select>
            </td>
            <td>
                <button type="button" id="btnAddSubCat" class="btn btn-xs btn-primary classAdd">Add Sub Category</button>
            </td>
        </tr>
    </tbody>
</table>

<div>
    <a asp-action="Index">Back to List</a>
</div>

奇拉格·帕特尔

使用 Ajax 调用来检索类别数据：

<script>
    $(document).ready(function () {
        $(document).on("change", "#selectCategroy", function () {
            var subCat = this;
            $.ajax({
                url: "ReturnJsonSubCategories/?categoryId=" + $(subCat).val(),
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: JSON,
                success: function (result) {
                    var categories = "";
                    $(result).each(function () {
                        categories = categories + '<option value="' + this.subCategoryId + '">' + this.name + '</option>'
                    });

                    var subCateList = $("#selectSubCategroy");
                    subCateList.empty();
                    subCateList.append(categories);
                },
                error: function (data) {
                    return "Error";
                }
            });
        });
    });
</script>

服务器端代码如下所示：

public JsonResult ReturnJsonSubCategories(int categoryId)
    {
        var jsonData = _context.SubCategories.Where(x => x.CategoryId == categoryId).ToList();
        return Json(jsonData);
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。