使用 javascript 在 controller 中調用操作並更新視圖

Question

我有多個選擇（例如品牌和產品）。 我想根據用戶選擇的品牌更新產品選項。 select 是這樣的

<select asp-for="Product.BrandId" class="form-control" asp-items="ViewBag.BrandId" id="transactionBrand" onchange="brandSelect()</select>

我使用 javascript 獲得了用戶點擊的品牌 ID，但接下來呢？ 我考慮在 controller 中調用一個動作來獲取產品列表並更新產品選擇的 viewbag，然后返回當前視圖。 我怎樣才能做到這一點？

Answer 1

您可以使用 ajax 將選定的品牌 ID 傳遞給操作，然后操作返回一個列表，然后在 js 中設置 select 選項。這是一個工作演示：Model：

public class Product
    {
        public int BrandId { get; set; }
        public int ProductId { get; set; }

    }

控制器（我用假數據來測試）：

[HttpGet]
        public IActionResult TestProduct() {
            ViewBag.BrandId = new List<SelectListItem> { new SelectListItem { Text = "brand1", Value = "1" }, new SelectListItem { Text = "brand2", Value = "2" }, new SelectListItem { Text = "brand3", Value = "3" } };
            ViewBag.ProductId = new List<SelectListItem> { new SelectListItem { Text = "select product", Value = "" } };
            return View();
        }
        [HttpPost]
        public List<SelectListItem> TestProduct(int BrandId)
        {
            List<SelectListItem> l = new List<SelectListItem> { new SelectListItem { Text = "product1", Value = "1" }, new SelectListItem { Text = "product2", Value = "2" }, new SelectListItem { Text = "product3", Value = "3" } };
            return l;
        }

看法：

@model xxx.xxx.Product
<select asp-for="BrandId" asp-items="ViewBag.BrandId" id="transactionBrand" onchange="brandSelect()"></select>
<select asp-for="ProductId" asp-items="ViewBag.ProductId" id="transactionProduct"></select>
@section scripts{
    <script>
        function brandSelect() {
            $.ajax({
                type: "POST",
                data: { BrandId: $("#transactionBrand").val() },
                url: 'TestProduct',
            }).done(function (data) {
                var items = '';
                $("#transactionProduct").empty();
                $.each(data, function (index, Product) {
                    items += "<option value='" + Product.value + "'>" + Product.text + "</option>";
                });
                $('#transactionProduct').html(items);
                })
            
        }
    </script>
}

結果：