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

Question

I am trying to provide a view where people will be able to create a list of categories and sub categories. Therefore I need to allow users to dynamically add Rows. Each Row will allow user to add a category and then if they wish a Sub Category. For the first row I am able to use asp-items attributes to bind to a SelectList in my ViewBag , however when I add a new row via JS I cannot do it, I have tried 2 methods JS (both shown in the code):

• 1 - Storing the SelectList in a variable and looping through it
• 2 - Setting the asp-items to the SelectList

Does anyone know how I can populate my newly added rows? Also how would I bind the .netred in data to my Model; would it have to be done in the controller?

The code is as follows:

 <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

Used Ajax calls to retrieve Categories data:

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

With the server side code looking like:

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

Answer 2

Similar with the last answer but a bit shorter

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

and on server side

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