How to have a ViewBag List Dynamic view with is created from JavaScript

Question

I have HTML view which has ViewBag list as you can see in the code below.

                      ``` 
<select asp-for="categoryName" id="CatId" name="purchase[0].categoryName" class="form-control" style="border-radius: 12px; " asp-items="@ViewBag.Pitems">
                                    <option>Select Category</option>
                            </select>         
                             
                           <select asp-for="type" id="typeId" name="purchase[0].type" class="form-control" style="border-radius: 12px; " asp-items="@(new SelectList(string.Empty, "type", "type"))">
                                    <option>Select Type</option>
                             </select>

Now for other page want to use same thing but it is in javascript, When I write this code in Javascript ViewBag is not working

   var counter - 1;          '
<select  class="form-control"  asp-for="categoryName" name="purchase[' + counter + '].categoryName" style="border-radius: 12px; " id="cat1" onchange="change1(' + counter + ', this) asp-items="@ViewBag.Pitems";>'

This code is showing no value in dropdown, how to code javascript dropdown list which access ViewBag>

This doesn't work because the Razor C# is processed at the server before the page is delivered to the browser. The JavaScript is processed in the browser without access to the ViewBag. So you'd need to encode the ViewBag values into a JavaScript variable. See this question for techniques https://stackoverflow.com/q/10008023/2030565 — Jasen, Apr 08 '21 at 20:08
@Jasen thank you for reply i did this var myJsVariable = '@ViewBag.type' alert(myJsVariable); but i am still getting Microsoft.AspNetCore.Mvc.Rendering.SelectList — Michaelweston, Apr 08 '21 at 20:22

mj1313 · Accepted Answer · 2021-04-12T05:46:14.727

1

You need to serilize the ViewBag data in js function:

var obj = @Html.Raw(Json.Serialize(ViewBag.model));

Take a look at this thread:

https://stackoverflow.com/a/61886045/11965297

Example:

Controller:

public IActionResult Index()
{
    List<ItemsType> type = new List<ItemsType>
    {
        new ItemsType{ TypeId = 1, Type = "A"},
        new ItemsType{ TypeId = 2, Type = "B"},
        new ItemsType{ TypeId = 3, Type = "C"},
    };
    ViewBag.type = type;
    return View();
}

View:

<div id="container">

</div>

Scripts:

<script>
    var types = @Html.Raw(Json.Serialize(ViewBag.type));
    var select = document.createElement("select");
    $(select).attr("name", "purchase[0].type");
    $(select).attr("id", "typeId");
    $(select).addClass("form-control");
    $(select).css("border-radius","12px");
    $.each(types, function (index, type) {
        var option = document.createElement("option");
        option.value = type.typeId;
        option.text = type.type;
        select.append(option);
    })
    $("#container").append(select);
</script>

Result:

edited Apr 12 '21 at 05:46

answered Apr 09 '21 at 03:23

mj1313

7,930
2
12
32

great! I found it too but how can I add this variable "obj" in the Dynamic JavaScript code. ' – Michaelweston Apr 09 '21 at 03:38
Can you show the controller which you set the ViewBag, and the related model as well. – mj1313 Apr 09 '21 at 05:06
Sure is like this ''' IList type = _context.ItemsTypes.ToList(); ViewBag.type = new SelectList(type, "typeId", "type"); – Michaelweston Apr 09 '21 at 13:58
What you have sent me works for me but I would like to add that in a dropdown list I would like if you have any example of how to do it, I don't know if a loop has to be created or the variable can be added directly in the INPUT – Michaelweston Apr 09 '21 at 14:01
@GermanBernal, sorry for being late, I have updated my answer. – mj1313 Apr 12 '21 at 05:55

How to have a ViewBag List Dynamic view with is created from JavaScript

1 Answers1