Kendo UI JSON结果为ASP.NET MVC5 Action作为参数

时间:2016-07-31 00:15:33

标签: c# json asp.net-mvc kendo-ui

我使用Kendo UI Javascript - kendoGrid - (不是ASP.NET MVC)和ASP.NET MVC背后。

我有一个问题:

时,我在哪里运行数据源的同步方法

autoSync = false和batch = true。

当autoSync = true时,Action方法中的参数识别JSON obj。 当它被设置为false时它不会。

我试图在kendoGrid中的save事件上调用它但是什么也没做。在此先感谢所有的帮助:)

这就是我所做的:

视图模型:

public class TaskControllerViewModel
{
    public string Address { get; set; }
    public DateTime DateCreated { get; set; }
    public string FirstName { get; set; }
    public int Id { get; set; }
    public bool IsActive { get; set; }
    public string LastName { get; set; }
    public string UserName { get; set; }
}

控制器:

public ActionResult Edit(TaskControllerViewModel model)

查看:

<script>
$(function () {

    var dataSource = new kendo.data.DataSource({           
        transport: {
            read: {
                url: "@Url.Action("GetAllUsers","Task")",
                dataType: "json"
            },
            update: {
                url: "@Url.Action("Edit","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            },
            destroy: {
                url: "@Url.Action("Delete","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            },
            parameterMap: function(data,type)
            {                     
                return kendo.stringify(data);
            }
        },
        schema: {
            model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false },
                        UserName: { type: "string" },
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        Address: { type: "string" },
                        IsActive: { type: "boolean" },
                        DateCreated: { type: "date" }
                    }
                }
        },
        batch: true,
        pageSize: 20,          
    });

    $("#allUsers").kendoGrid({
        dataSource:dataSource,
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
        { field: "UserName",title: "User Name" },
        { field: "FirstName",title: "First Name" },
        { field: "LastName",title: "Last Name" },
        { field: "Address",title: "Address" },
        { field: "IsActive",title: "Active" },
        { field: "DateCreated",title: "Join Date",format: "{0:dd-MM-yyyy}" },
        { command: "edit" },
        { command: "destroy" }
        ],
        editable: {
            mode: "inline",
            update: true,
            destroy: true,
            confirmation: true
        },
        edit: function (event) {
            console.log("at edit event");

        },
        save: function(event)
        {
            console.log("at saveChanges event");
            dataSource.sync();
        }

    });
});

1 个答案:

答案 0 :(得分:0)

解决了它。

启用批量编辑意味着您的JSON对象将作为数组传递给Controller。您必须将Controller Action中的参数更改为List或任何可能的IEnumerable。

以下是我的Sample的代码,您只需遍历每个项目:

控制器操作:

 public JsonResult Edit(List<TaskControllerViewModel> model)
    {
        foreach(var item in model)
        {
            var userToEdit = users.GetUser(item.Id);

            if(userToEdit != null)
            {
                userToEdit.Contact.FirstName = item.FirstName;
                userToEdit.Contact.LastName = item.LastName;
                userToEdit.Username = item.UserName;
                userToEdit.Contact.Address = item.Address;
                userToEdit.IsActive = item.IsActive;
            }
            unitOfWork.SaveChanges();
        }

        return Json(model);
    }

视图模型:

public class TaskControllerViewModel
{
    public string Address { get; set; }
    public DateTime DateCreated { get; set; }
    public string FirstName { get; set; }
    public int Id { get; set; }
    public bool IsActive { get; set; }
    public string LastName { get; set; }
    public string UserName { get; set; }
}

查看:

<script>
$(function () {

    var dataSource = new kendo.data.DataSource({           
        transport: {
            read: {
                url: "@Url.Action("GetAllUsers","Task")",
                dataType: "json"
            },
            update: {
                url: "@Url.Action("Edit","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            },
            destroy: {
                url: "@Url.Action("Delete","Task")",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                type:"POST"
            },
            parameterMap: function(data,type)
            {                     
                return kendo.stringify(data.models);              
            }
        },
        schema: {
            model: {
                    id: "Id",
                    fields: {
                        Id: { editable: false },
                        UserName: { type: "string" },
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        Address: { type: "string" },
                        IsActive: { type: "boolean" },
                        DateCreated: { type: "date" }
                    }
                }
        },
        batch: true,
        pageSize: 20,          
    });

    $("#allUsers").kendoGrid({
        dataSource:dataSource,
        height: 550,
        groupable: true,
        sortable: true,
        navigatable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
        { field: "UserName",title: "User Name" },
        { field: "FirstName",title: "First Name" },
        { field: "LastName",title: "Last Name" },
        { field: "Address",title: "Address" },
        { field: "IsActive",title: "Active" },
        { field: "DateCreated",title: "Join Date",format: "{0:dd-MM-yyyy}" },
        { command: "destroy" }
        ],
        toolbar: ["save","cancel"],
        editable: {
            mode: "incell",
            update: true,
            destroy: true,
            confirmation:true
        },           
        edit: function (event) {
            console.log("at edit event");

        },
        save: function(event)
        {
            console.log("at saveChanges event");
        },        
    });
});

我希望这可以在将来帮助某人。