Binding ViewBag result to Html dropdown

Question

New to ASP.NET Core MVC: Trying to bind the result of a sql query (on my Controller) and added to a ViewBag, to an Html dropdown (dropdown B). The Action method is triggered based on a change in another dropdown (dropdown A) using Ajax.

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.

Trying but unsuccessful to get the values in the ViewBag into the following:

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

This seems to be something that should be easily solved but I'm having no luck in getting my desired result.

Any/All help would be very much appreciated. Jack

mj1313 · Accepted Answer · 2021-01-27 06:18:15Z

Note: Alert is 'No Success" when I run it.

I guess there isn't a view page for GetBrandsForDropdown this action. If you directly return View() in an action, there must be a View with the same name (here should be GetBrandsForDropdown.cshtml), otherwise it will raise a 500 server side error, and certainly it enters the ajax error function.

In addition, ViewBag will not work here, since it is the server side codes, which is already completed when the page loaded.

I suggest you can just return the content in the json format, then append the options to dropdown B.

Below is a simple demo:

View:

@{
    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>
}

Controller:

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

    return Json(content);
}

Result:

user15088232 · Accepted Answer · 2021-01-27 03:41:25Z

0

An easy way to do it is loop through the 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>

answered Jan 27, 2021 at 3:41

user15088232

Collectives™ on Stack Overflow

Binding ViewBag result to Html dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related