使用Ajax调用将模型作为列表从视图传递到控制器

Question

我在尝试使用ajax调用发送包含List<Account>的整个模型时遇到了问题。

以下是提供的代码：

@model List<ValidationAccount>

<input type="button" id="SubmitAccounts" value="Final Proceed">

$("#SubmitAccounts").click(function () {
            $.ajax({
                url: '/setupAccounts/ActivateAccounts',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                dataType: 'json',
                data: JSON.stringify(Model),
                success: function (data) {
                    $(body).html(data);
                }, error: function (data) {
                }
            });
        });

我尝试使用简单的Model和@Model，但不起作用。在这种情况下我该怎么做？ （所以我想把我的模型（我的列表）作为数据传递。）

---

更新 方法签名：

[HttpPost]
public string ActivateAccounts(List<ValidationAccount> Accounts)
{
    return "Success";
}

---

更新2：

我的模型：

public class ValidationAccount
    {
        public string Faculty { get; set; }
        public string Programme { get; set; }
        public string Year { get; set; }
        public string Email { get; set; }
    }

感谢您的选择。

- Shmwel

---

你检查过提交的数据是否是有效的JSON格式了吗？ - elolos

是的。没错。幸运的是。 - Shmwel

“@Model”将返回“System.Collections.Generic.List[YourAssembly.ValidationAccount]”，而不是集合中的对象。由于您没有修改任何内容，为什么需要将模型传回“ActivateAccounts()”？-只需再次从数据库获取它（这样性能会更好）。 - user3559349

你为什么会“失去它们”？无论你使用了什么代码来生成呈现此视图的集合，都可以再次在 ActivateAccounts() 中生成该集合。 - user3559349

让我告诉你发生的情况。我在一个页面上进行了ajax调用，获取了一些账户，并检查了一些条目（对于每个账户条目使用复选框），然后我点击“继续”。当我点击“继续”时，会显示一个新视图，根据一些特征显示已选中的账户及其电子邮件。在此视图中存在一个“成功”按钮，它实际上可以做我想要的事情。这就是为什么我告诉你，我只使用模型来显示一些“电子邮件”，然后如果单击“成功”按钮，则会访问数据库并进行一些更改。是的，也许听起来很奇怪，我想在两个视图上携带一个账户列表。 - Shmwel

Answer 1

使用@Model会返回集合的名称，例如"System.Collections.Generic.List[YourAssembly.ValidationAccount]"而不是集合中的对象。您可以将集合序列化到ViewBag中然后将其发送回来（未经测试），但这似乎是在性能上不必要的数据传输。

相反，您可以将Proceed方法中过滤后的结果存储在会话中，并在ActivateAccounts方法中检索它，以避免将任何内容发送回来。

- user3559349

Answer 2

最好的方法将整个模型传回控制器方法是通过序列化表单，类似如下方式...

$(document).ready( function() {
  var form = $('#Form1');

 $('#1stButton').click(function (event) {

    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );
}

注意：触发通过Ajax post提交表单的事件的按钮不应该是submit类型！否则会一直失败。

- Biki

Answer 3

用这种方式实现：

data: { Accounts: JSON.stringify('@Model') }

同时将 traditional 属性设置为 true：

data: { Accounts: JSON.stringify('@Model') },
traditional:true

更新：

 var accounts= { Accounts: '@Model' };

并且：

$.ajax({
        type: 'POST',
        url: '/{controller}/{action}',
        cache: false,
        data: JSON.stringify(accounts),
        dataType: 'json', 
        contentType: 'application/json; charset=utf-8'
    });

- Ehsan Sajjad

---

很遗憾，它不起作用。我的参数仍然是“null”。请参见更新。 - Shmwel

好的，进展已经取得了。但是当模型被发送时，我收到的不是我在视图上显示的2个项目，而是0个。Tx。 - Shmwel

Answer 4

你首先需要将数据解析为json格式。

尝试一下。

var parsedData = @Html.Raw(Json.Encode(Model)); // This will change the model to json 

然后将 parsedData 传递到 ajax 调用中

$("#SubmitAccounts").click(function () {
            $.ajax({
                url: '/setupAccounts/ActivateAccounts',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                dataType: 'json',
                data: parsedData,
                success: function (data) {
                    $(body).html(data);
                }, error: function (data) {
                }
            });
        });

希望这能帮到你。

- Anto Subash