Hi Ruben12345,
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
Model
public class Employees
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
List<Employees> employees = (from e in entities.Employees
select new Employees
{
Id = e.EmployeeID,
FirstName = e.FirstName,
LastName = e.LastName,
City = e.City,
Country = e.Country
}).ToList();
return View(employees);
}
public JsonResult GetCountries()
{
NorthwindEntities entities = new NorthwindEntities();
var countries = entities.Employees.Select(x => new { Id = x.Country, Text = x.Country }).Distinct();
return Json(countries, JsonRequestBehavior.AllowGet);
}
public JsonResult GetEmployees(string country)
{
NorthwindEntities entities = new NorthwindEntities();
List<Employees> employees = (from e in entities.Employees
where e.Country == country
select new Employees
{
Id = e.EmployeeID,
FirstName = e.FirstName,
LastName = e.LastName,
City = e.City,
Country = e.Country
}).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<_Filter_HtmlTable_DropDownt_Ajax.Models.Employees>>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'GET',
url: '/Home/GetCountries',
datatype: 'JSON',
data: {},
success: function (data) {
$('#employeeDropDownList').empty();
$('#employeeDropDownList').append("<option value='0'>Select</option>");
$.each(data, function (i, item) {
$('#employeeDropDownList').append("<option value='" + item.Id + "'>" + item.Text + "</option>");
});
},
error: function (data) { alert(data.responseText); }
});
$("#employeeDropDownList").change(function () {
$.ajax({
type: 'GET',
url: '/Home/GetEmployees',
datatype: 'JSON',
data: { 'country': $(this).val() },
success: function (data) {
$('#example1 tbody').empty();
$.each(data, function (i, item) {
var rows = "<tr>" +
"<td>" + item.Id + "</td>" +
"<td>" + item.FirstName + "</td>" +
"<td>" + item.LastName + "</td>" +
"<td>" + item.City + "</td>" +
"<td>" + item.Country + "</td>" +
"</tr>";
$('#example1 tbody').append(rows);
});
},
error: function (data) { alert(data.responseText); }
});
});
});
</script>
</head>
<body>
<div class="col-md-3">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caretuse "></span>
</button>
</div>
<select id="employeeDropDownList" name="employeeDropDownList" class="form-control select2 select2-hidden-accessible"
style="width: 100%;" tabindex="-1" aria-hidden="true">
<option value="0">Select</option>
</select>
</div>
</div>
<br />
<br />
<table class="table table-bordered" id="example1">
<thead>
<tr>
<th>
EmployeeID
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
</thead>
<tbody>
<% foreach (var item in Model)
{ %>
<tr>
<td>
<%: item.Id %>
</td>
<td>
<%: item.FirstName %>
</td>
<td>
<%: item.LastName %>
</td>
<td>
<%: item.City %>
</td>
<td>
<%: item.Country %>
</td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
Screenshot
