I am creating ajax table from database. my Controller returning list of object but table is not creating on the page rather it shows json string. Here is my ajax call and view:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<h2>Real Time Values</h2>
<body>
<div>
<table id="tbldata" class="tabledata">
<tr>
<th>Meter Number</th>
<th>Current A</th>
<th>Current B</th>
<th>Current C</th>
<th>Current N</th>
<th>Current Avg</th>
</tr>
</table>
</div>
<script>
$(function () {
$.get(("ShowRealTimeValues", "RealTimeValues", function (data) {
var row;
$.each(data, function (i, v1) {
row += "<tr><td>" + v1.MeterNumber + "</td><td>" + v1.Current_A + "</td><td>" + v1.Current_B + "</td><td>" + v1.Current_C + "</td><td>" + v1.Current_N + "</td><td>" + v1.Current_Avg + "</td></tr>"
});
$("#tbldata").append(row);
}))
})
</script>
</body>
Here is my controller. My controller is returning list of object.
public ActionResult ShowRealTimeValues()
{
DateTime time = DateTime.Now;
var data = myDbContext.RealTimeValues.OrderByDescending(a => a.Time).Take(1).ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
Dont know why table is not creating. there is not any error in console.
You can not use session at the client-side. To manipulate the table you not even need to keep the data in session. A workaround can be
$.ajax({
url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
type: "GET",
success: function (result) {
var theTable="<table id='yourTableId' class='yourTableClass'>";
var theTr="";
for (var i = 0; i < result.length; i++) {
theTr = theTr + "<tr><td>" + result[i] + "</td></tr>";
}
theTable = theTable + theTr + "</table>";
$(".tblContainer").empty();
$(".tblContainer").html(theTable);
}
});
<div class='tblContainer'>
</div>
I guess it is impossible because of the lifecycle.
First of all the HTML page generated on server side after that you get an AJAX result but the HTML page has already fine so you cannot populate your table via Razor because it run different time.
In my opinion you should use JavaSript array instead of Session.
<table id="tbl">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
$.ajax({
url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
type: "GET",
success: function (result) {
var array= result
var html='';
for(var i = 0; i < array.length; i++)
{
html += '<tr><td>' + array[i].Property1+
'</td><td>' + array[i].Property2+ '</td></tr>';
}
$("#tbl").append(html);
}
});
UPDATE
if you have an object you can try this:
$.ajax({
url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
type: "GET",
success: function (result) {
var html='';
html += '<tr><td>' + result.MeterNumber+'</td><td>' + result.Current_A+'</td></tr>';
$("#tbl").append(html);
}
});