javascript之$.ajax 成功 : value is always undefined

为什么在 javascript 函数 UpdateFields() 中“c”对象成员的值总是“未定义”？

如果我在 Controller listCities 中捕获 json 返回值，它确实具有我期望的值。返回时正确填充了 listCities。

城市模型.cs

namespace AutoCompleteInMVCJson.Models 
{ 
    public class CityModel 
    { 
        public int Id { get; set; } 
        public string City { get; set; } 
        public string State { get; set; } 
        public string Zip { get; set; } 
    } 
} 

HomeController.cs

namespace AutoCompleteInMVCJson.Controllers 
{ 
    public class HomeController : Controller 
    { 
 
        [HttpGet] 
        public ActionResult Index() 
        { 
            return View(); 
        } 
 
        [HttpPost] 
        public JsonResult Index(string s) 
        { 
 
            List<CityModel> cities = new List<CityModel>() 
            { 
                new CityModel {Id=1, City="Cincinnati", State="Ohio", Zip="c-oh" }, 
                new CityModel {Id=2, City="Miami", State="Florida", Zip="33114" }, 
                new CityModel {Id=3, City="Miami", State="Florida", Zip="33125" }, 
                new CityModel {Id=4, City="Atlanta", State="Georgia", Zip="a-ga" }, 
                new CityModel {Id=5, City="Chicago", State="Illinois", Zip="c-il"}, 
                new CityModel {Id=6, City="Seattle", State="Washington", Zip="s-wa"}, 
                new CityModel {Id=7, City="Culabra", State="Puerto Rico", Zip="c-pr" }, 
                new CityModel {Id=8, City="Key West", State="Flordia", Zip="kw-fl" } 
            }; 
 
            var listCities = ( 
                    from c in cities 
                    where c.City.ToUpper().Contains(s.ToUpper()) 
                    select new { c.Id, c.City, c.State, c.Zip } 
                ); 
            return Json(listCities, JsonRequestBehavior.AllowGet); 
        } 
    } 
} 

索引.cshtml @model AutoCompleteInMVCJson.Models.CityModel

@{ 
    ViewBag.Title = ""; 
} 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function () { 
        $("#City").autocomplete({ 
            source: function (request, response) { 
                $.ajax({ 
                    url: "/Home/Index", 
                    type: "POST", 
                    dataType: "json", 
                    data: { s: request.term }, 
                    success: function (lst) { 
                        response($.map(lst, function (c) { 
                            return { label: c.Id + "//" + c.City + "//" + c.State + "//" + c.Zip, value: c.City }; 
                        })) 
                    } 
                }) 
            }, 
            messages: { noResults: "", results: function () { return (""); } } 
        }); 
    }) 
</script> 
 
 
 
@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal"> 
        <hr /> 
        <div class="form-group"> 
            <div class="col-md-12"> 
                @Html.TextBoxFor(m => m.Id, new { @class = "hidden" }) 
            </div> 
        </div> 
        <div class="form-group"> 
            <div class="col-md-12"> 
                @Html.TextBoxFor(m => m.City, new { @class = "form-control" }) 
            </div> 
        </div> 
        <div class="form-group"> 
            <div class="col-md-12"> 
                @Html.TextBox("State") 
            </div> 
        </div> 
        <div class="form-group"> 
            <div class="col-md-12"> 
               @Html.TextBox("Zip") 
           </div> 
       </div> 
    </div> 
} 
 
 
<script type="text/javascript"> 
    var x = document.getElementById('City'); 
 
    x.addEventListener("blur", UpDateFields, true); 
 
    function UpDateFields() { 
        $.ajax({ 
            url: "/Home/Index" 
            , type: 'post' 
            , data: { s: $('#City').val() } 
            , success: function (c) { 
                $('#Id').val(c.Id); 
                $('#State').val(c.State); 
                $('#Zip').val(c.Zip); 
                alert("//" + c.Id.val() + "//" + c.City + "//" + c.State + "//" + c.Zip + "//") 
            } 
        }); 
    } 
</script> 

如果你能得到我在这里想要做的事情，并且有更好的方法来完成它，我会洗耳恭听。

谢谢。

请您参考如下方法:

您的 linq 查询总是会返回一个列表，即使只有一个项目匹配。

您对/Home/Index 进行了两次 ajax 调用。在第一种情况下，您正确地处理了返回的 json 列表:

   success: function (lst) { 
                        response($.map(lst, function (c) { 
                            return { label: c.Id + "//" + c.City + "//" + c.State + "//" + c.Zip, value: c.City }; 
                        })) 
                    } 

在第二种情况下，您期望返回的不是单个 json 对象。

 success: function (c) { 
                $('#Id').val(c.Id); 
                $('#State').val(c.State); 
                $('#Zip').val(c.Zip); 
                alert("//" + c.Id.val() + "//" + c.City + "//" + c.State + "//" + c.Zip + "//") 
            } 

您也需要处理第二种情况下的列表。

旁注:为什么要使用 POST 来处理只读操作？