Hi rani,
Using the below links i have created the example.
Check this example. Now please take its reference and correct your code.
Models
Country
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
State
public class State
{
public int StateId { get; set; }
public string StateName { get; set; }
public int CountryId { get; set; }
}
DbContext
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<Country> Countries { get; set; }
public DbSet<State> States { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult BindCountries([FromBody]AutoDetails auto)
{
var countries = (from country in this.Context.Countries
where country.CountryName.StartsWith(auto.prefix)
select new
{
label = country.CountryName,
val = country.CountryId
}).ToList();
return Json(countries);
}
[HttpPost]
public IActionResult BindStates([FromBody]AutoDetails auto)
{
var states = (from state in this.Context.States
where state.StateName.StartsWith(auto.prefix)
&& state.CountryId == auto.parentId
select new
{
label = state.StateName,
val = state.StateId
}).ToList();
return Json(states);
}
public class AutoDetails
{
public string prefix { get; set; }
public int parentId { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("[id$=txtCountry]").autocomplete({
source: function (request, response) {
var myData = {
"prefix": request.term
};
AjaxCall("/Home/BindCountries/", myData, response)
},
select: function (e, i) {
$("[id$=hfCountry]").val(i.item.val);
$("[id$=txtState]").removeAttr("disabled");
$("[id$=txtState]").focus();
},
minLength: 1
});
$("[id$=txtState]").autocomplete({
source: function (request, response) {
var myData = {
"prefix": request.term,
"parentId": $("[id$=hfCountry]").val()
};
AjaxCall("/Home/BindStates/", myData, response)
},
select: function (e, i) {
$("[id$=hfState]").val(i.item.val);
},
minLength: 1
});
});
function AjaxCall(url, myData, response) {
$.ajax({
url: url,
data: JSON.stringify(myData),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (r) {
response($.map(r, function (item) {
return item;
}))
},
error: function (r) {
alert(r.responseText);
},
failure: function (r) {
alert(r.responseText);
}
});
}
</script>
</head>
<body>
Country: <input type="text" id="txtCountry" />
<input type="hidden" name="hfCountry" id="hfCountry" />
<br /><br />
State: <input type="text" id="txtState" disabled="disabled" />
<input type="hidden" name="hfState" id="hfState" />
</body>
</html>
Screenshot
