将json绑定到视图中的html表答案

【问题标题】：Bind json to html table in view将json绑定到视图中的html表
【发布时间】：2019-10-29 09:54:50
【问题描述】：

我正在尝试将我的数据绑定到我认为的 html 表中，我该怎么做

public ActionResult FlugTopAir()
     {
         DataModel db = new DataModel();
         var test = db.Database.SqlQuery<FlugTopAirData>("exec sp_FlugTopAir").ToList();
         return Json(test, JsonRequestBehavior.AllowGet);

     }

     public class FlugTopAirData
     {
         public string Airline { get; set; }
         public double Spend { get; set; }
         public double TA { get; set; }

     }

【问题讨论】：

标签： javascript asp.net entity-framework model-view-controller

【解决方案1】：

这取决于您使用的客户端框架。如果您正在寻找本机 js，这里是链接：

https://www.w3schools.com/js/js_json_html.asp

【讨论】：

【解决方案2】：

您可以使用 jQuery Ajax 来调用该控制器操作。如下所示

<table class="table">
    <thead>
        <tr>
            <td>Airline</td>
            <td>Spend</td>
            <td>TA</td>
        </tr>
    </thead>
    <tbody id="tableBody"></tbody>
</table>

@section scripts{
    <script type="text/javascript">
    $.ajax({
    url: '@Url.Action("FlugTopAir")',
    type: 'GET',
    cache: false,
        success: function (result) {
            var rows = result.map(function (record) {
                var row = $("<tr></tr>");
                var airline = $("<td></td>").html(record.Airline);
                var spend = $("<td></td>").html(record.Spend);
                var ta = $("<td></td>").html(record.TA);

                row.append(airline, spend, ta);

                return row;
            });

            $("#tableBody").append(rows);
        }
    });
    </script>
}

老实说，您可能应该考虑使用像 JSRender 这样的模板引擎。

或者最简单的方法是返回带有模型的视图，以便您可以使用 Razor 语法从视图中迭代模型

查看（索引.cshtml）

@using MVCTestApp.Models

<table class="table">
    <thead>
    <tr>
        <td>Airline
        <td>Spend</td>
        <td>TA</td>
    </tr>
    </thead>
    @foreach (TestModel testModel in Model)
    {
    <tr>
        <td>@testModel.Airline</td>
        <td>@testModel.Spend</td>
        <td>@testModel.TA</td>
    </tr>
    }
</table>

在控制器中，不返回Json，而是返回View

return View(test);

【讨论】：