Hi sangyongjin88,
You need to refresh the table data on ajax success.
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
Model
public class CustomerModel
{
public string Id { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
Namespaces
using System.Configuration;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View(GetCustomers());
}
[HttpGet]
public JsonResult Edit01()
{
var customers = GetCustomers();
return Json(customers, JsonRequestBehavior.AllowGet);
}
private List<CustomerModel> GetCustomers()
{
List<CustomerModel> customers = new List<CustomerModel>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 5 CustomerID,ContactName,Country FROM Customers ORDER BY NEWID()";
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new CustomerModel
{
Id = sdr["CustomerID"].ToString(),
Name = sdr["ContactName"].ToString(),
Country = sdr["Country"].ToString()
});
}
con.Close();
}
}
return customers;
}
}
View
@model IEnumerable<Refresh_Interval_Email.Models.CustomerModel>
@{
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>
<script type="text/javascript">
$(function () {
setInterval(function () {
Edit01()
}, 1000);
});
function Edit01() {
$.ajax({
url: '@Url.Action("Edit01", "Home")',
type: "GET",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#datatablesSimple tbody').empty();
var tr = "";
$.each(response, function (index, item) {
tr += "<tr><td>" + item.Name + "</td>";
tr += "<td>" + item.Country + "</td></tr>";
});
$('#datatablesSimple tbody').append(tr);
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<table id="datatablesSimple">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.OrderByDescending(x => x.Id))
{
<tr>
<td>@Html.Raw(item.Name)</td>
<td>@Html.Raw(item.Country)</td>
</tr>
}
</tbody>
</table>
</body>
</html>
Sereenshot