C# 在HTML表中显示JSON数据_C#_Html_Json

C# 在HTML表中显示JSON数据

c# html json

C# 在HTML表中显示JSON数据,c#,html,json,C#,Html,Json,我的控制器是这样的： public JsonResult Index() { ..... return Json(listItem, JsonRequestBehavior.AllowGet); } 结果是 [ { "ExtensionData": {}, "Code": "40", "Name": "Alex" }, { "ExtensionData

我的控制器是这样的：

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

结果是

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

如何在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>


$（文档）.ready（函数（）{
var url=“控制器操作的url”；
$.ajax（url）.done（函数（数据）{
var-tr；
//将每一行追加到html表中
对于（变量i=0；i
好吧，有一个非常好的插件，名为，它可以用来显示来自控制器的数据，以JSON的形式出现。我为您准备了一个示例代码项目，可以在我的存储库中找到。你可以运行这个项目，看看它是否满足你的需要。我还分享了运行该项目所需的代码。我希望这能帮助你满足你的要求。显然，您需要根据您对数据表的需求定制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; }
    }
}

使用System.Collections.Generic；
名称空间数据表示例
{
公共类扩展数据
{
公共列表扩展数据=新列表（）；
公共字符串代码{get；set；}
公共字符串名称{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);
    }

public ActionResult ExtensionData（）
{
返回视图（）；
}
public JsonResult get_extensiondata（）
{
列表扩展数据=新列表（）；
//如何初始化列表的示例
添加（新的扩展数据
{
ExtensionData={“1”，“2”}，
Code=“40”，
Name=“Alex”
});
添加（新的扩展数据
{
ExtensionData={“1”，“2”}，
Code=“40”，
Name=“汤姆”
});
添加（新的扩展数据
{
ExtensionData={“1”，“2”}，
Code=“10”，
Name=“Bunny”
});
var数据=扩展数据；
返回Json（extensionData，JsonRequestBehavior.AllowGet）；
}

视图：
@{
ViewBag.Title=“主页”；
布局=空；
}
指数
@*
*@
数据表示例
一个致力于MVC中数据表示例的项目


扩展数据
代码
名称
$（文档）.ready（函数（）{
$.ajax({
“url”：“@url.Action（“获取扩展数据”、“主页”），
“方法”：“发布”，
“数据类型”：“json”，
成功：功能（数据）{
$（'#dataTable'）。dataTable({
是的，
排序：对，
搜索：是的，
数据：数据，
栏目：[
{'data'：'ExtensionData'}，
{“数据”：“代码”}，
{“数据”：“名称”}
]
});
}
});
});

样本输出：
检查您是否想要
@{
    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>