Привязать JSON к таблице HTML в представлении

Question

Я пытаюсь связать свои данные с 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; }

     }

Answer 1

Вы можете использовать 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 для итерации по модели из представления

View (Index.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);

Answer 2

Это будет зависеть от клиентской части, которую вы используете.Если вы ищете нативный js, вот ссылка:

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