在View中从Controller到Dropdown获取JSON数据 [英] Get JSON data from Controller to Dropdown in View

问题描述

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

I am new to MVC and do not know how to solve this problem.

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

In a controller I have a list (filled with Api data) serialized to JSON, I need to use this JSON data do populate a dropdown in a View.

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

I am confused as to what should I return from the controller, what should I be doing next, am I doing this right?

现在我有这个:

型号:

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

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:

In the view I need to show the ID in a dropdown:

View.cshtml

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>

推荐答案

删除行字符串jsonRes = JsonConvert.SerializeObject(data);

Remove the line string jsonRes = JsonConvert.SerializeObject(data);

另外，您的方法GetdData()应该返回JSON.检查以下代码.

Also your method GetdData() should return JSON. Check the following code.

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数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！