使用JavaScript从视图返回到MVC中的控制器

时间:2016-11-27 20:00:26

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

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

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

1 个答案:

答案 0 :(得分:0)

以下是测试视图:

@{
    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引擎将负责服务器级别的绑定。