Hi rani,
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
Namespaces
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetEmployees(string from, string to)
{
List<Employee> employees = new List<Employee>();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees WHERE BirthDate BETWEEN @From AND @To";
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@From", Convert.ToDateTime(from));
cmd.Parameters.AddWithValue("@To", Convert.ToDateTime(to));
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
employees.Add(new Employee
{
Id = Convert.ToInt32(sdr["EmployeeID"]),
Name = sdr["FirstName"] + " " + sdr["LastName"],
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString()
});
}
}
con.Close();
}
}
return Json(employees);
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<rzslider rz-slider-model="rangeSlider.value" rz-slider-options="rangeSlider.options"></rzslider>
<button type="button" ng-click="Search()">Search</button>
<hr />
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="employee in Employees">
<td>{{employee.Id}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.City}}</td>
<td>{{employee.Country}}</td>
</tr>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
<script type="text/javascript" src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['rzSlider'])
app.controller('MyController', function ($scope, $http) {
var dates = [];
var year = 1945;
for (var i = 1; i <= 25; i++) {
dates.push(new Date(year, 0, 1));
year = year + 1;
}
$scope.end = dates[dates.length - 1];
$scope.rangeSlider = {
value: dates[0],
options: {
stepsArray: dates,
translate: function (date) {
if (date != null)
return date.toDateString();
return '';
}
}
};
$scope.Search = function () {
$http({
method: 'POST',
url: 'Home/GetEmployees',
params: { from: $scope.rangeSlider.value, to: $scope.end }
}).then(function (response) {
$scope.Employees = response.data;
});
}
});
</script>
</div>
</body>
</html>
Screenshot
