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
For using Entity Framework in ASP.Net Core MVC refer below article.
Model
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { 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 JsonResult GetProducts([FromBody] SliderValue value)
{
var products = (from product in this.Context.Products
where product.ProductID >= value.Start && product.ProductID <= value.End
select product).ToList();
return Json(products);
}
public class SliderValue
{
public int Start { get; set; }
public int End { get; set; }
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
</head>
<body>
<form asp-action="Index" asp-controller="Home">
<div id="price_slider_value" style="width: 100%"></div>
<div id="price_slider"></div>
<hr />
<table id="tblProducts">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
var min = 0;
var max = 100;
function SetSlider() {
//Display the minimum and maximum values.
$("#price_slider_value").html("Rs." + min + " - Rs." + max);
//Initialize the slider.
$("#price_slider").slider({
min: min,
max: max,
step: 1,
values: [min, max],
slide: function (event, ui) {
if ((ui.values[0] + 5) >= ui.values[1]) {
return false;
}
var start = parseInt(ui.values[0]);
var end = parseInt(ui.values[1]);
$("#price_slider_value").html("Rs." + start + " - Rs." + end);
var obj = {};
obj.Start = parseInt(ui.values[0]);
obj.End = parseInt(ui.values[1]);
$.ajax({
url: '/Home/GetProducts/',
data: JSON.stringify(obj),
type: "POST",
contentType: 'application/json;charset=utf-8',
success: function (response) {
$('[id*=tblProducts] tbody').empty();
if (response.length > 0) {
$.each(response, function (i, item) {
var id = item.ProductID;
var name = item.ProductName;
var price = item.UnitPrice;
var row = $("<tr />");
row.append("<td>" + id + "</td><td>" + name + "</td><td>" + price + "</td>");
$('[id*=tblProducts] tbody').append(row);
});
}
else {
var row = $("<tr />");
row.append("<td colspan='3' align='center'>No record found.</td>");
$('[id*=tblProducts] tbody').append(row);
}
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
}
});
}
$(function () {
SetSlider();
});
</script>
</body>
</html>
Screenshot
