您如何获取数据并绑定到 table？

Question

我正在尝试从数据库中获取数据并将输出绑定到 table。我正在使用 AJAX，因为我的一些其他代码不允许我与 IEnumerable 混合使用。它似乎没有运行命令并且从不触发断点......不确定我可能做错了什么。我已经搜索了互联网，似乎找不到解决方案或任何接近的东西，只是损坏的代码。它正在加载 JS，即使我引用 JS，它仍然具有相同的行为...

索引

 @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>

控制器

public IActionResult Index()
{
    return View();
}

public JsonResult GetAllClients()
{
            
    var clientlist = (from client in _context.Client
                       select client).ToList();
    return Json(clientlist);
}

Answer 1

我测试了一下，看来这只是你的语法问题。

首先，如果没有数据变量，需要删除console.log(data);。

其次，把html += + '<td>' + item.companyName + '</td>'改成html += '<td>' + item.companyName + '</td>'。下面同理，去掉=后面的+。

第三，你应该把$('#tbody').html(html);改成$('.tbody').html(html);，因为你用的是class="tbody"。而且你需要在这后面加一个}，然后加上) 在最后一个 } 之后。因为总的来说你缺少一个 } 和一个 )。

第四，如果$(document)报错，可以在<script type="text/javascript">前加<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>.

下面是我的测试代码，运行正常：

@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>

测试结果：

您如何获取数据并绑定到 table？

How do you get data and bind to a table?

asp.net-ajax

asp.net-core