将 ViewBag 结果绑定到 Html 下拉列表

问题描述

ASP.NET Core MVC 的新内容：尝试将 sql 查询的结果（在我的控制器上）绑定到一个 ViewBag，到一个 Html 下拉列表（下拉列表 B）。 Action 方法是基于使用 Ajax 的另一个下拉列表（下拉列表 A）中的更改触发的。

View (if change in dropdown A):

                    $.ajax({
                        type: "POST",url: "/Home/GetBrandsForDropdown",data: null,success: function (result) {
                            alert('Success')
                        },error: function (req,status,error) {
                            alert('No Success')
                        }
                    });
Note: Alert is 'No Success" when I run it.

Controller:
        public IActionResult GetBrandsForDropdown()
        {
            var content = from b in Context.Brands
                          select new { b.BrandNumber,b.BrandName };

            ViewBag.BrandListing = content.Select(c => new SelectListItem
                {
                    Text = c.BrandName,Value = c.BrandNumber.ToString()
                }).ToList();
                                   
            return View();
        }
Note: ViewBag.BrandListing includes values when I debug.

尝试将 ViewBag 中的值转换为以下内容但未成功：

<select class="dropdown form-control" onchange="getoption()" name="brandDDL" 
id="ddlBrandName"style="background-color: #E6E6E6;
                        font-size: small; color: black; font-weight: bold;
                        border: double">

这似乎应该很容易解决，但我没有得到我想要的结果。

非常感谢任何/所有帮助。 杰克

解决方法

一个简单的方法是循环查看视图包；

<select class="dropdown form-control" onchange="getOption()" name="brandDDL" id="ddlBrandName"style="background-color: #E6E6E6; font-size: small; color: black; font weight: bold; border: double">
@foreach(var item in ViewBag.BrandListing){
   <option value="@item.Value">@item.Text</option>
}
</select>

,

注意：当我运行它时，警报是“不成功”。

我想 GetBrandsForDropdown 这个操作没有查看页面。如果在一个action中直接返回View()，必须有一个同名的View（这里应该是GetBrandsForDropdown.cshtml），否则会报500服务器端错误，肯定进入ajax错误函数。

另外，ViewBag在这里不会起作用，因为它是服务器端代码，在页面加载时已经完成了。

我建议你可以只返回json格式的内容，然后将选项附加到下拉列表B中。

下面是一个简单的演示：

查看：

@{
    ViewData["Title"] = "Home Page";
}


<h1>Dropdown A</h1>
<select id="dropdownA" class="dropdown form-control" onchange="getDropdownB()">
    <option>A1</option>
    <option>A2</option>
</select>

<h1>Dropdown B</h1>
<select id="dropdownB" class="dropdown form-control" onchange="getOption()">
</select>

@section scripts{
    <script>
        function getDropdownB() {
            $.ajax({
                type: "POST",url: "/Home/GetBrandsForDropdown",data: null,success: function (result) {
                    $.each(result,function (key,value) {
                        $("#dropdownB ").append($("<option />").val(value.brandNumber).text(value.brandName));
                    })
                    alert('Success')
                },error: function (req,status,error) {
                    alert('No Success')
                }
            });
        }
    </script>
}

控制器：

public IActionResult GetBrandsForDropdown()
{
    var content = (from b in Context.Brands
                    select new { b.BrandNumber,b.BrandName }).ToList();

    return Json(content);
}

结果：