選択したチェックボックスIDをAjaxを使用してコントローラメソッドに渡すことができません

Question

ユーザーがチェックボックスをクリックするたびに選択されたチェックボックスIDのリストを送信しようとしています。これは、検索結果をカテゴリ別にフィルタリングするために使用されます。私はこれが正しい方法であるかどうかはわかりませんが、これは私がこれまでに試したことです。

これは、AJAX呼び出しと私の部分図である。

@using GAPT.Models 
@model ViewModelLookUp 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<script> 
    $(document).ready(function() { 
     $("#selectedcategories").click(function() { 
      var array = []; 
      if ($(this).is(":checked")) { 
       array.push($(this).val()); 
      } 
      else { 
       array.pop($(this).val()); 
      } 
      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("SearchTours", "Home")', 
       dataType: "html", 
       traditional: true, 
       data: { values: array }, 
       success: function (data) { 
        $('#selectedcategories').html(data); 
       } 
      }); 
     }); 
    }); 
</script> 

@using (Html.BeginForm("SearchCategories", "Home", FormMethod.Post)) 
{ 
    foreach (var category in Model.categories) 
    { 
     <div class="checkbox" id="@{@category.Id}"> 
      <label> 
       <input type="checkbox" id="selectedcategories" name="selectedcategories" value="@{@category.Id}"/>@category.Name 
      </label> 
     </div> 
    } 
} 
@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

そして、これは私が到達しようとしている私のコントローラのメソッドです：

[HttpPost] 
public ActionResult SearchTours(FormCollection collection) 
{ 
    // insert query here 

    ViewData["CategAttrTours"] = CategAttrTours; 
    return View(CategAttrTours); 
} 

コントローラのメソッドが到達していないとこのエラーが発生します： Error

このエラーが発生する理由は何ですか？私は間違ってデータを渡しているからですか？ 私は助けていただければ幸いです。どうもありがとう。

Answer 1

あなたに配列を生成するためのスクリプトが不要であり、あなただけ使用できますが

[HttpPost] 
public ActionResult SearchTours(IEnumerable<int> values) 

（category.Idがtypeof演算intあると想定）contentTypeオプションを追加し、

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("SearchTours", "Home")', 
    dataType: "html", 
    contentType: "application/json; charset=utf-8", //add this 
    data: JSON.stringify({ values: array }), // modify this 
    data: { values: array }, 
    success: function (data) { 
       $('#selectedcategories').html(data); 
    } 
}); 

あなたのデータを文字列化してにあなたの方法を変更する必要があります

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("SearchTours", "Home")', 
    dataType: "html", 
    data: $('form').serialize(), 
    success: function (data) { 
     $('#selectedcategories').html(data); 
    } 
}); 

以上単に

$.post('@Url.Action("SearchTours", "Home")', $('form').serialize(), function(data) { 
    $('#selectedcategories').html(data); 
}); 

と

[HttpPost] 
public ActionResult SearchTours(IEnumerable<int> selectedcategories) 

サイドノートにメソッドを変更する：あなたは、あなたのコントローラメソッドが例外をスローしているのでMVC

Answer 2

コントローラ上でこの

(FormCollection collection) 

場所

List<string> values 

にブレークポイントを変更するコントローラメソッドのパラメータにこの

dataType: "html" 
traditional: true 

を削除し、値を確認し