在MVC中使用JavaScript将数据从视图返回到控制器答案

【问题标题】：Return data using JavaScript from view to controller in MVC在MVC中使用JavaScript将数据从视图返回到控制器
【发布时间】：2016-11-27 20:00:25
【问题描述】：

我有一个 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>

我正在尝试通过复选框标记列表中的项目并将它们发送到我的控制器。检查某些内容时，应将其保存到我创建的数组（容器）中。单击按钮时，我想将此数组传递给我的控制器，但它不起作用。

【问题讨论】：

标签： javascript c# asp.net-mvc wcf

【解决方案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);
    }
}

Test 操作方法返回视图，当您单击按钮时，它会提交表单（将数组发送到 AjaxTest 操作）。

重要的部分是调用 JSON.stringify 以便 jQuery 不理会它，因为它已经是 JSON，并且 ASP MVC 引擎将处理服务器级别的绑定。

【讨论】：