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

Question

为什么在 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>

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

谢谢。

Answer 1

您的 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 来处理只读操作？