如何通过Ajax jQuery将列表字符串从视图传递到控制器

Question

这是我的HTML代码

<ul class="sb_dropdown" style="display:none;">
                    <li class="sb_filter">Chon the loai</li>
                    <li><input type="checkbox" value="All"/><label for="all"><strong>Tất cả</strong></label></li>
                    <li><input type="checkbox" value="Woman"/><label for="Automotive">Đồ nữ</label></li>
                    <li><input type="checkbox" value="Shoes"/><label for="Baby">Giày</label></li>
                    <li><input type="checkbox" value="Bag"/><label for="Beauty">Túi sách</label></li>
                    <li><input type="checkbox" value="Man"/><label for="Books">Đồ nam</label></li>                      
                </ul>

这是我调用控件的Ajax代码。

 <script>
                        $('.sb_search').click(function () {
                            var list = [];
                            $('ul.sb_dropdown').find("input:checkbox:checked").each(function () {
                                list.push($(this).val());
                            });
                            var key = { listkey: list };
                            $.ajax({
                                url: '@Url.Action("Search", "Result")',
                                traditional: true,
                                data: list,
                                dataType: "html",
                                type: 'POST',
                                success: function (data) {
                                    alert("success");
                                },
                                error: function () {
                                    alert("fail");
                                }
                            });

                        });
                    </script>

在我的控制器中，我有一个参数列表键listkey，希望当我点击搜索按钮时从视图中接收到。

public ActionResult Result()
    {
        return View();
    }
    [HttpPost]
    public ActionResult Result(List<string> listkey)
    {
        var n = listkey;
        return View();
    }

当我调试时，它没有执行操作结果，并弹出失败提示。告诉我我做错了什么。请帮我解释一下为什么需要使用returnjson而不是我想使用普通的视图来显示我的结果。

我已经解决了这个问题，因为我在我的ajax中放错了动作和控制器。谢谢大家。

- Cong Le

---

为什么你想将HTML传递给“操作结果”？相反，你可以只传递“选中/未选中”的值。 - RajeshKdev

我不想将我的HTML传递给Action结果，我想传递一个复选框的列表值，其中它被选中，并且我想在搜索控制器中打开结果视图。 - Cong Le

Answer 1

尝试进行编辑，创建数组并将其传递给您的控制器。

    var stringArray = new Array();
    stringArray[0] = "item1";
    stringArray[1] = "item2";
    stringArray[2] = "item3";
    var postData = { listkey: stringArray };

你的数据将会在你的ajax调用中。

   data: postData 


$.ajax({
        type: "POST",
        url: '@Url.Action("Search", "Result")',
        data: postData,
        success: function(data){
            alert(data.Result);
        },
        dataType: "json",
        traditional: true
    });

---

你可以按如下方式操作，

1. 将列表转换成以下格式的JSON字符串：

你的数据将会是data: '{ "listkey":' + JSON.stringify(list) + '}',

$.ajax({
                                url: '@Url.Action("Search", "Result")',
                                traditional: true,
                                 data: '{ "listkey":' + JSON.stringify(list) + '}',
                                dataType: "html",
                                type: 'POST',
                                success: function (data) {
                                    alert("success");
                                },
                                error: function () {
                                    alert("fail");
                                }
                            });

与其试图看你是否获得了想要的结果，不如试着让内容更加通俗易懂。

  [HttpPost]
        public ActionResult Result(List<string> listkey)
        {
            var n = listkey;
            return View();
        }

- Pranay Rana

---

当我调试时，我的控制器没有获取参数列表键，我认为当我使用ajax调用动作并将参数传递给它时是正确的。我在这段代码中没有发现任何错误。 - Cong Le

你能帮我吗？ - Cong Le

嗨Prana，我尝试了这个但它又不起作用了。所以我在布局页面中进行操作，我试图将参数更改为int id，并传递值1，但它提示失败。 - Cong Le

@CongLe - 如果答案帮助您解决了问题，请接受答案。 - Pranay Rana

Answer 2

<script>
 $('.sb_search').click(function () {
    var list = [];
    $('ul.sb_dropdown').find("input:checkbox:checked").each(function () {
    list.push($(this).val());
    });

    $.ajax({
        url: '@Url.Action("Search", "Result")',
        data: { listkey: list },
        dataType: "json",
        type: 'POST',
        traditional: true,
        success: function (data) {
            alert("success");
        },
        error: function () {
            alert("fail");
        }
    });
});
 </script>



       [HttpPost]
       public ActionResult Result(List<string> listkey)
       {
           var n = listkey;
           return View();
       }

- Anusha M Shetty