首页 文章

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

提问于
浏览 次
1

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

我认为更好的方法是获取我需要传递的所有数据，将其存储为对象并将该有效负载从ajax函数传递到控制器中 .

ajax函数是从 KendoGrid 的 .event() 属性触发的 .

Kendo Grid

@(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 ，代码如下：

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调用并尝试将其传递给控制器 .

控制器需要参数，代码如下，但为了简洁起见缩短了 .

Controller

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

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

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

有没有更好的方法来做这个或我的方法不正确？

javascript jquery ajax asp.net-mvc kendo-ui

1 回答

  • 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() 添加到视图中就可以了 .

    回复于

相关问题