将 Kendo Grid 数据发布到 MVC 中的控制器

Posted 2023-05-07

【中文标题】将 Kendo Grid 数据发布到 MVC 中的控制器

【英文标题】：Post Kendo Grid data to Controller in MVC

【发布时间】：2014-04-21 14:28:57

【问题描述】：

我有两节课。一个包含另一个类的列表：

public string Name  get; set; 
public string Surname  get; set; 
public int Age  get; set; 
public List<Models.Occupation> Occupations  get; set; 

第二类如下

public string Name  get; set; 
public string Industry  get; set; 

我的控制器渲染视图

Person p = new Person()

     Name = "megan",
     Surname = "du Preez",
     Id = 0,
     Age = 22
 ;
 return View(p);

在视图中

@model Models.Person

<form id="person">
    <div>
        @html.TextBoxFor(mp => mp.Name)
        @Html.TextBoxFor(mp => mp.Surname)
        @(Html.Kendo().Grid<Models.Occupation>()
        .Name("Occupations")
        .Columns(columns =>
            
                columns.Bound(e => e.Name);
                columns.Bound(e => e.Industry);
            )
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Occupations_Read", "People", new  Name = Model.Name))
        )
    </div>

    @Html.Kendo().Button().Name("btnTest").Content("Create")

这样读人的职业如下

List<Models.Occupation> oc = new List<Models.Occupation>();
oc.Add(new Models.Occupation()  CategoryName = "Lecturer" );
oc.Add(new Models.Occupation()  CategoryName = "Student" );
oc.Add(new Models.Occupation()  CategoryName = "Janitor" );

return Json(oc.ToDataSourceResult(request));

所有这些都呈现了我的视图并且一切正常，但是在表单帖子上我想将所有内容发送回操作

[HttpPost]
public JsonResult PersonPost(Models.Person p)

    //do stuff

我可以使用以下 javascript 轻松发布此人的姓名和姓氏

$("#btnTest").click(function (e) 
    e.preventDefault();

    $.ajax(
        url: "/Tasks/PersonPost",
        type: 'POST',
        data: $('#person').serialize(),
        dataType: 'json',
        success: function (data) 

        
    );
);

但网格中的职业不会被序列化并回发到控制器动作中。

我的问题是如何将带有职业列表的整个模型从视图发布到控制器。

【参考方案1】：

试试这个..

    @(Html.Kendo().Grid<Models.Occupation>()
    .Name("Occupations")
    .Columns(columns =>
    
        columns.Bound(e => e.Name).ClientTemplate("#= Name # <input type='hidden' name='Occupation[#=index(data)#].Name' value='#= Name #' />");
        columns.Bound(e => e.Industry).ClientTemplate("#= Industry # <input type='hidden' name='Occupation[#= index(data)#].Industry' value='#= Industry#' />");
    )        
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Occupations_Read", "People", new  Name = Model.Name))
    )

[HttpPost]
public JsonResult PersonPost(Models.Person p)

    //do stuff

您应该能够在 Person 中获取值。 请添加以下功能.. *****************************Javascript******************** *******

 //Index function for the WorkOrder Create view
        function index(dataItem) 

            var data = $("#GridName").data("kendoGrid").dataSource.data();
            return data.indexOf(dataItem);
        

沙兹

【讨论】：

这很棒！唯一的问题是 index(data) 给了我一个脚本错误，所以我只是在我的 Occupation 类中添加了一个 Id 属性并改为 #= Id#

非常感谢！效果很好！

没有问题...请记住这一点。 index(dataItem) 默认运行在你对网格进行 CRUD 操作的任何地方。所以它是一个非常强大的功能。你可以做自定义的事情，因为 dataitem 也是网格中的默认参数。

我按照你的回答，效果很好，但如果我在网格中有层次结构，我不知道该怎么做。如果能得到您的答复，我真的很高兴，谢谢

不必在索引中指定网格，您可以通过如下定义使其更通用：function index(dataItem) return dataItem.parent().indexOf(dataItem);

【参考方案2】：

网格数据不在表单元素中。表单元素仅在编辑单元格时出现，然后将其删除。您不能使用表单提交按钮将数据发布到服务器。

正确的方法是添加网格自己提供的“保存”命令按钮：

@(Html.Kendo().Grid<Invoice.Models.ViewModels.SegmentViewModel>()
    .Name("Segment")
    .ToolBar(toolbar => 
        toolbar.Save(); // add save button to grid toolbar
    )
    // ... rest of options ...

或者通过调用 Grid 小部件上的 saveChanges()：

保存细分

$("#save").on("click", function () 
    $("#Segment").data("kendoGrid").saveChanges();
);

【讨论】：

当然，这意味着如果您想一次性保存视图中的数据，您必须采取措施确保它以这种方式发生。我自己，在类似的场景中，我选择实现一个弹出窗口来编辑集合，将每个“行”作为表单元素添加到视图中。

【参考方案3】：

您可以在您的活动中使用此脚本：

function SaveUserProjectDetails() 

        var postUrl;
        var paramValue;

        var gridData = $("#CustomerInfoKendoGrid").data("kendoGrid").dataSource.data();
        postUrl = '@Url.Content("~/Billing/CustomerAccountManage/GetDepartmentWiseCategoryList")';
        paramValue = JSON.stringify( CustomerInformationList: gridData );


        $.ajax(
            url: postUrl,
            type: 'POST',
            dataType: 'json',
            data: paramValue,
            contentType: 'application/json; charset=utf-8',
            success: function (result) 
                console.log(result);
            ,
            error: function (objAjaxRequest, strError) 
                var respText = objAjaxRequest.responseText;
                console.log(respText);
            
        );

    

CustomerInformationList 是您的网格源列表。 更多详情see this

【参考方案4】：

这样的解决方案怎么样：

$( document ).ready(
   $("form").each(function(i, form)
       $(this).find(".k-grid").each(function(_i, div)
           $(form).submit(div, kendoGridSubmitData);
       );
    );
);

function kendoGridSubmitData(e) 
    var lModel = e.data.id;
    var lKendoGrid = $(e.data).data("kendoGrid");

    // Iterate over all rows
    lKendoGrid.dataItems().forEach(function(_row, _rowIndex)
        // Iterate over all fields
        _row.forEach(function(_value, _name)
            // Add the input hidden
            $('<input>').attr(
                type: 'hidden',
                id: lModel,
                name: lModel+'['+_rowIndex+'].'+_name,
                value: _value
            ).appendTo('form');
        );
    );