Question

我有一个包含以下代码的视图

<div class="filter-recipe-wrapper">
<form method="post" action="/Recipe/SearchFilterResult" id="filterRecipes">
    <input type="checkbox" name="difficulty" value="Easy"> Easy<br>
    <input type="checkbox" name="difficulty" value="Medium"> Medium<br>
    <input type="checkbox" name="difficulty" value="Hard"> Hard<br>
    <input type="submit" value="Submit">
</form>

提交此表单我有一个Ajax函数，它执行以下操作：

var filteredItems = [];
var url = $(this).attr('action');
$("input:checkbox[name=difficulty]:checked").each(function(){
    filteredItems.push($(this).val());
});
var dataString = 'SearchTerm=' + filteredItems;
alert(filteredItems);
$.ajax({
    type: 'POST',
    url: url,
    data: dataString,
    success: function(response) {  
       alert(response);
    },
        error: function() {}
});

我的控制器操作代码是：

public ActionResult SearchFilterResult(IEnumerable<string> searchTerm = null)
    {

        return Content("ok");


    }

问题是1.当选中所有三个复选框时，此处收到的字符串仅返回1项而不是3项。

一旦问题1解决了，我希望能够查询我的数据库并显示所有具有困难匹配的食谱。

Answer 1

我将它包装在事件处理程序中，但您可以使用它来解决您的问题：

function mysubmit(e) {
    var filteredItems = [];
    var url = $(this).attr('action');
    $("input[type=checkbox][name=difficulty]:checked").each(function () {
        filteredItems.push($(this).val());
    });
    // var dataString = 'SearchTerm=' + filteredItems;
    var dataString = {
        searchTerm: filteredItems
    };
    alert(dataString.searchTerm);
    $.ajax({
        type: 'POST',
        url: url,
        data: dataString,
        success: function (response) {
            alert(response);
        },
        error: function () {}
    });
}
$('#filterRecipes').on('submit', function (e) {
    e.preventDefault();
    mysubmit(e);
});

Answer 2

而不是将数组传递给控制器传递字符串

使用JSON.stringify(filteredItems)

将数组转换为字符串

也适合你的

$("input[type=checkbox][name=difficulty]:checked").each(function () {
    filteredItems.push($(this).val());
});

使用jQuery Map

$("input[type=checkbox][name=difficulty]:checked").map(function(){
  return $.trim($(this).val());
})

当您在控制器中收到此参数时，请尝试反序列化到您的班级

(new JavaScriptSerializer()).Deserialize<T>(str);

希望这有帮助。

过滤来自AJAX

2 个答案: