如何从 Kendo Grid 事件将参数数据传递给 mvc 中的控制器？答案

【问题标题】：How do I pass parameter data to a controller in mvc from an Kendo Grid event?如何从 Kendo Grid 事件将参数数据传递给 mvc 中的控制器？
【发布时间】：2018-11-17 02:23:50
【问题描述】：

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

我认为更好的方法是获取我需要传递的所有这些数据，将其存储为一个对象，然后将该有效负载从一个 ajax 函数传递到控制器。

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

我访问被点击的行的数据并通过 events 参数将其向下传递，从那里我创建一个对象并将数据添加到它。然后我创建一个 ajax 调用并尝试将其传递给控制器。

控制器期望参数，代码如下，为简洁起见。

控制器

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

如果我在我的 ajax 函数中使用"POST"，我会收到一个关于缺少防伪令牌的错误。如果我使用"GET"，obj 参数始终为空。

所需的防伪cookie“__RequestVerificationToken”不存在。

有没有更好的方法可以做到这一点，还是我的方法不正确？

【问题讨论】：

“我收到关于缺少安全令牌的错误”...在这种情况下，您可能需要包含正确的安全令牌。您的应用程序是如何保护的？
我已经更新了我的问题，这实际上是一个防伪 cookie 错误。我知道这些可以手动添加，但由于我没有使用表单，我无法引用它来传递它。

标签： javascript jquery ajax asp.net-mvc kendo-ui

【解决方案1】：

所以这应该是对您的代码的一个相对简单的更改。我假设您在页面上加载了一个防伪令牌，并且您发布到的 action 受此保护。你有两个解决方案：

1) 如果不需要令牌，请从您的controller 中的action 中删除对令牌的要求

2) 将令牌作为data package 的一部分提供给您，方法是更改您的代码

 $.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);
   }
 });

请注意，我刚刚为您添加了对防伪令牌的引用，作为数据包的一部分，如果您在页面上有令牌，控制器应该读取它并允许命令为您成功完成。如果不是，那么只需将@Html.AntiForgeryToken() 添加到视图中就可以了。

【讨论】：