javascript - 如何从 Kendo Grid 事件将参数数据传递到 mvc 中的 Controller ？

Question

我想将很多参数从我的 ajax 函数传递到我的 Controller 。最初，我以为我只需使用查询字符串来执行此操作，但这并没有给我想要的结果，尽管它有效，但随着我添加的数据越多，它会创建一个没有吸引力的 URL。

我认为更好的方法是获取我需要传递的所有数据，将其存储为对象，然后将该负载从 ajax 函数传递到 Controller 中。

ajax 函数由 KendoGrid 的 .event() 属性触发。

剑道网格

@(Html.Kendo().Grid<MyProject.Models.Car>()
    .Name("requirement-grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name);
        columns.Command(command => command
            .Custom("Test").Click("payload"));
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetCars", "cars"))))

正如您从上面的代码中看到的，我使用了一个自定义命令，当您单击它时会触发一个函数。函数为payload，代码如下:

有效负载

function payload(e) {
    e.preventDefault();
    //Get row data
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    //Create Object
    var obj = {
        Name: dataItem.Name,
        BHP: dataItem.BHP,
        YearOfBuild: dataItem.YearOfBuild            
    }

    //Post via Ajax
    $.ajax({
        type: 'POST',
        url: '/Controller/Method/',
        data: JSON.stringify({
            array: obj
        }),
        cache: false,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log("Success");
        },
        error: function (ob, errStr) {
            console.log(ob.responseText);
        }
    });
}

我访问被单击的行的数据并通过事件参数将其传递下来，从那里我创建一个对象并向其添加数据。然后，我创建一个 ajax 调用并尝试将其传递给 Controller ​​。

Controller 需要参数，代码如下，但为了简洁而缩短。

Controller

public ActionResult Create(object[] obj)
    {           
        return View(obj);   
    }

如果我在 ajax 函数中使用 "POST" ，我会收到有关缺少防伪 token 的错误。如果我使用 "GET" ，则 obj 参数始终为 null。

The required anti-forgery cookie "__RequestVerificationToken" is not present.

有更好的方法来做到这一点还是我的方法不正确？

Answer 1

所以这对您的代码来说应该是一个相对简单的更改。我假设您已将防伪 token 加载到页面上，并且您要发布的操作受此保护。这里有两个解决方案:

1) 如果您的 Controller 中的操作不需要 token ，则删除对 token 的要求

2) 通过更改您的代码，将 token 作为您发送回服务器的数据包的一部分提供

 $.ajax({
        type: 'POST',
        url: '/Controller/Method/',
        data: JSON.stringify({
            array: obj
        }),
        cache: false,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            console.log("Success");
        },
        error: function (ob, errStr) {
            console.log(ob.responseText);
        }
    });

至:

 $.ajax({
   type: 'POST',
   url: '/Controller/Method/',
   data: {
     array: JSON.stringify(obj),
     __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val()
   },

   cache: false,
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   success: function(data) {
     console.log("Success");
   },
   error: function(ob, errStr) {
     console.log(ob.responseText);
   }
 });

注意，我刚刚添加了对防伪 token 的引用作为数据包的一部分， Controller 应该读取该引用，并且如果页面上有 token ，则允许命令成功完成。如果没有，那么只需将 @Html.AntiForgeryToken() 添加到 View 中就可以了。