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('&lt;option value="' + location.value + '"&gt;' + location.text + '&lt;/option&gt;'); "它有 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 从控制器操作方法返回未定义的主要内容,如果未能解决你的问题,请参考以下文章

从 jquery ajax 调用分配变量返回未定义

Struts 2 操作未将所需结果返回给 Jquery Ajax 调用

jquery Ajax 调用 - 数据参数未传递给 MVC 控制器操作

如何使用 jQuery 和 ASP.NET MVC 从 AJAX 调用返回错误消息?

Ajax 未定义 - Grails jQuery 插件

从 jQuery Ajax 方法返回