Hi SUJAYS,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEmployees(string country)
{
using (NorthwindEntities entities = new NorthwindEntities())
{
var employees = entities.Employees.Where(x => x.Country == country)
.Select(x => new { Text = x.FirstName, Value = x.EmployeeID }).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
}
View
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.SetDropDownlist = function () {
var country = $('#txtCountry').val();
var data = { "country": country };
var config = {
params: data,
headers: { 'Accept': 'application/json' }
};
$http.get("/Home/GetEmployees", config).then(function (response) {
$scope.Employees = response.data;
}, function (response) {
alert(response.responseText);
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Country:<input type="text" id="txtCountry" ng-blur="SetDropDownlist()" />
<select name="Country">
<option value="0">Select Employee</option>
<option ng-repeat="item in Employees" value="{{item.Value}}">{{item.Text}} </option>
</select>
</div>
Screenshot
