Question

我有两张表Student {Id,cityId...}和City {cityId,Name}。我希望字段city name在创建和编辑视图时从tblCity自动填充。

添加ID：

 @Html.EditorFor(model => model.City.CityName, new {  id = "autoCity"  })

我尝试了JSON，但没有回复：

 public ActionResult AutoComplete(String term)
        {
    var cities = from d in db.Cities
                             orderby d.CityName
                             select d;
                var search = db.Cities.Where(s => s.CityName.Contains(term)).Take(2).Select(l => new { label = l.CityName });

                if (!String.IsNullOrEmpty(term))
                {               
                    cities = cities.Where(s => s.CityName.Contains(term));
                }
                return Json(cities, JsonRequestBehavior.AllowGet);
}

在我的观点上：

$("#autoCity").autocomplete({
        source: "/Student/AutoComplete",
        minLenght: 2
    });

on mu _layout我打电话：

 @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
 @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

如何在这里组合Ajax？我在AutoComplete func上做错了什么？

通过替换

解决：视图：

<div class="form-group">
            @Html.LabelFor(model => model.City.CityID, "City", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.City.CityName,
        new
        {
            @class = "autocomplete-with-hidden",
            data_url = Url.Action("GetListForAutocomplete", "Student")
        })
                @Html.HiddenFor(model => model.CityID)
                @Html.ValidationMessageFor(model => model.CityID)
            </div>
        </div>
@section Scripts {
    <script>
        $(function () {
            $('.autocomplete-with-hidden').autocomplete({
                minLength: 0,
                source: function (request, response) {
                    var url = $(this.element).data('url');
                    $.getJSON(url, { term: request.term }, function (data) {
                        response($.map(data, function (item) {
                            return { value: item.value, id: item.id }
                        }));
                    })
                },
                select: function (event, ui) {
                    $(event.target).next('input[type=hidden]').val(ui.item.id);
                },
                change: function (event, ui) {
                    if (!ui.item) {
                        $(event.target).val('').next('input[type=hidden]').val('');
                    }
                }
            });
        });
    </script>

}

控制：

public JsonResult GetListForAutocomplete(string term)
        {
            City[] matching = string.IsNullOrWhiteSpace(term) ?
                db.Cities.ToArray() :
                db.Cities.Where(p => p.CityName.StartsWith(term)).ToArray();

            return Json(matching.Select(m => new
            {
                id = m.CityID,
                value = m.CityName,
                label = m.ToString()
            }), JsonRequestBehavior.AllowGet);
        }

MVC5 jQuery自动完成插件通过Ajax for field

0 个答案: