$ .ajax成功：值始终未定义

Question

Why is the value to the 'c' object's member always 'undefined' in the javascript function UpdateFields()?

If I trap the json return in the controller listCities does have the values I would expect. listCities is correctly populated at the return.

CityModel.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);
        }
    }
}

index.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>

If you can get what I'm trying to do here and have thougnts on a better way to get it done them I all ears.

Thanks.

Answer 1

Your linq query is always going to return a list, even when there is only one item matched.

You make two ajax calls to /Home/Index. In the first case you rightly handle the returned json list:

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

In the second case you expect a single json object, which isn't what comes back.

 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 + "//")
            }

You need to handle the list in the second case too.

On a side note: Why are you using a POST to handle a read only operation?