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

Question

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

我遇到的问题：

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

  

当你使用$ .post时，它会调用你的动作，然后返回一堆   HTML。然后你什么都不用，所以浏览器只是抛出它   远。如果你想转到新页面，请定期发帖   不要使用ajax。如果你需要调用你的服务器，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>

当你点击提交按钮时，你要拿小提琴手查看实际发布的数据，你会看到以下内容。

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

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

端

  

然后返回另一个视图

嗯，你有两个选择。

首先，您使用带有url的标准<form>元素和提交表单的方式（提交按钮，jQuery等）。优点：它永远存在，并且使用起来非常简单。缺点：如果有网络中断或其他什么，你的用户体验非常差（浏览器，网址无法找到，所以我点击刷新，我重新提交......我不知道..等等）

其次，您使用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();