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

asp.net-ajax asp.net-core-1.1 asp.net-core-mvc entity-framework-core jquery

Question

I'm working on a asp.net core 1.1 project using EF Core.

Starting from a text inserted in a Textbox on my Create.cshtml page (where I use autocomplete function) I want to bind other textbox controls fetching data from my entity framework database and populating other textboxes with their values.

On my Create.cshtml ViewPage I have 2 fields: CityOfBirth and ProvinceOfBirth.

For the sake of simplicity I write the code only for the CityOfBirth. On my Create.cshtml I have:

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

For both textboxes I have implemented the autocomplete functionality both in the 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);

    }

and also in the site.js file

$(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: ""
       },
    });
 });

The autocomplete function is working well. What I'm trying to do now is to populate the other textbox (in my case ProvinceOfBirth) based on the value I've inserted in the textbox CityOfBirthretrieving the data from my database.

Of course, also starting from ProvinceOfBirth and getting filled CityOfBirth should be possible.

For this reason I've written in my Controller the following method:

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

        return Json(query);
    }

The string fetch contains the autocomplete-textbox string, that I want to use to retrieve the other value from the database. The query List (in json format) contains the queried database values. How should I use them now to populate the ProvinceOfBirth textbox?

1
0
4/2/2018 2:03:18 AM

Accepted Answer

I've got it working.

To do that, I've slightly modified my controller method:

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

        return Json(query);
    }

querying down to the provincia property.

Additionally, and this is the core of the solution, I've used the .on('focusout') method like that:

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

For sure I will add some error handling to complete the code .... and invest more time for my knowledge in jQuery & AJAX

0
4/5/2018 11:45:02 PM

Popular Answer

What you can do here is: if autocomplete has any event that raises when you select an item, or you can just make onchange event on that input, and then you should send a get request to controller with ajax. Then in success you just take the data and just go and assign like $('#provinceOfBirth').val(data.province). p.s. you get that data object from ajax response success: function(data)



Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow