Shaz

Question

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

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) {

        }
    });
});

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

我的问题是如何将整个模型与视图中的职业列表一起发布到控制器。

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

Shaz

Answer 2

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

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

Answer 3

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

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

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

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

将Kendo Grid数据发布到MVC中的Controller

4 个答案:

Shaz