将js数组传给mvc控制器，然后返回另一个视图

Question

我想通过 post 将 js 数组从 View 传递到控制器，然后处理数据并将数据返回到另一个视图。

我遇到的问题：

-不能使用ajax发布数据，因为我不能返回另一个视图

当您使用 $.post 时，它会调用您的操作，然后返回一堆 HTML。然后你什么都不做，所以浏览器只是抛出它 离开。如果您只想转到新页面，请定期发布并 不要使用ajax。如果您需要调用服务器 获取一些信息来更新当前页面，而不是转到新页面。

（我猜 $http.post 也一样？）

-不能使用常规帖子 (@Html.Beginform) 我想是因为我无法传递 js 数组？

我应该如何处理？

Answer 1

如果你绝对想用你的 js 变量中的数据做一个普通的表单提交（non-ajax），你可以为你的 js 变量中的数据构建一些表单输入元素，然后您可以使用 javascript 提交此表单。只要元素的名称与您的操作方法参数匹配，模型绑定就可以工作。

这是一个使用 jQuery 在按钮单击事件上发送字符串列表的简单示例。

$(function() {

    var flags = ["aa", "bb", "cc"];
    var targetUrl="@Url.Action("Summary","Home")";

    $("#SubmitButton").click(function(e) {

        //First build a form element and set the action attribute value
        var $f = $("<form></form>").attr("action",targetUrl).attr("method","post");

        //Loop throug the string and create an input element for each item
        $.each(flags, function(a, b) {

            var $el = $("<input type='hidden' name='flagsChecked' />").attr("value",b);

            //Add the input element to the form
            $f.append($el);

        });

        //Add the form to the page and submit the form
        $f.appendTo("body").submit();

    });

});

在您的 http post action 方法中，您可以返回一个视图。

[HttpPost]
public ActionResult Summary(List<string> flagsChecked)
{
    return View("Summary");
}

如果您的代码要更新一些数据，我强烈建议您关注P-R-G pattern 并返回重定向响应。

[HttpPost]
public ActionResult Summary(List<string> flagsChecked)
{
    return RedirectToAction("Summary");
}

Answer 2

您可以使用@Html.BeginForm 在常规帖子中传递多个值。 然后这些值将被编码为：key=foo&key=bar&key=baz。 如果您需要更多信息，请查看以下帖子：https://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Answer 3

将js数组传递给mvc控制器

你有两个不同的问题。首先，您必须将 application/x-www-form-urlencoded 或 multipart/form-data 或 json 绑定到您的对象/数组。

Phil Haacked - Model Binding To A List

摘录：

开始

<form method="post" action="/Home/UpdateInts">
  <input type="text" name="ints" value="1" />
  <input type="text" name="ints" value="4" />
  <input type="text" name="ints" value="2" />
  <input type="text" name="ints" value="8" />
  <input type="submit" />
</form>

您将使用 fiddler 并查看单击提交按钮时实际发布的数据，您会看到以下内容。

ints=1&ints=4&ints=2&ints=8

默认模型绑定器会看到所有这些具有相同名称的名称/值对，并将其转换为具有键 int 的集合，然后将其与 ints 参数匹配到您的操作方法。很简单！

结束

然后返回另一个视图

嗯，你有两个选择。

首先，您使用标准的<form> 元素和一个url 和一种提交表单的方式（提交按钮、jQuery 等）。优点：它一直存在并且非常易于使用。缺点：如果有网络中断什么的，你的用户体验很差（浏览器，url找不到，所以我点击刷新我重新提交......我不知道......等等）

其次，您使用 Ajax 请求并发送数据。当响应成功时，您 window.location 您的用户到下一个屏幕。优点：出色的用户体验，如果网络出现故障，您可以重试或给用户提供重试的方式。缺点：肯定有更多工作要做。

Answer 4

必须是帖子吗？

一个使用 get 请求执行此操作的 javascript 示例：

var url = "/Controller/Action?";
var myArray = {id1: 100, id2: 200, "id3": 300};

for (var key in myArray) {
url += key+"="+myArray[key] + "&"
}

window.top.location.href = url

否则就发个帖子：

var form = $('<form></form>');
var url = "/Controller/Action";
form.attr("method", "post");
form.attr("action", url);
var myArray = {id1: 100, id2: 200, "id3": 300};

for (var key in myArray) {
    var field = $('<input></input>');

    field.attr("type", "hidden");
    field.attr("name", key);
    field.attr("value", myArray[key]);

    form.append(field);
});

$(document.body).append(form);
form.submit();