Asp.net Core MVC 通過JS動態添加Select List

Question

我試圖提供一個視圖，人們可以在其中創建類別和子類別的列表。 因此我需要允許用戶動態添加行。 每行將允許用戶添加一個類別，然后如果他們希望添加一個子類別。 對於第一行，我可以使用asp-items屬性綁定到我的ViewBag中的SelectList ，但是當我通過 JS 添加新行時我不能這樣做，我嘗試了 2 種 JS 方法（均在代碼中顯示）：

• 1 - 將 SelectList 存儲在變量中並循環遍歷它
• 2 - 將 asp-items 設置為 SelectList

有誰知道我如何填充新添加的行？ 另外，我如何將數據中的 .netred 綁定到我的 Model； 是否必須在 controller 中完成？

代碼如下：

 <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>

Answer 1

使用過的Ajax調用來檢索Categories數據：

 <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);
    }

Answer 2

與上一個答案類似但更短

$(function () {
    $('#CategoryId').change(function () {
        $('#SubCategoryId').empty();
        var url = '@Url.Content("~/")' + "api/CategoryApi/ListSubCategories";
        $.getJSON(url, { categoryId: $('#CategoryId').val() })
            .done(function (data) {
                var subcategories = "";
                $(data).each(function () {
                    subcategories += '<option value="' + this.CategoryId + '">' + this.Title + '</option>'
                });
                $('#SubCategoryId').append(subcategories);
        })
    });
});

在服務器端

    [HttpGet]
    [Route("ListSubCategories")]
    public IActionResult ListSubCategories(int categoryId)
    {
        var subCategories = _categorySvc.ListSubCategories(categoryId);
        return Ok(subCategories);
    }