How do I get asp-items to populate a select when adding select element to a div?

Jaeson 0
Viewed 40

Using Javascript to add a select dropdown list when a button is clicked, but the select isn't being populated with the data from the viewmodel. Essentially this code creates what I want, but the asp-items are not populating the select aside from the default "Select Column Name" option.

How would I get this asp-items to populate from the viewmodel selectlist, "Model.SelColumnNames"?

<script>
$('.addSort').click(function() {
            $('.block:last').before('<div class="block"><select asp-for="SelColumnNameAdditional" asp-items="Model.SelColumnNames" style="width: 30%;"><option value="">Select Column Name</option></select> &ensp; <select style="width: 15%;"><option value="1">Ascending</option><option value="2">Descending</option></select> &ensp; <span class="remove">Remove Option</span></div>');
        });
</script>

Edit: I can already populate it properly as a dropbox in the HTML section of my viewpage using this:

<select asp-for="SelColumnNameAdditional" asp-items="Model.SelColumnNames" style="width: 30%;">
    <option value="">Select Column Name</option>
</select>

I would like the script code to be able to create a div with the same populated dropdown in javascript. When I do that, asp-items doesn't pull from the viewmodel like it does in the HTML code. Why is that?

model-view-controller viewmodel asp.net-mvc javascript html
1 Answers

If you are using Javascript, you need to get data using ajax. This is what I have so far.

Controller/ViewModel

public class JaesonViewModel
{
    public string value { get; set; }
    public string text { get; set; }
}
public class HomeController : Controller
{
    public ActionResult GetViewModel()
    {
        var list = new List<JaesonViewModel>();
        var j = new JaesonViewModel { text = "text1", value = "value1" };
        list.Add(j);
        var j2 = new JaesonViewModel { text = "text2", value = "value2" };
        list.Add(j2);
        return Json(new { Items = list.ToList() }, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index10()  //I am calling index10 to start--the view is index10
    {
        return View();
    }

View

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index10</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.addSort').click(function () {
                $.ajax({
                    type: "GET",
                    url: "/home/GetViewModel",
                    async: false,
                    cache: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: function (jsn) {
                        jQuery.each(jsn.Items, function (index, itemData) {
                            $('.dropdown').append('<option value=' + itemData.value + '>' + itemData.text + '</option>');
                        });
                    },
                    error: function (jqXHR, exception) {
                        var status = jqXHR.status; //400
                        var message = jqXHR.responseText;
                        var ex = exception; // 'abort' for example
                        alert(status + " " + message + " " + ex);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" class="addSort" value="Click Me" />
    <select class="dropdown">
    </select>
</body>
</html>
kblau0
Related