Question

我的控制器是这样的：

public JsonResult Index()
        {
            .....
            return Json(listItem, JsonRequestBehavior.AllowGet);           
        }

结果是

[
  {
   "ExtensionData": {},
    "Code": "40",
    "Name": "Alex"
  },
  {
    "ExtensionData": {},
    "Code": "40",
    "Name": "Tom"
  } 
 // and more ...
]

如何在HTML表格的controller View中获取并显示上面(Index.cshtml)的结果？

Answer 1

嗯，有一个名为DataTables的非常好的插件，可以用来显示来自Controller的JSON格式的数据。我已经为您准备了一个示例代码项目，该项目可以在我的存储库here中找到。您可以运行该项目，然后查看它是否满足您的需求。我还分享了运行项目所需的代码。希望这对您有帮助。显然，您将需要根据对DataTable的要求定制CSS。干杯！

型号：

using System.Collections.Generic;

namespace DataTablesExample
{
    public class ExtensionsData
    {
        public List<string> ExtensionData=new List<string>(); 
        public string Code { get; set; }
        public string Name { get; set; }
    }
}

控制器：

    public ActionResult ExtensionData()
    {
        return View();
    }

    public JsonResult get_extensiondata()
    {
        List<ExtensionsData> extensionData = new List<ExtensionsData>();

        //Example of how you could intialize your list
        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "40",
            Name = "Alex"
        });

        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "40",
            Name = "Tom"
        });

        extensionData.Add(new ExtensionsData
        {
            ExtensionData = { "1", "2" },
            Code = "10",
            Name = "Bunny"
        });

        var data = extensionData;
        return Json(extensionData, JsonRequestBehavior.AllowGet);
    }

查看：

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.4.1.js"></script>
        <link href="~/Content/bootstrap4.min.css" rel="stylesheet" />
        <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>*@

    <!-- CDN LINKS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    <div class="jumbotron">
        <h1>DataTable Example</h1>
        <p class="lead">A project dedicated to data table example in MVC</p>
    </div>
    <br />
    <center>
        <div style="width: auto; border: 1px solid black; padding: 3px" ;>
            <table id="dataTable">
                <thead>
                    <tr>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Extension Data</th>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Code</th>
                        <th style="width: auto; border: 1px solid black; padding: 3px" ;>Name</th>
                    </tr>
                </thead>
            </table>
        </div>
    </center>
    <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    "url": "@Url.Action("get_extensiondata", "Home")",
                    "method": "post",
                    "dataType" : "json",
                    success: function (data) {
                        $('#dataTable').DataTable({
                            paging: true,
                            sort: true,
                            searching: true,
                            data:data,
                            columns: [
                                { 'data': 'ExtensionData'},
                                { 'data': 'Code' },
                                { 'data': 'Name' }
                            ]
                        });
                    }
                });
            });
    </script>
</body>
</html>

样本输出：

Answer 2

尝试一下，假设您在html中的表格为

<table class="table table-striped">
        <thead>
        <tr>
        <th>Code</th>
        <th>Name</th>
        </tr>
        </thead>
        <tbody></tbody>
</table>

//要从服务器获取数据，请使用ajax并添加到表中，如下所示。

<script>
    $(document).ready(function () {

            var url = "url to action of controller";
            $.ajax(url).done(function (data) {
                var tr;
           //Append each row to html table
            for (var i = 0; i < data.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + data[i].Code + "</td>");
                tr.append("<td>" + data[i].Name + "</td>");
                $('table').append(tr);
             }

            }).fail(function (data) {

            });

        });
    });
</script>

在HTML表中显示JSON数据

2 个答案: