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

【问题标题】：Binding ViewBag result to Html dropdown将 ViewBag 结果绑定到 Html 下拉列表
【发布时间】：2021-01-27 02:19:45
【问题描述】：

ASP.NET Core MVC 的新功能：尝试绑定 sql 查询的结果（在我的 Controller 上）并添加到 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">

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

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

【问题讨论】：

标签： asp.net asp.net-core viewbag

【解决方案1】：

一个简单的方法是遍历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">
@foreach(var item in ViewBag.BrandListing){
   <option value="@item.Value">@item.Text</option>
}
</select>

【讨论】：

【解决方案2】：

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

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

结果：

【讨论】：