使用ajax将值从MVC中的视图传递给控制器答案

【问题标题】：Using ajax to pass pass values to controller from view in MVC使用ajax将值从MVC中的视图传递给控制器
【发布时间】：2021-06-29 07:45:15
【问题描述】：

我的 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>

在我的家庭控制器中，这个动作：

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 数组。

【问题讨论】：

服务器错误日志在中断时会告诉您什么？请注意，您没有发送键/值，仅发送值
@charlietfl 我刚刚收到一个 500 错误 POST localhost:5001/Home/Favourites 500（内部服务器错误）。是的，这是正确的，只是打算发送一个字符串 ID 数组的值
这是客户端错误。您需要查看服务器端错误日志文件
至于“只打算发送价值”......这不是默认 POST 请求的工作方式。发送键/值对
表示string[] ids为空。

标签： javascript ajax asp.net-mvc razor

【解决方案1】：

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

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"
    });
}

【讨论】：

【解决方案2】：

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

我假设这是一个“获取”请求而不是“发布”请求。既然你想展示书籍。如果您想“获取”所有与 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

【讨论】：