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
Model
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Namespaces
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Newtonsoft.Json;
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult AjaxMethod()
{
List<Customer> customers = this.Context.Customers.Take(15).ToList();
List<SelectListItem> countries = this.Context.Customers.Where(x => x.Country != null)
.Select(x => new SelectListItem
{
Text = x.Country,
Value = x.Country
}).Distinct().ToList();
object[] data = new object[] { customers, countries };
return Json(JsonConvert.SerializeObject(data));
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<br />
<div class="container">
<table id="tblCustomers" class="table">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var datas = eval(response);
$("#tblCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: datas[0],
columns: [
{ 'data': 'CustomerID' },
{ 'data': 'ContactName' },
{ 'data': 'City' },
{
'data': 'Country',
render: function (data, type, row, meta) {
var country = data.toLowerCase();
var countries = $("<select class='country' multiple></select>");
$.each(datas[1], function (i, item) {
var option = $("<option />");
option.html(this.Text);
option.val(this.Value);
if (this.Text.toLowerCase() == country) {
option.attr("selected", "selected")
}
countries.append(option);
});
return countries[0].outerHTML;
}
}
]
});
$('.country').multiselect({
includeSelectAllOption: true,
enableFiltering: false
})
}
});
});
</script>
</body>
</html>
Screenshot
