在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，並且ASP MVC引擎將負責服務器級別的綁定。