使用ASP.NET MVC和JQuery自动完成发布外键？

Question

我想知道发布外键的最佳做法.

我有这个模型.

public class Country {
    public int Id {  get;  set;}
    public int Description {  get;  set;}
}
Public class City {
    public int Id{get; set;}
    public string Description{get; set;}
    public Country Country {get; set;}
}

现在在我的城市View中,我想有一个下载,不会在第一次加载时加载所有国家,但我想做某种自动完成,然后我看到了JQuery的自动完成方法,但是我不知道如何在我的模型中绑定它.

有人可以给我一些建议吗？

Answer 1

视图

您需要在View中提供的所有内容都是文本框,例如:

@Html.TextBoxFor(m => m.Country.Id, new { id="CountryId" })

在我进一步讨论之前,我假设你的Description属性可能是一个Name属性,而在英语中,使用Description意思Name是有点误导.

JQuery的

使用JQuery,您需要做两件事,首先,您需要将自动完成功能附加到文本框中:

$('#CountryId').autocomplete({
    source: function(request, response) {
        $.get('@Url.Action("GetCountries", "MyController")', 
            { term: request.term }, 
            function(data) { 
                response($.map(data, function (item) {
                    return {
                        label: item.Label,
                        value: item.Value
                    }
                }));
            });
    },
    minLength: 2
})

该response函数是一个自动完成回调函数,可以执行一些操作,这些文档都在这里.

当您有一个自动完成时,此方法有效,但如果您的页面上有多个自动完成,或者只想编写一个脚本以在您需要的每个输入上附加自动完成,则可以使用类似于此的内容:

@Html.TextBoxFor(m => m.Description, new { 
    data-autocomplete-url = @Url.Action("GetCountries", "MyController" })

使用这个JQuery:

$('*[data-autocomplete-url]') 
    .each(function () { 
        $(this).autocomplete({ 
            source: function(request, response) {
                $.get($(this).data("autocomplete-url"), ...);
        });
    });

调节器

最后,控制器中的action方法:

public JsonResult GetCities(string term) {
    var items = context.Cities
        .Where(x => x.Description.Contains(term))
        .Select(x => new { Label = x.Id, Value = x.Description })
        .Take(10);

    return Json(items, JsonRequestBehaviour.AllowGet);
}

context你的存储库在哪里 在你的情况下,我认为它是一个实体框架DbContext.该.Take()方法将指示将多少值发送回客户端,保持此数字较低可能有助于自动完成的反应性,但不会为短搜索术语返回大的结果集.

如上所述,您应该尝试确保您的变量具有详细的名称.

这里还有一个来源与您正在做的事情没有直接关系,但可能派上用场.