Hi mukesh1,
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();
}
NorthwindEntities db = new NorthwindEntities();
public ActionResult FindSearch(int partner, int minimum_age, int maximum_age, int relegion)
{
List<Employee> userlist = db.Employees.Where(s => s.Country == "USA").ToList();
return PartialView("_EmployeeDetails", userlist);
}
}
Index View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
<div align="center">
<input type="button" value="Details" id="btnDetails" class="btn btn-primary" />
<br />
<br />
<div id="dvPartialView" class="divpartial"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=btnDetails]').on('click', function () {
var Partner = 1;
var Minimum_Age = 1;
var Maximum_Age = 1;
var Relegion = 1;
$.ajax({
url: '@Url.Action("FindSearch", "Home")',
dataType: "html",
data: { "partner": Partner, "minimum_age": Minimum_Age, "maximum_age": Maximum_Age, "relegion": Relegion },
type: "GET",
contentType: "application/json",
success: function (response) {
$('.divpartial').html(response);
},
error: function (err) {
alert(err.responseText);
}
});
});
});
</script>
</body>
</html>
EmployeeDetails Partial View
@model IEnumerable<_WebGrid_PartialView.Employee>
@{
WebGrid grid = new WebGrid(Model, canPage: true);
}
@if (Model.Count() > 0)
{
@grid.GetHtml(tableStyle: "table-design table table-bordered table-hover dataTable", fillEmptyRows: false,
columns: new[]
{
grid.Column(columnName:"FirstName", header:"Name"),
grid.Column(columnName:"EmployeeID", header:"Id"),
grid.Column(columnName:"Country", header:"Country")
})
}
Screenshot
