使用 ASP.Net core mvc Visual Studio 2017 从自动完成文本框绑定文本框控件

Question

我正在使用 EF Core 开发 asp.net 核心 1.1 项目。

从我 Create.cshtml 页面（我在其中使用自动完成功能）的文本框中插入的文本开始，我想绑定其他文本框控件，从我的 entity framework 数据库中获取数据并填充其他文本框他们的价值观。

在我的 Create.cshtml ViewPage 上，我有 2 个字段：CityOfBirth 和 ProvinceOfBirth。

为了简单起见，我只为CityOfBirth编写代码。在我的 Create.cshtml 上，我有：

<div class="form-group">
        <label asp-for="CityOfBirth" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="CityOfBirth" class="form-control" autocomplete="off" id="searchCityOfBirth"/>
            <span asp-validation-for="CityOfBirth" class="text-danger"></span>
        </div>
    </div>

对于两个文本框，我都在 Controller:

中实现了自动完成功能

public JsonResult AutocompleteCityOfBirth(string term)
    {

        var cityOfBirth = (from cOB in _listaCIcontext.Listacomuniitaliani.Where(x=>x.Comune.StartsWith(term))
                         select new
                         { value = cOB.Comune, label = cOB.Comune }).ToList();


        return Json(cityOfBirth);

    }

并且也在 site.js 文件中

$(function () {
$("#searchCityOfBirth").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Criminals/AutocompleteCityOfBirth",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.term, value: item.value }
                }));
            },
        });
    },
    delay: 0,
    messages: {
        noResults: "",
        results: function (resultsCount) { }
        //results: ""
       },
    });
 });

自动完成功能运行良好。我现在要做的是根据我在文本框中插入的值填充另一个文本框（在我的例子中 ProvinceOfBirth）CityOfBirth 从我的数据库中检索数据。

当然，从ProvinceOfBirth开始，填满CityOfBirth应该也是可以的。

出于这个原因，我在 Controller 中编写了以下方法：

[HttpPost]
    public JsonResult FillTextBoxes(string fetch)
    {
        var query = (from c in _listaCIcontext.Listacomuniitaliani
                    where c.Comune == fetch
                    select c).ToList();

        return Json(query);
    }

string fetch 包含自动完成文本框字符串，我想用它从数据库中检索其他值。 query 列表（json 格式）包含查询的数据库值。我现在应该如何使用它们来填充 ProvinceOfBirth 文本框？

Answer 1

你可以在这里做的是：如果自动完成有任何事件在你 select 一个项目时引发，或者你可以在该输入上创建 onchange 事件，然后你应该发送一个使用 ajax 获取对控制器的请求。然后成功地获取数据并像 $('#provinceOfBirth').val(data.province) 一样去赋值。 p.s。你从 ajax 响应 success: function(data)

中得到那个 data 对象

Answer 2

我已经开始工作了。

为此，我稍微修改了我的控制器方法：

[HttpGet]
    public JsonResult GetProvinceOfBirth(string fetch)
    {
        var query = (from c in _listaCIcontext.Listacomuniitaliani
                    where c.Comune == fetch
                    select c.Provincia).ToList();

        return Json(query);
    }

查询到 provincia 属性。

此外，这是解决方案的核心，我使用了这样的 .on('focusout') 方法：

$("#searchCityOfBirth").on('focusout', function () {
    $.ajax({
        url: "/Criminals/GetProvinceOfBirth",
        type: "GET",
        dataType: "json",
        data: { fetch: $("#searchCityOfBirth").val()},
        success: function (query) {
            $("#searchProvinceOfBirth").val(query[0]);               
        },
    });      
});

我肯定会添加一些错误处理来完成代码....并在 jQuery & AJAX

中投入更多时间来获取我的知识

Answer 3

更改为： url: "http://" + window.location.hostname + "/Your_Application_Name" + "/Criminals/GetProvinceOfBirth",

使用 ASP.Net core mvc Visual Studio 2017 从自动完成文本框绑定文本框控件

Bind TextBox Controls From Autocomplete TextBox Using ASP.Net core mvc Visual Studio 2017

jquery

asp.net-ajax

entity-framework-core

asp.net-core-mvc

asp.net-core-1.1