Question

为什么价值是＆＃39; c＆＃39;对象的成员始终＆＃39; undefined＆＃39;在javascript函数UpdateFields（）？

如果我在控制器中捕获json返回listCities确实具有我期望的值。 listCities在返回时正确填充。

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>

如果你能得到我在这里尝试做的事情并且想要以更好的方式完成它们，那我就听见了。

感谢。

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

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

1 个答案: