Viewbag Dropdown list from javascript always undefined-CodePudding

I try to make dynamically multiple input with dropdown list, My select list is using viewbag and the result is always undefined.

The Viewbag List

private void ToolCategories(object selectedcat = null)
{
      var catQuery = from d in db.Toolcategories
                     where d.In == "AD" 
                     orderby d.CategoryName
                     select d;
      SelectList ToolCategories = new SelectList(catQuery, "CategoryId", "CategoryName", selectedcat);
      ViewBag.ToolCategories = ToolCategories;
}

The View

@using System.Text.Json;

<script>
var resin = document.createElement("div");
resin.setAttribute("class", "col-md-4");
var resinGrup = document.createElement("div");
resinGrup.setAttribute("class", "form-grup");
var resinLabel = document.createElement("label");
resinLabel.setAttribute("class", "form-label fs-6");
resinLabel.innerHTML = "Tool";
var jsonObj = @Html.Raw(JsonSerializer.Serialize(ViewBag.ToolCategories));
var resinSelect = document.createElement("select");
resinSelect.setAttribute("id", "CategoryId");
resinSelect.setAttribute("class", "form-control");
resinSelect.setAttribute("required", "");
resinSelect.setAttribute("name", `[${toolID}].ToolCategories`);
$.each(jsonObj, function (index, ToolCategories) {
  var option = document.createElement("option");
  option.value = ToolCategories.CategoryId;
  option.text = ToolCategories.CategoryName;
  resinSelect.append(option);
})
</script>

CodePudding user response：

My select list is using viewbag and the result is always undefined.

Well, your undefined dropdown is pretty obvious because you have used

Solution:

You need to modify your option binding as option.value = ToolCategories.Value; instead of ToolCategories.CategoryId;

Thereofore, complete code would be:

$.each(jsonObj, function (index, ToolCategories) {
                console.log(ToolCategories);
                var option = document.createElement("option");
                option.value = ToolCategories.Value;
                option.text = ToolCategories.Text;
                resinSelect.append(option);
            });

Output:

Note: If you still need further details on it, please have a look on our official document here.

CodePudding user response：

Seems everything looks fine except below 2 lines, in your view file.. Replace your Category Id with Value and CategoryName with Text.

option.value = ToolCategories.Value; option.text = ToolCategories.Text;

You are getting undefined as it failed to find values but required values mapped to different properties.