Hi ruben00000,
Refer below example.
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()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Customers.ToList());
}
public ActionResult GetData()
{
NorthwindEntities entities = new NorthwindEntities();
return Json(entities.Customers.Take(5).ToList(), JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult ViewData(string name)
{
return View();
}
}
View
@model IEnumerable<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body class="container">
<table id="_tblwellcore" class="table table-vcenter card-table">
<thead class="table-success">
<tr>
<th style="font-size: 80%; font-weight: 700;">No</th>
<th style="font-size: 80%; font-weight: 700;">Data</th>
</tr>
</thead>
<tr>
<td id="_no"></td>
<td id="_data"></td>
</tr>
</table>
<script type="text/javascript">
$(function () {
getdata();
});
function getdata() {
$.ajax({
cache: false,
type: 'GET',
url: '/Home/GetData',
data: {},
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (response) {
var row = $("[id*=_tblwellcore] tbody tr:first-child").clone(true);
$("[id*=_tblwellcore] tbody tr:first-child").remove();
$.each(response, function (i, obj) {
$("td", row).eq(0).html(obj.CustomerID);
var link = '@Url.Action("ViewData", "Home", new { name = "-1" })';
link = link.replace("-1", encodeURIComponent(obj.ContactName));
if (obj.ContactName != null) {
$("td", row).eq(1).html("<a href='" + link + "' target='_blank'><i class='fa fa-eye' aria-hidden='true'></i></a>");
} else {
$("td", row).eq(1).html("<a href='javascript:void(0)'><i class='fa fa-eye-slash' aria-hidden='true'></i></a>");
}
$("[id*=_tblwellcore] tbody").append(row);
row = $("[id*=_tblwellcore] tbody tr:first-child").clone(true);
});
}
})
}
</script>
</body>
</html>
Screenshot
