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

Question

我正在尝试将一个字符串数组从我的本地存储（键值）传递到 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 参数始终为 null，即使它不是在控制台中。我哪里错了？

Answer 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 循环之前添加 await。或者更好地使用 for in loop

Answer 2

此代码已在 Visual Studio 中测试。

您必须创建一个视图模型：

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;

.....

Answer 3

感谢大家的帮助，解决方案实际上是将 ajax 调用的这一部分更改为：

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

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

How to pass local storage item to MVC controller

javascript

c#

ajax

asp.net-mvc

razor