繁体   English   中英

使用Angular.js,Kendo UI和ASP.NET MVC使用Kendo网格执行内联编辑

[英]Performing An Inline Edit With A Kendo Grid Using Angular.js, Kendo UI and ASP.NET MVC

我正在使用Angular.js,Kendo UI,ASP.NET MVC和C#。 我有一个Kendo网格,我想在该网格上执行内联编辑。 当我单击网格中的“编辑”按钮时,更新该行中的数据,然后单击“更新”按钮,该请求将被发送到服务器并点击我的MVC控制器方法,但是该请求中没有传回任何数据。 为了使内联编辑正常工作,我需要更改什么?

<section ng-app="manageProjectsApp" ng-controller="manageProjectsController as vm">
    <div kendo-grid="grid" options="vm.kendoGridOptions"></div>
</section>

<script>
    ...

    vm.kendoGridOptions = {
        scrollable: false,
        sortable: true,
        pageable: false,
        editable: 'inline',
        columns: [{
            field: 'ProjectName',
            title: 'Project Name'
        }, {
            field: 'Active',
            title: 'Is Active?'
        }, {
            command: ['edit']
        }],
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/manage-projects/get-projects',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }, update: {
                    url: '/manage-projects/update-project',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json'
                }, parameterMap: function (options, operation) {
                    if (operation !== 'read' && options.models) {
                        return {
                            models: kendo.stringify(options.models)
                        };
                    }
                }
            }, schema: {
                model: {
                    id: 'ProjectId',
                    fields: {
                        ProjectId: {
                            type: 'number',
                            editable: false,
                            nullable: false
                        },
                        ProjectName: {
                            type: 'string',
                            nullable: false,
                            validation: {
                                required: true
                            }
                        },
                        Active: {
                            type: 'boolean',
                            nullable: false
                        }
                    }
                }
            }
        })
    };
</script>

[Route("manage-projects/update-project")]
public JsonResult UpdateProject(ProjectData projectData)
{
  // save the data...

  return Json(true, JsonRequestBehavior.DenyGet);
}

public class ProjectData
{
  public int ProjectId { get; set; }
  public string ProjectName { get; set; }
  public bool Active { get; set; }
}

我会说从您的Json结果中删除JsonRequestBehavior.DenyGet 另外,如果它是POST方法,请使用[HttpPost]属性标记您的方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM