Hi 65sametkaya65
Please refer below sample 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 OrderModel
{
public int OrderId { get; set; }
public string OrderDate { get; set; }
public decimal? Freight { get; set; }
public string Country { get; set; }
}
Controller
public ActionResult Index()
{
using (NORTHWINDEntities entities = new NORTHWINDEntities())
{
List<Customer> customers = (from customer in entities.Customers.Take(5)
select customer).ToList();
return View(customers);
}
}
[HttpPost]
public JsonResult GetData(string customerId)
{
NORTHWINDEntities entities = new NORTHWINDEntities();
List<OrderModel> orders = (from order in entities.Orders.AsEnumerable()
where order.CustomerID == customerId
select new OrderModel
{
OrderId = order.OrderID,
OrderDate = order.OrderDate.Value.ToShortDateString(),
Freight = order.Freight,
Country = order.ShipCountry
}).Take(5).ToList();
return Json(orders);
}
View
@model List<Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body class="container">
<br /><br />
@foreach (var customer in Model)
{
<button class="btn btn-outline-warning" style="font-size:15px" id="liste" data-id="@customer.CustomerID">@customer.ContactName</button>
}
<hr />
<table id="tblOrders" class="table table-bordered">
<thead>
<tr>
<th>Order Id</th>
<th>Order Date</th>
<th>Freight</th>
<th>Country</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).on("click", ".btn-outline-warning", function () {
$.ajax({
type: "POST",
url: "/Home/GetData",
data: '{customerId:"' + $(this).data('id') + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$('#tblOrders tbody').empty();
var rows = '';
$.each(r, function (index, item) {
var orderId = item.OrderId;
var orderDate = item.OrderDate;
var freight = item.Freight;
var country = item.Country;
rows += "<tr><td>" + orderId + "</td><td>" + orderDate + "</td><td>" + freight + "</td><td>" + country + "</td></tr>";
});
$('#tblOrders tbody').append(rows);
},
error: function (r) {
alert(r.responseText);
}
});
});
</script>
</body>
</html>
Screenshot
