使用 ajax 从 MVC 中的视图将值传递给 controller

Question

我的 Razor 视图文件中有以下内容：

<button onClick="getFavouriteBooks()">Display Favourites</button>

<script>
function getFavouriteBooks() {
    var ids = JSON.parse(localStorage.getItem("bookIds"));
    $.ajax({
        type: "POST",
        url: '@Url.Action("Favourites", "Home")',
        data: ids,
        dataType: "javascript"
    });
}
</script>

而在我家 Controller 中，这个动作：

public async Task<ViewResult> Favourites(string[] ids)
        {
            // var bookList = code that retrieves list of all books

            var favouriteBooks = bookList.Any(book => ids.Contains(book.Id));

            return View("Index", favouriteBooks);

        }

当用户单击“显示收藏夹”时，我收到 localhost/Home/Favourites 的 500 错误。 谁能帮我看看我哪里出错了？

更新： bookIds 是一个字符串 ID 数组。

Answer 1

所以我认为这里发生了一些事情。

我假设这是一个“获取”请求而不是“发布”请求。 既然你想展示书籍。 如果您想“获取”所有与 id 匹配的内容，最简单的方法是获取总响应并循环遍历它。 如果它只是一个小项目，如果它很严重，你想改变你的 SQL 以找到 ID。

但假设您只需要 JavaScript 的帮助。

首先，如果您像这样将 javascript 排成一行，那么您还需要处理行内的响应，这在语法上不会非常友好。 毕竟我们不是在写 php。

关于异步函数的第二点是您需要一个异步发生的响应，因此需要等待。 还需要处理promise

我已经简化了我认为在这里使用 fetch 而不是 ajax 来避免所有 jquery 和 Ajax 设置的解决方案，但逻辑应该在那里。

https://codepen.io/sijbc/pen/qBRrgBG?editors=1111

  fetch('https://api.github.com/users')
     .then(res => res.json())//response type
     .then(data => console.log(data))

还发现这篇文章值得一试

https://medium.com/front-end-weekly/ajax-async-callback-promise-e98f8074ebd7

Answer 2

在 ajax 调用中添加contentType更新data ，如下所示并再次检查

function getFavouriteBooks() {
    var ids = JSON.parse(localStorage.getItem("bookIds"));
    $.ajax({
        type: "POST",
        url: '@Url.Action("Favourites", "Home")',
        // jQuery refers below mentioned contentType to serialize data in JSON format
        // Without this, serialization will be url encoded string
        contentType: "application/json; charset=utf-8",
        // Assuming ids as a array of strings
        // data to be an object that holds Action methods parameters as it's properties
        // Stringify object before assigning to data
        data: JSON.stringify({
            ids: ids
        }),
        dataType: "javascript"
    });
}