Question

我是MVC的新手，不知道如何解决此问题。

在控制器中，我有一个序列化为JSON的列表（填充有Api数据），我需要使用此JSON数据来填充视图中的下拉列表。

我对于应该从控制器返回什么感到困惑，接下来我该怎么做，我这样做对吗？

现在我有这个：

型号：

public class Tablet {        
    public int Id { get; set; }
    public string ManufactureDate { get; set; }
    public string Description { get; set; }
    public string Country { get; set; }
}

DataController.cs

 Public ActionResult GetData(Tablet tablet)
 {
     List<Tablet> data = new List<Tablet>();

      // ... Code to retrieve the data from API

     string jsonRes = JsonConvert.SerializeObject(data);

     return View(jsonRes);
 }

在视图中，我需要在下拉列表中显示ID：

View.cshtml

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "/Data/GetData/",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">' + '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});  
</script>

Answer 1

尝试此操作，您要设置“值”，而不是为“选项标签”设置“文本”，您必须获取空白菜单项。已使用数据链接和代码对其进行了测试。

s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';

完整的HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "https://api.myjson.com/bins/6jd1s",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';
            }
             $("#dropdownData").html(s);
        }
    });
});  
</script>
</body>
</html>

Answer 2

尝试一下：

DataController：

[HttpGet]
public JsonResult GetData()
{
    List<Tablet> data = new List<Tablet>();

    // ... Code to retrieve the data from your API

    string jsonRes = JsonConvert.SerializeObject(data);

    return new JsonResult(jsonRes);
}

在您的JavaScript中：

 $.ajax({
        url: "/Data/GetData/",
        type: "GET",
        dataType: "json",
        cache: false,
        success: function (data) {
            try {
                var parsedData = JSON.parse(data);

                var $select = $('#dropdownData');
                $.each(parsedData, function(i, dataItem) {
                    $('<option>', {
                        value: dataItem.Id
                    }).html(dataItem.Id).appendTo($select);  // or dataItem.Description, or whatever field you want to display to the user
                });
            }
            catch (err) {
                console.log(err);
            }
        }
    },
    error: function (e) {
        console.log(e);
    }
});

Answer 3

删除行字符串jsonRes = JsonConvert.SerializeObject（data）;

另外，您的方法GetdData（）应该返回JSON。检查以下代码。

public ActionResult GetData(Tablet tablet)
    {
        List<Tablet> data = new List<Tablet>();

        data.Add(new Tablet() { Id = 1, Country = "India", Description = "Test", ManufactureDate = DateTime.UtcNow.ToShortDateString() });
        data.Add(new Tablet() { Id = 1, Country = "Canada", Description = "Test1", ManufactureDate = DateTime.UtcNow.ToShortDateString() });

        //string jsonRes = JsonConvert.SerializeObject(data);

        return Json(data,JsonRequestBehavior.AllowGet);
    }

视图应该像

<select class="dropdown" id="dropdownData"></select>
<script>
$(document).ready(function () {
    $.ajax({
        url: "/Home/GetData/",
        type: 'GET',
        dataType: "json",
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id + '">' + jsonRes[i].Id+ '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});
</script>

在View中从Controller到Dropdown获取JSON数据

3 个答案: