Привязка элементов управления TextBox из текстового поля автозаполнения с помощью ASP.Net core mvc Visual Studio 2017

Я работаю над проектом asp.net core 1.1, используя EF Core.

Начиная с текста, вставленного в текстовое поле на моей странице Create.cshtml (где я использую функцию автозаполнения), я хочу связать другие элементы управления текстовым полем, извлекая данные из моей базы данных структуры сущностей и заполняя другие текстовые поля их значениями.

На моей 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?


jquery entity-framework-core asp.net-core-mvc asp.net-ajax asp.net-core-1.1
person Code4Fun    schedule 02.04.2018    source источник
comment
Пошаговая ссылка ниже работала для меня как шарм: learningprogramming.net/net/asp-net-core-mvc/   -  person Almeida    schedule 03.07.2019

Ответы (3)


arrow_upward
1
arrow_downward

Что вы можете сделать здесь: если у автозаполнения есть какое-либо событие, которое возникает при выборе элемента, или вы можете просто создать событие onchange для этого ввода, а затем вы должны отправить запрос на получение контроллеру с помощью ajax. Затем, в случае успеха, вы просто берете данные и просто идете и назначаете как $('#provinceOfBirth').val(data.province). p.s. вы получаете этот объект data из ответа ajax success: function(data)

person Ertan Hasani    schedule 04.04.2018
comment
Привет, Эртан, я добавил следующий код $("#searchCityOfBirth").on('change', function () { $.ajax({ url: "/Criminals/GetProvinceOfBirth", type: "GET", dataType: "json", success: function (data) { $("#searchProvinceOfBirth").val(data.value); }, }); });, но событие изменения не срабатывает, когда я ввожу текст в текстовое поле. Когда я отменяю текст, он срабатывает. Это довольно странно. - person Code4Fun; 05.04.2018
comment
Функция @Code4Fun change срабатывает после того, как вы теряете фокус на этом элементе, чтобы он срабатывал, когда вы начинаете печатать, вы должны input или keyup. Они почти одинаковые, вы можете поискать, и вы найдете то, что вам больше подходит. - person Ertan Hasani; 06.04.2018
comment
Привет, Эртан, большое спасибо. Я дам ему попробовать. Тем временем я решил свою проблему, используя focusout. В моем случае событие должно сработать после того, как я полностью ввел текст. - person Code4Fun; 06.04.2018

arrow_upward
0
arrow_downward

У меня это работает.

Для этого я немного изменил свой метод контроллера:

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

person Code4Fun    schedule 05.04.2018

arrow_upward
0
arrow_downward

Измените на: url: "http://" + window.location.hostname + "/Your_Application_Name" + "/Criminals/GetProvinceOfBirth",

person rpou0830    schedule 09.12.2018