jquery 如何返回带有JSON结果的视图?

xfb7svmp  于 2023-02-03  发布在  jQuery
关注(0)|答案(2)|浏览(139)

有什么方法可以返回带有JSON结果的视图吗?我已经这样做了,但是它只返回了一个json结果,我想绑定json结果和jQuery数据表。
这是我的控制器:

[HttpGet]
    public async Task <IActionResult> GetDepartments()
    {
        try
        {
            ...
            var result = await _get.GetRequest<string>(uri, accessToken);
            return Json(result);
            }
        }

        catch (Exception ex)
        {
           ..
        }

对于我的视图,我是这样做的:

<table id="myDataTable">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Department</td>
            <td>Manager</td>

        </tr>
    </thead>
    <tbody>
    </tbody>

</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script>
        $(document).ready(function () {
            $('#myDataTable').DataTable({
                ajax: {
                    url: '/Home/GetDepartments',
                    "dataSrc": ""
                },
                columns: [
                    { data: "id" },
                    { data: "name" },
                    { data: "department" },
                    { data: "manager" }
                ]
            });
        });

</script>

这就是我得到的

[{"id":3,"name":"Sales","department":null,"manager":"Danial Booker"},{"id":4,"name":"PMO","department":null,"manager":"Rowan Walter"},{"id":5,"name":"Research And Development","department":null,"manager":"Shani Elliott"},{"id":6,"name":"Product Management","department":null,"manager":"Menna Goff"},{"id":7,"name":"HR","department":null,"manager":"Jayda Martinez"},{"id":8,"name":"Deve","department":"Product Management","manager":"Abigayle Briggs"},{"id":9,"name":"Test","department":"Product Management","manager":"Alys Huang"},{"id":19,"name":"QA","department":"Ava","manager":"Mela "}]

我想显示视图,有插件jQuery数据表与json结果,任何帮助请?

yb3bgrhw

yb3bgrhw1#

首先,你必须使用 AJAX 调用来获取数据,然后你才能绑定它。如果你有数据,你可以像下面的例子一样在你的数据表中绑定它。

var data = [{"id":3,"name":"Sales","department":null,"manager":"Danial Booker"},{"id":4,"name":"PMO","department":null,"manager":"Rowan Walter"},{"id":5,"name":"Research And Development","department":null,"manager":"Shani Elliott"},{"id":6,"name":"Product Management","department":null,"manager":"Menna Goff"},{"id":7,"name":"HR","department":null,"manager":"Jayda Martinez"},{"id":8,"name":"Deve","department":"Product Management","manager":"Abigayle Briggs"},{"id":9,"name":"Test","department":"Product Management","manager":"Alys Huang"},{"id":19,"name":"QA","department":"Ava","manager":"Mela "}];
 
 $('#example').DataTable({
       data : data,
       columns : [
           { "data" : "id" },
           { "data": "name" },
          { "data": "department" },
          { "data": "manager" }
      ]
})

下面是一个工作example

tjjdgumg

tjjdgumg2#

按照您现在尝试的方式,您应该有两个控制器;一个用于获取数据,另一个用于将数据表显示到视图中。

    • 获取数据的控制器:**
[HttpGet]
        public async Task<IActionResult> GetDepartments()
        {
            try
            {

                var result = await _get.GetRequest<string>(uri, accessToken);
                return Json(result);

            }

            catch (Exception ex)
            {

            }
        }
    • 注意:**您不需要为此操作添加视图。
    • 显示数据表的控制器:**
[HttpGet]
        public IActionResult BindJsonToView()
        {
            return View();
        }
    • 注:**为此操作添加以下视图,如下所示。
    • 要显示数据表的视图:**
<h2>BindDataTableFromJson</h2>
<table id="bindDataTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Manager</th>

        </tr>
    </thead>
</table>
@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {

            $.ajax({
                type: "GET",
                url: "/ControllerName/GetDepartments",
                success: function (response) {
                    $('#bindDataTable').DataTable({
                        data: response,
                        columns: [
                            { data: 'id' },
                            { data: 'name' },
                            { data: 'department' },
                            { data: 'manager' }
                        ]
                    });

                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

        });
    </script>
}
    • 输出:**

另一个简单的方法,你可以尝试,你不需要使用两个控制器,只需要使用ViewBag而不是Json(result)只是即插即用。

    • 控制器:**
[HttpGet]
        public IActionResult BindDataTable()
        {
            var result = await _get.GetRequest<string>(uri, accessToken);
            ViewBag.result = result;
            return View();
        }
    • 查看:**
@{
    ViewData["Title"] = "BindDataTable";
}
    <table id="bindDataTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Department</th>
                <th>Manager</th>
    
            </tr>
        </thead>
    </table>
        @section scripts {
            <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
            <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    
            <script>
    
            $(document).ready(function () {
            $('#bindDataTable').DataTable({
                data:  @Json.Serialize(@ViewBag.result),
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'department' },
                    { data: 'manager' }
                  
                ]
            });
            });
            </script>
        }
    • 输出:**

两个选择你都有,现在选择权在你。

相关问题