MVCのビューからコントローラにJavaScriptを使用してデータを返す

Question

MVCアプリケーションで使用するWCFサービスがあります。今、チェックボックスを使ってリストから項目を削除したいと思います。私のコントローラでデータを受け取ると、最初のWCFメソッド（findAccRoleMapp）がテーブル内のすべてのデータを見つけ、別のWCFメソッド（removeAccForRole）を呼び出してそのデータを削除する必要があります。ここで

は私のコントローラである：ここでは

[HttpGet] 
    public ActionResult GetAccForRol(string id) 
    { 
     AccountManagementServiceClient amsc = new AccountManagementServiceClient(); 
     ViewBag.listAccForRol = amsc.findAllAccByRol(id); 
     return View(); 

    } 

    [HttpPost] 
    public ActionResult GetAccForRol(FormCollection collection) 
    { 
     AccountManagementServiceClient amsc = new AccountManagementServiceClient(); 
     AccountManagementViewModel amvm = new AccountManagementViewModel(); 

     foreach(var item in collection) 
     { 
      if(collection != null) 
      { 
      string object= item.ToString(); 
      var accounts = amsc.findAccRoleMapp(object); 
      amsc.removeAccFromRole(accounts); 
      } 
     } 
     return RedirectToAction("GetAccForRol"); 
    } 

は私が私の見解で持っているものJSです：

<script type="text/javascript" src="@Url.Content("~/Scripts/")jquery-1.10.2.js"></script> 

<script type="text/javascript"> 

    var container = []; 
    counter = 0; 

$(document).ready(function() { 

    $('#checkBoxAll').click(function() { 
     if ($(this).is(":checked")) 
      $('.chkCheckBoxId').prop('checked', true); 
     else 
      $('.chkCheckBoxId').prop('checked', false); 

    }); 

    $('#button').click(function() { 

     console.log("button"); 
     $('#myTable tr').each(function() { 

      console.log("table"); 

      $(this).find('td input:checked').each(function() { 

       container[counter] = $(this).val(); 
       counter++; 
      }); 

      console.log("container: " + container); 
     }); 

     $.ajax({ 
      type: "POST", 
      url: '/AccountManagement/GetAccForRol', 
      data: { 'myArray': container }, 
      success: 
       alert("fdsfds") 

     }); 

    }); 

}) 
</script> 

私は、チェックボックスによって、リストから項目をマークし、それらを送信しようとしています私のコントローラ。何かがチェックされると、それは私が作成した配列（コンテナ）に保存する必要があります。ボタンをクリックすると、この配列をコントローラに渡したいが、動作しない。ここで

Answer 1

は、テストビューである：ここで

@{ 
    ViewBag.Title = "Test"; 
} 

<form name="frmTest" method="POST"> 
    @Html.Label("Your name Please") 
    @Html.TextBox("username") 
    <input class="btn btn-success btn-lg btn-block" type="submit" value="Login"> 
</form> 

<script> 
    $(function() { 
     $("form[name='frmTest']").submit(function (e) { 
      var stringArray = new Array(); 
      stringArray[0] = "item1"; 
      stringArray[1] = "item2"; 
      var postData = { Names: stringArray }; 
      $.ajax(
      { 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: "AjaxTest", 
       //dataType: "json", 
       data: JSON.stringify(postData), 
       success: function (data, status) { 
        alert("Pass" + data); 
       }, 
       error: function (ex) { 
        alert("Fail" + ex); 
       } 
      }); 
      e.preventDefault(); 
     }); 
    }); 

</script> 

はコントローラです：

public class AccountController : Controller 
{ 
    public ActionResult Test() 
    { 
     return View(); 
    } 
    public JsonResult AjaxTest(List<string> Names) 
    { 
     return Json("You posted: " + Names.Count + " items.", JsonRequestBehavior.AllowGet); 
    } 
} 

テストアクションメソッドはビューを返し、あなたがボタンをクリックしたときには、フォームは（送信提出します配列をAjaxTestアクションに変換します）。

重要な部分は、JSON.stringifyを呼び出すことです.jQueryはすでにJSONであるため、jQueryはそれをそのまま残し、ASP MVCエンジンはサーバーレベルでバインディングを処理します。