How do you get data and bind to a table? - asp.net-core

Question

I am trying to get data from a database and just bind the output to a table. I am using AJAX because some of my other codes won't allow me to mix with the IEnumerable. It doesn't seem to run the command and never trips breakpoints... Not sure what I might be doing wrong. I have scoured the internet and can't seem to find a solution or anything close, just broken code. It is loading the JS and even if I reference JS it still has the same behavior...
Index
#model Rabbit.Application.Models.Onboarding.Client
#{
ViewBag.Title = "Index";
Layout = "~/Areas/Onboarding/Views/Shared/_Layout.cshtml";
}
<h2> Clients</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="OpenAddPopup();">Add New Client</button><br /><br />
<fieldset>
<table table id="tblClient" class="table">
<thead>
<tr>
<th>companyName</th>
<th>PhoneNo</th>
<th>ContactPerson</th>
<th>Email</th>
<th>Address</th>
<th></th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</fieldset>
<script type="text/javascript">
//Load Data in Table when documents is ready
$(document).ready(function () {
$.ajax({
url: "/Clients/GetAllClients",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result)
{
console.log(data);
if (result) {
//itetrate thorugh each record and bind it to td
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += + '<td>' + item.companyName + '</td>'
html += + '<td>' + item.PhoneNo + '</td>'
html += + '<td>' + item.ContactPerson + '</td>'
html += + '<td>' + item.Email + '</td>'
html += + '<td>' + item.Address + '</td>'
html += +'</tr>';
});
$('#tbody').html(html);
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
</script>
Controller
public IActionResult Index()
{
return View();
}
public JsonResult GetAllClients()
{
var clientlist = (from client in _context.Client
select client).ToList();
return Json(clientlist);
}

Answer 1

After I tested it, it seems that this is just your grammar problem.
First,if you don't have a data variable,you need to delete console.log(data);.
Second,you should change html += + '<td>' + item.companyName + '</td>' to html += '<td>' + item.companyName + '</td>'.The same is true for the following, remove the + behind the =.
Third,you should change $('#tbody').html(html); to $('.tbody').html(html);,because you are using class="tbody".And you need to add a } after this,and add ) after the last one }.Because overall you are missing a } and a ).
Fourth，if $(document) reports an error, you can add <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script> before <script type="text/javascript">.
Below is my test code,it works fine：
#model BindTable.Models.Client
<h2> Clients</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="OpenAddPopup();">Add New Client</button><br /><br />
<fieldset>
<table table id="tblClient" class="table">
<thead>
<tr>
<th>companyName</th>
<th>PhoneNo</th>
<th>ContactPerson</th>
<th>Email</th>
<th>Address</th>
<th></th>
</tr>
</thead>
<tbody class="tbody">
</tbody>
</table>
</fieldset>
<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
//Load Data in Table when documents is ready
$(document).ready(function () {
$.ajax({
url: "/Client/GetAllClients",
type: "GET",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result)
{
if (result) {
//itetrate thorugh each record and bind it to td
var html = '';
$.each(result, function (key, item) {
html += '<tr>';
html += '<td>' + item.companyName + '</td>'
html += '<td>' + item.phoneNo + '</td>'
html += '<td>' + item.contactPerson + '</td>'
html += '<td>' + item.email + '</td>'
html += '<td>' + item.address + '</td>'
html += '</tr>';
});
$('.tbody').html(html);
}
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
})
</script>
Test Result: