Hi nabilabolo,
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();
}
public JsonResult GetCustomers(string country)
{
var countries = country.Split(',').ToList();
NorthwindEntities entities = new NorthwindEntities();
var result = (from c in entities.Customers
where countries.Any(x => x.Equals(c.Country))
select new
{
Id = c.CustomerID,
Name = c.ContactName,
City = c.City
}).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body class="container">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script ype="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">Open</button>
<br /><br />
<div id="dvCustomers" class="form-group">
<table id="tblCustomers" class="table table-striped table-bordered">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Customer Details Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="checkbox" name="country" value="USA" /> USA
<input type="checkbox" name="country" value="UK" /> UK
<input type="checkbox" name="country" value="Canada" /> Canada
<button id="btnSearch" type="button" class="btn btn-primary btn-sm">Search</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
<script type="text/javascript">
$(function () {
$("#btnSearch").on('click', function () {
$('#dvCustomers').hide();
var selected = [];
$.each($('input[name=country]:checked'), function () {
selected.push($(this).val());
});
$.ajax({
type: 'POST',
url: '/Home/GetCustomers',
datatype: 'JSON',
data: { 'country': selected.join(',') },
success: function (data) {
$('#tblCustomers tbody').empty();
$.each(data, function (i, item) {
var rows = "<tr>" +
"<td>" + item.Id + "</td>" +
"<td>" + item.Name + "</td>" +
"<td>" + item.City + "</td>" +
"</tr>";
$('#tblCustomers tbody').append(rows);
});
$('#dvCustomers').show();
$('#exampleModal').modal('hide');
$('input[name=country]').each(function () {
this.checked = false;
});
},
error: function (r) {
alert(r.responseText);
}
});
});
});
</script>
</body>
</html>
Screenshot
For saving table rows in database refer below article.
