如何将 `json` 数据从控制器传递到视图并使用它来形成 table？

Question

我试图通过 Ajax 将列表作为 json 字符串从控制器传递到视图，并希望以 table 格式显示 json 字符串，但我只是在视图中得到普通的 json 字符串。

控制器代码

[HttpGet]
        public JsonResult GetRegRequests()
        {
            var model = new TaskManagementEntities().RegRequests.ToList();
            return Json(model,JsonRequestBehavior.AllowGet);
        }

这是视图的代码。

 <div id="showRequest">
        <table class="table-responsive reqtab">
            <thead class="thead-dark">
            <th>Req ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>User Name</th>
            <th>Password</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

和脚本标签

<script>
    $.ajax({
        cache: false,
        type: 'GET',
        url: @Url.Action("MasterAdmin", "Index"),
        dataType: 'json',
        success:
            function (result) {
                console.log(result);
                $(".reqtab tbody").append("<tr><td>" + result.first_name + "</td><td>" + result.last_name + "</td><td>" + result.user_name +"</td><td>"+ result.password+"</td></tr>")
            }
    })
</script>

我也没有得到 table headers 而只是得到普通的 json 数据，浏览器控制台显示以下错误。我不确定这个错误是否相关。

jquery.unobtrusive-ajax.min.js:16 Uncaught ReferenceError: jQuery is not defined
at jquery.unobtrusive-ajax.min.js:16

如何将这个 json 字符串传递给 View 并使用它来形成 table？

Answer 1

您忘记包含 JQuery 插件，这就是为什么控制台显示您需要 jQuery 未定义。

在 html jquery.unobtrusive 之前添加脚本：

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

此外，ajax你return的结果是List(array)类型，如果你想显示所有数据，你必须为每个.否则，您将获得 undefined 个值。

代码：

    $.ajax({
        cache: false,
        type: 'GET',
        url: '@Url.Action("MasterAdmin", "Index")', // and use 
        dataType: 'json',
        success:
            function (result) {
                console.log(result);
                result.forEach(element =>
                        $(".reqtab tbody").append("<tr><td>" + element.first_name + "</td><td>" + element.user_name + "</td><td>" + element.password +"</td><td>"+ element.id+"</td></tr>")
                    );
            }
    })
</script>

如何将 `json` 数据从控制器传递到视图并使用它来形成 table？

How can I Pass `json` Data from controller to View and use that to form a table?

ajax

asp.net-mvc

json

asp.net-ajax