使用 Kendo MVC Grid 和其他元素提交表单 [英] Submit form with Kendo MVC Grid and other elements

问题描述

我正在尝试获取包含要提交的 Kendo MVC 网格和其他元素的表单.

I am trying to get a form containing a Kendo MVC grid and other elements to submit.

• View 模型包含三个字符串字段和一个 IEnumerable 集合.
• 网格是服务器绑定的.我没有使用网格从列表中添加任何元素或删除任何元素，但网格包含一个映射到列表项中布尔列的复选框.

每当我提交此表单时，post 方法中都会返回三个字符串元素，但列表始终为空.

Whenever I submit this form the three string elements return in the post method but the list is always null.

这是数据模型:

public class Parent
{
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public string Comments { get; set; }
    public IEnumerable<ChildItems> Children { get; set; }
}

public class ChildItems
{
    public string ChildField1 { get; set; }
    public string ChildField2 { get; set; }
    public boolean Include { get; set; }
}

这是我的观点:

@{
    ViewBag.Title = "Index";
}
@model GridInForm.Models.Parent

@using(Html.BeginForm("Save", "Home"))
{
    <fieldset>
        <legend>Editing Parent</legend>

        @Html.LabelFor(parent => parent.Field1)
        @Html.EditorFor(parent => parent.Field1)

        @Html.LabelFor(parent => parent.Field2)
        @Html.EditorFor(parent => parent.Field2)
        @Html.LabelFor(parent => parent.Comments)
        @Html.EditorFor(parent => parent.Comments)
        @(Html.Kendo().Grid(Model.Children)
            .Name("Children")
            .ToolBar(tools => tools.Create().Text("Add new Children"))
            .Editable(editable => editable.Mode(GridEditMode.PopUp).CreateAt(GridInsertRowPosition.Bottom))
            .Columns(columns =>
            {
                columns.Bound(p => p.ChildField1).ClientTemplate("#= ChildField1 #" + 
                    "<input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= Name #' />"
                );

                columns.Bound(p => p.ChildField2).Hidden().ClientTemplate("#= ChildField1 #" +
                    "<input type='hidden' name='ChildField1[#= index(data)#].ChildField1' value='#= ChildField1 #' />"
                );

                columns.Command(command => 
                {
                    // command.Destroy();
                    command.Edit();
                }).Width(100);
            })
            .DataSource(dataSource => dataSource
                .Server()
                .Create("Create", "Home")
                .Read("Index", "Home")
                .Update("Update", "Home")
                .Model(model => 
                {
                    model.Id(p => p.ChildField1);
                    model.Field(p => p.ChildField1).Editable(false);
                })
                //.ServerOperation(true)
            )
        )
    </fieldset>

    <input type="submit" value="Save" />
}

<script>
    function index(dataItem) {
        alert("bindind");
        var data = $("#Products").data("kendoGrid").dataSource.data();
        return data.indexOf(dataItem);
    }
</script>

当我提交表单时，我在视图模型中取回父项，但网格中的 IEnumerable 字段始终为空.

When I submit the form, I get the parent items back in the view model but the IEnumerable fields from the grid are always null.

这是不是这样做的方式，如果是这样，完成这样的事情的方法是什么?我在以前的 Telerik 版本上遇到过这个问题，我发现它在 Kendo UI 上是一样的.任何方向将不胜感激.这是一个长期存在的问题.

Is this just not the way to do this, and if so what is the way to accomplish something like this? I have had this issue on previous Telerik versions and I see it is the same on Kendo UI. Any direction would be greatly appreciated. This has been a long going on issue.

推荐答案

我在我的项目中完美地运行了这个场景.这是我的网格声明...

I have exactly this scenario working perfectly in my project. Here's my grid declaration...

@(Html.Kendo().Grid(Model.ChildLines)
    .Name("RequestLinesGrid")
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
         .Columns(columns =>
         {
             columns.Bound(p => p.ItemCode).ClientTemplate("#= ItemCode #" +
               "<input type='hidden' name='MyLines[#= index(data)#].ItemCode' value='#= ItemCode #' />"
             );
             columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
               "<input type='hidden' name='MyLines[#= index(data)#].Description' value='#= Description #' />"
             );
             columns.Bound(p => p.UoM).ClientTemplate("#= UoM #" +
               "<input type='hidden' name='MyLines[#= index(data)#].UoM' value='#= UoM #' />"
             );
             columns.Bound(p => p.QtyCC).ClientTemplate("#= QtyCC #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyCC' value='#= QtyCC #' />"
             );
             columns.Bound(p => p.QtyEmployee).ClientTemplate("#= QtyEmployee #" +
                "<input type='hidden' name='MyLines[#= index(data)#].QtyEmployee' value='#= QtyEmployee #' />"
             );
             columns.Bound(p => p.ItemListLineID).Hidden(true).ClientTemplate("#= ItemListLineID #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListLineID' value='#= ItemListLineID #' />"
             );
             columns.Bound(p => p.ItemListCode).Hidden(true).ClientTemplate("#= ItemListCode #" +
                "<input type='hidden' name='MyLines[#= index(data)#].ItemListCode' value='#= ItemListCode #' />"
             );
             columns.Command(command =>
             {
                 command.Destroy();
             }).Width(200);
         })
    .DataSource(dataSource => dataSource.Ajax()
         .Model(m =>
         {
             m.Id(p => p.ItemCode);
             m.Field(p => p.ItemCode).Editable(false);
             m.Field(p => p.Description).Editable(false);
             m.Field(p => p.UoM).Editable(false);
             m.Field(p => p.QtyCC).Editable(true);
             m.Field(p => p.QtyEmployee).Editable(true);
             m.Field(p => p.ItemListLineID).Editable(false);
             m.Field(p => p.ItemListCode).Editable(false);
         })
         .Batch(true)
         .ServerOperation(false)
         // these are dummy action methods that don't really exist.
         .Update("upd", "upd") 
         .Destroy("del", "del")
         .Create("cre", "cre")
    )
    .Navigatable()
)

这是索引"函数:

function index(dataItem) {
    var data = $("#RequestLinesGrid").data("kendoGrid").dataSource.data();

    return data.indexOf(dataItem);
}

这篇关于使用 Kendo MVC Grid 和其他元素提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！