jQuery Ajax 从控制器操作方法返回未定义
Posted
技术标签:
【中文标题】jQuery Ajax 从控制器操作方法返回未定义【英文标题】:jQuery Ajax returning undefined from controller action method 【发布时间】:2021-10-09 09:50:07 【问题描述】:在我的 ASP.NET Core 3.1 应用程序中,我正在使用 jQuery 实现级联 DropDown 功能。第一个 DropDown (Region) 的值更改应填充第二个 DropDown,位置。更改 ddlRegion 的值时,jQuery 正确地点击了 Controller 方法,并且还在 json 列表中返回了结果,但是第二个 DropDown 中的结果被填充为“未定义”。
[下拉 html]
<table style="margin-left:2%;margin-top:2%">
<tr style="width:200px">
<td style="width:100px">Region</td>
<td style="width:300px">
@Html.DropDownList("DDLRegion", new List<SelectListItem>
new SelectListItem Text="-- Select --", Value = "0" ,
new SelectListItem Text="North", Value = "1" ,
new SelectListItem Text="South", Value = "2" ,
new SelectListItem Text="All", Value = "3"
, new @id = "DDLRegion" )
</td>
<td style="width:100px">Location</td>
<td style="width:300px">
@Html.DropDownList("DDLLocation", new List<SelectListItem>
new SelectListItem Text="-- Select --", Value = "0" ,
, new @id = "DDLLocation" )
</td>
</tr>
</table>
[jQuery 代码]
$(document).ready(function () $("#DDLRegion").change(function ()
$("#DDLLocation").empty();
$.ajax(
type: 'GET',
url: '/GetLocations/1',
dataType: 'json',
data: id: $("#DDLRegion").val() ,
success: function (locationsList)
$.each(locationsList, function (i,location)
$('#DDLLocation').append('<option value="'
+ location.Value + '">' +
location.Text + '</option>');
);
,
error: function (ex)
alert('Failed to retrieve locations');
);
return false;
)
);
[控制器代码]
[Route("~/GetLocations/id")]
public JsonResult GetLocations(string id)
List<SelectListItem> locations =
new List<SelectListItem>();
int counter = 0;
string line;
locations.Add(new SelectListItem
Text = "Select",
Value = "0"
);
switch (id)
case "1":
// Read the file and display it line by line.
System.IO.StreamReader file =
new System.IO.StreamReader(@"North_Locations.txt");
while ((line = file.ReadLine()) != null)
locations.Add(new SelectListItem Text = line, Value = counter.ToString() );
counter++;
file.Close();
counter = 0;
line = "";
break;
case "2":
// Read the file and display it line by line.
System.IO.StreamReader file2 =
new System.IO.StreamReader(@"South_Locations.txt");
while ((line = file2.ReadLine()) != null)
locations.Add(new SelectListItem Text = line, Value = counter.ToString() );
counter++;
file2.Close();
counter = 0;
line = "";
break;
return Json(new SelectList(locations,
"Value", "Text"));
在 jQuery 代码中,“位置”是未定义的。如果控制器返回 80 个项目,则位置下拉列表将填充 80 个“未定义”。
【问题讨论】:
结果行似乎没有 Text 属性。您需要检查返回 json。 可能跑题了:你的 url 应该是url: '/GetLocations/1',
而不是 url: '/GetLocations,
,因为你将 id 作为数据传递,所以无论区域如何,它都将始终是 1
。跨度>
我怀疑序列化程序使用 camelCase。试试append('<option value="' + location.value + '">' + location.text + '</option>');
"它有 Text
" ... "它适用于 text
" - 这些不一样 - 这是为什么我们要求查看实际值,而不是只信守诺言。
我编辑了@Izzy 答案以添加此信息。你能接受他的回答吗?
【参考方案1】:
我怀疑序列化程序使用 camelCase。当您探索ajax成功的结果时,第一个字母需要很小。
您还可以简化方法并在回复中返回SelectListItem
。所以你的动作看起来像:
public IActionResult GetLocations(string id)
//you will change the below to match your code
var locations = new List<SelectListItem>
new SelectListItem("First Value", "1"),
new SelectListItem("Second Value", "2"),
new SelectListItem("Third Value", "3"),
;
return Json(locations);
我已经将getJSON
用作:
$(document).ready(function ()
var url = '@Url.Action("GetLocations", "Home")';
var location = $('#DDLLocation');
$("#DDLRegion").change(function()
var id = $(this).val();
$.getJSON(url, id: id , function(response)
location.empty();
$.each(response,
function(index, item)
location.append($('<option></option>').text(item.text).val(item.value));
);
);
);
);
【讨论】:
以上是关于jQuery Ajax 从控制器操作方法返回未定义的主要内容,如果未能解决你的问题,请参考以下文章
Struts 2 操作未将所需结果返回给 Jquery Ajax 调用
jquery Ajax 调用 - 数据参数未传递给 MVC 控制器操作