使用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; }
    }

谢谢。

Answer 1

使用

@Model

将返回集合的名称，例如

"System.Collections.Generic.List[YourAssembly.ValidationAccount]"

，而不是集合中的对象。您可以将集合序列化到 ViewBag，然后将其发回（未测试），但双向发送数据似乎对性能造成不必要的影响。

相反，您可以将

Proceed

方法的过滤结果存储在会话中，并在

ActivateAccounts

方法中检索它，以避免发回任何内容。

Answer 2

这样做：

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'
    });

Answer 3

您必须首先将数据解析为

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) {
                }
            });
        });

希望这有帮助。

Answer 4

将整个模型传递回控制器方法的最佳方法是序列化表单，如下所示...

$(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类型！否则这永远会失败。

Answer 5

在您的 .cshtml 中，导入 System.Text.Json，然后像

@JsonSerializer.Serialize(Model.ToList()))

一样使用它

@model IEnumerable<Ticket>
@using System.Diagnostics;
@using System.Text.Json;


@if (Model.Count() > 0)
{
<div id="ticketGrid">
 <table >
    <thead> // ...
      <th scope="col">
        <span class="d-flex">
        <button style="all:unset" 
         onclick="toggleOrder(@JsonSerializer.Serialize(Model.ToList()))">
        </button>
         @Html.DisplayNameFor(model => model.Issue.UpdatedOn)
        </span>
      </th> // ...
   </thead>
   <tbody height="80px" class="overflow-y-auto">
   @foreach (var item in Model)
   {
        <tr scope="row"> // ... 
        </tr>

   }
   </tbody>
  </table>
</div>
}

在 Ajax 中，使用

JSON.stringify(your-model)

和

contentType: 'application/json'

<script>
    function toggleOrder(tickets) {

        $.ajax({
            method: 'POST',
            url: '/Ticket/ToggleOrder',
            data: JSON.stringify(tickets),
            contentType: 'application/json',
            // dataType: 'json',
            success: function (viewData) {
                $("#ticketGrid").html(viewData);       
            }
        });
    };
</script>

在您的控制器中，使用

[HttpPost]
public async Task<IActionResult> ToggleOrder([FromBody] List<Ticket> tickets)
{
    // do something ...
    // return Json or PartialView
    // return Json(new { data = ticketsToReturn });
    return PartialView("_TicketGrid", ticketsToReturn.ToList());
}