从 Controller 获取 JSON 数据到 View 中的 Dropdown
我是 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; }
}
数据控制器.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：
查看.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>
慕妹32420033回答
-
婷婷同学_
试试这个，你正在设置值，你没有为选项标签设置文本，你必须得到空白菜单项。已经使用你的数据链接和代码对其进行了测试。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> -
郎朗坤
删除行 string 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> -
慕哥6287543
尝试这个：数据控制器：[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); }});
随时随地看视频慕课网APP
相关分类
C#