将对象列表从 JQuery 传递给返回视图的 IActionResult 方法答案

【问题标题】：Pass a List of Objects from JQuery to IActionResult method that returns a View将对象列表从 JQuery 传递给返回视图的 IActionResult 方法
【发布时间】：2020-07-22 05:47:13
【问题描述】：

我目前无法显示从我的 API 获得的对象列表作为响应。响应通过并返回我的所有用户。我将它传递给我的控制器方法，该方法只返回一个带有对象作为模型的视图，但是当我到达这一步时，动作完成并且它不显示新页面

我的 Jquery：

<script>
        $(document).ready(function () {
            $('div.hidden').fadeIn(1500).removeClass('hidden');
        });

        $(function () {

            $("#btnGetUsers").click(function () {
                debugger;
                var pathname = window.location.pathname.split("/");
                var settings = {
                    contentType: "application/json",
                    accepts: "application/json",
                    beforeSend: function (request) {
                        request.setRequestHeader("AuthToken", "Token " + pathname[pathname.length - 3]);
                    },
                    dataType: "json",
                    type: "GET",
                    url: "https://localhost:44324/api/User/ListAll",
                    success: function (result) {
                        $.post('@Url.Action("ListAll", "User")', { users: result });
                    },
                    error: function () {
                        alert("Error")
                    }
                };
                $.ajax(settings);
            });
        }
    );
    </script>

我的控制器方法：

        public IActionResult ListAll(List<User> users)
        {
            return View("ListAll", users);
        }

【问题讨论】：

Ajax 不理解 View 结果是什么。这也不是使用 ajax 的好场景，如果您只想重定向，只需使用操作链接 <a></a>
要从ajax返回一个新视图，可以使用windows.localtion，但只能以querystring的形式传递数据。您不应该希望显示 url 中的所有数据。您可以尝试使用部分视图来显示用户数据，虽然这不是一个新页面，但它可能是您想要的。请参考下面的演示。

标签： jquery html ajax asp.net-mvc asp.net-core

【解决方案1】：

这是一种使用局部视图在同一视图中显示用户列表的解决方法，您可以参考;

主视图

<button id="btnGetUsers">GetUsers</button>

<div id="userList">

</div>

@section Scripts
{
 <script>
 $("#btnGetUsers").click(function () {
            debugger;
            var pathname = window.location.pathname.split("/");
            var settings = {
                //...

                dataType: "json",
                type: "GET",
                url: "https://localhost:44389/api/Test/ListAll",
                success: function (data) {
                    $.post('@Url.Action("ListAll", "Home")', { users: data }, function (result) {
                        $("#userList").html(result);
                    });
                },
                error: function () {
                    alert("Error")
                }
            };
            $.ajax(settings);
        });
</script>
}

_用户列表

@model IEnumerable<Demo1.Models.User>

<table class="table">
  <thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Username)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Username)
            </td>
            <td>
            </td>
        </tr>
    }
  </tbody>
</table>

MVC 控制器

    [HttpPost]
    public IActionResult ListAll(List<User> users)
    {
        return PartialView("_UserList", users);
    }

结果

【讨论】：