將 select 元素添加到 div 時，如何獲取 asp-items 來填充 select？

Question

單擊按鈕時，使用 Javascript 添加 select 下拉列表，但 select 未填充來自視圖模型的數據。 基本上這段代碼創建了我想要的，但是除了默認的“選擇列名”選項之外，asp-items 沒有填充 select。 我如何讓這個 asp 項目從視圖模型選擇列表“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>

Answer 1

如果您使用的是 Javascript，則需要使用 ajax 獲取數據。 這就是我到目前為止所擁有的。

控制器/視圖模型

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();
    }

看法

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

將 select 元素添加到 div 時，如何獲取 asp-items 來填充 select？

問題描述

1 個解決方案

解決方案1
0 2022-09-07 00:33:55

將 select 元素添加到 div 時，如何獲取 asp-items 來填充 select？

問題描述

1 個解決方案

解決方案1 0 2022-09-07 00:33:55

解決方案1
0 2022-09-07 00:33:55