如何将本地存储项传递给 MVC 控制器答案

【问题标题】：How to pass local storage item to MVC controller如何将本地存储项传递给 MVC 控制器
【发布时间】：2021-04-02 15:57:21
【问题描述】：

我正在尝试将一个字符串数组从我的本地存储（键值）传递到 MVC 控制器。这是我的代码：

在cshtml中查看文件：

 <script>

        function getFavouriteBooks() {
            var ids = JSON.parse(localStorage.getItem("bookIds"));
            // returns: ["1", "2", "3"]

            $.ajax({
                type: "POST",
                traditional: true,
                url: '@Url.Action("Favourites", "Home")',
                data: { ids: ids },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    alert(result.Result);
                }
            }});
        }
    </script>


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

我的控制器：

public async Task < ViewResult > Favourites(string ids) {
    // code that fetches book data from API 

    if (data != null)

    {
        var bookList = JsonConvert.DeserializeObject < Book[] > (data);

        foreach(var book in bookList) {
            var matches = new List < bookList > ();
            if (bookList.All(book => ids.Contains(book.Id))) {
                matches.Add(book);
            }

            return View("Index", matches.ToArray());
        }
    }
    return View("Index");
}

控制器操作在按钮单击时成功调用，但 ids 参数始终为空，即使在控制台中不是。我哪里错了？

【问题讨论】：

@SandipBantawa，这是一个 POST，身体很好。尝试将 Action 中的 ID 更改为 string[]。例如。 public ViewResult Favourites(string[] ids)。顺便说一句，您没有使用 async 或 Task，最好将它们从签名中删除。
像这样设置您的数据... data: JSON.stringify(ids) .... 然后将您的 MVC 方法更改为 Favourites(string[] ids) .... 让 MVC 做反序列化传入的 JSON 数据的工作
谢谢@CallumMorrisson 我试过了，但它是一个空字符串
Favourites([FromBody]string[] ids) 将解决这个问题。这将告诉 MVC 将该数据从 POST 正文中提取出来，而不是从 URL 路由数据中提取

标签： javascript c# ajax asp.net-mvc razor

【解决方案1】：

根据您的描述，我强烈认为这是期望异步函数同步运行的问题，

await foreach(var book in bookList) {
            var matches = new List < bookList > ();
            if (bookList.All(book => ids.Contains(book.Id))) {
                matches.Add(book);
            }

            return View("Index", matches.ToArray());
        }

在调用 foreach 循环之前尝试添加等待。或更好地使用 for in 循环

【讨论】：

@hououinkyoma 等待与 API 调用有关以检索书单 - 我已经在其中有等待代码
@Jordan1993 尝试返回 var ids= JSON.parse(localStorage.getItem("bookIds"));而不是 localStorage.getItem("bookIds");
@Sergey 抱歉，你是什么意思？我的代码已经是var ids = JSON.parse(localStorage.getItem("bookIds"));
@Jordan1993，是的，可能是这种情况，但是这个问题很常见，我们可以在控制台中看到东西但在 UI 中显示，主要与代码的异步行为有关。如果它显示在调试器中，请尝试在它上面运行调试器，而不是我们可以进一步检查
对不起，我更新了我的答案。由于我不知道您是如何填写本地存储 ID 的，所以我不得不猜测。

【解决方案2】：

此代码已在 Visual Studio 中测试。

你必须创建一个 viewModel：

public class IdsViewModel
    {
         public string[] Ids { get; set; }
    }

替换这个：

  var ids = JSON.parse(localStorage.getItem("bookIds"));
            // returns: ["1", "2", "3"]
// or you can  use 
var ids = localStorage.getItem('videoIds');  //it still will be working


            $.ajax({
                type: "POST",
                traditional: true,
                url: '@Url.Action("Favourites", "Home")',
                data: { ids: ids },
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (result) {

有了这个

var ids= JSON.parse(localStorage.getItem("bookIds"));

  $.ajax({
  type: "POST",
   url: '/Home/Favourites',
   data: { ids:ids },
 success: function (result) {
....

动作

public async Task <ActionResult> Favourites(IdsViewModel viewModel) {

var ids=viewModel.Ids;

.....

【讨论】：

谢谢，但不幸的是 ids 仍然是一个空字符串：/
@Jordan1993 对不起，我更新了我的答案。它在VS中进行了测试。 – Sergey 50 秒前编辑删除

【解决方案3】：

感谢大家的帮助，解决办法其实就是把这部分ajax调用改成：

data: { ids: localStorage.getItem('videoIds') },

【讨论】：