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 CityOfBirth
retrieving 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?
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
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)