Return ASP.NET Core MVC ViewBag from Controller into View using jQuery

Question

I am trying to return the value of a ViewBag into a html dropdown (on a form) in my View in the <script> area using jQuery. I trigger the Controller side based on the value of another dropdown (on a form) as follows:

View (triggers the GetBrandsForDropdown action method):

$.ajax({

` url: '/Home/GetBrandsForDropdown', });

Controller:

public IActionResult GetBrandsForDropdown()
{
   var brandListing = context.Brands.OrderBy(b => b.BrandName).ToList();
   ViewBag.brandList = brandListing;
   return View();
}

I've debugged this and the ViewBag has values.

View:

var myBrands = '@(ViewBag.brandList)';
alert("The value is: " + myBrands);

I've tried a number of iterations to retrieve the value in the ViewBag. The one above is the only one that allowed processing to continue (i.e. the alert (which included my text) displayed on my screen). However, the value of the ViewBag is blank. Help regarding how to retrieve the value(s) to the View and add them to my <form> dropdown would be very much appreciated.

I fixed some of your formatting, but your ajax call has an extra tick mark in it, and I wasn't sure if that was in your original or not, so I left it alone. If it is in the original code, that would cause a syntax error. — Heretic Monkey
– Heretic Monkey, Commented Jan 19, 2021 at 17:30
Excuse me, but why do you want to do that and not return data in JSON and in your ajax's success, perform the actions you want? — Ergis
– Ergis, Commented Jan 19, 2021 at 18:46
Thanks so much for your response. I am new to working with Core MVC, JScript etc. I tried both of your suggestions but could not get either to work. It did not like the <select> at all and halted processing. When commented out the application did not work with the word Encode. When I changed it to an accepted option it ran without an error but it did not put the values into my dropdown. Again, any help would be much appreciated. — Jack Kent
– Jack Kent, Commented Jan 21, 2021 at 19:53

B.S. · Accepted Answer · 2021-01-19 18:41:37Z

0

You can use Html helper to get the value of your viewbag, as follow:

var myBrands = @Html.Raw(Json.Encode(@ViewBag.brandList));

// then you can loop through your JSON...

$.each(myBrands , function (brand)
{
    console.log(brand);
}

EDIT:

and to make it a yourdropdown (select option) you can use this code in your loop :

<select name="yourdropdown " id="yourdropdown "></select>
<script>
var myBrands = @Html.Raw(Json.Encode(@ViewBag.brandList));
$.each(myBrands , function(key, value) {
  var i = Object.keys(value)[0];
  $("select#yourdropdown ").append( $("<option />").val(i).text(value[i]) );
});
</script>

Remark: Why just don't use:

@Html.DropDownList("MyBrand", new SelectList(ViewBag.brandList , "id", "BrandName"))

edited Jan 19, 2021 at 18:41

answered Jan 19, 2021 at 18:29

B.S.

6881 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Return ASP.NET Core MVC ViewBag from Controller into View using jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related