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 EmployeeDetail
{
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/
NorthwindEntities db = new NorthwindEntities();
public ActionResult Index()
{
List<EmployeeDetail> employees = db.Employees
.Select(x => new EmployeeDetail
{
Id = x.EmployeeID,
FirstName = x.FirstName,
LastName = x.LastName,
City = x.City,
Country = x.Country
}).ToList();
return View(employees);
}
public JsonResult GetRange(string startDate, string endDate)
{
DateTime? startdate = Convert.ToDateTime(startDate);
DateTime? enddate = Convert.ToDateTime(endDate);
List<EmployeeDetail> employees = db.Employees
.Where(x => x.BirthDate >= startdate && x.BirthDate <= enddate)
.Select(x => new EmployeeDetail
{
Id = x.EmployeeID,
FirstName = x.FirstName,
LastName = x.LastName,
City = x.City,
Country = x.Country
}).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
}
HTML
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<_140593_Html_Table_Date_Range.Models.EmployeeDetail>>" %>
<!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>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
format: "mm/dd/yyyy",
language: "tr"
});
$("#Filter").click(function () {
var startdate = $("#startDate").val();
var enddate = $("#endDate").val();
$.ajax({
type: 'GET',
url: '/Home/GetRange',
datatype: "JSON",
data: { startDate: startdate, endDate: enddate },
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) { debugger; alert(data.responseText); }
});
});
});
</script>
</head>
<body>
<div class="col-md-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default blue" data-toggle="dropdown" id="bdate1">
<span id="search_concept">From</span> <span class="caretuse "></span><i class="fa fa-calendar">
</i>
</button>
</div>
<input type="text" class="form-control datepicker" name="date1" id="startDate" placeholder=""
value="12/08/1948" style="width: 100px">
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default blue" data-toggle="dropdown" id="bdate2">
<span id="search_concept">To</span> <span class="caretuse "></span><i class="fa fa-calendar">
</i>
</button>
</div>
<input type="text" class="form-control datepicker" name="date2" id="endDate" placeholder=""
value="12/12/1960" style="width: 100px">
</div>
</div>
<div class="col-md-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="submit" id="Filter" class="btn btn-default blue" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caretuse "></span>
</button>
</div>
</div>
</div>
<br />
<br />
<table id="example1" class="table table-bordered">
<thead>
<tr>
<th>
EmployeeID
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
</thead>
<tbody>
<%if (Model != null)
{%>
<% 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
