How do you get data and bind to a table?

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: