Kendo UI MVC 网格更新操作

Question

我是第一次使用 KendoUI 控件，我想知道接下来如何完成：

这是我的视图模型：

public class OrderViewModel
{        
    public string ClientId { get; set; }

    public List<Category> Categories { get; set; }
    public Category MainCategory { get; set; }

    public List<Item> Items { get; set; }

    public OrderViewModel()
    {
        Items = new List<Item>(); Categories = new List<Category>();
    }
}

这是项目类：

public class Item
{   
    [ScaffoldColumn(false)]
    public int ItemId { get; set; }

    [DisplayName("Name")]
    public string ItemName { get; set; }

    [DisplayName("Quantity")]
    [DataType("Integer")]
    public int Quantity { get; set; }

    [DisplayName("Price")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }
}

这是类别类：

public class Category
{
    public int CategoryId { get; set; }
    public string Name { get; set; }
}

我想使用 TextBox、DropDownList 和 Grid 来显示这些信息：

@(Html.Kendo().TextBox()
            .Name("client")
            .Value(@Model.ClientId)
            .HtmlAttributes(new { style = "width: 100%" })
        )

@(Html.Kendo().DropDownList()
            .Name("categories")
            .DataTextField("Name")
            .DataValueField("CategoryId")
            .BindTo(@Model.Categories)
            .Value(@Model.MainCategory.CategoryId.ToString())
            .HtmlAttributes(new { style = "width: 100%" })
        )
@(Html.Kendo().Grid(Model.Items)
            .Name("items")
            .Columns(columns => 
            {
                columns.Bound(a => a.ItemId);
                columns.Bound(a => a.ItemName);
                columns.Bound(a => a.Price);
                columns.Bound(a => a.Quantity);
            })
            .ToolBar(toolBar =>
            {
                toolBar.Save().SaveText("Send").CancelText("Cancel");
            })
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Scrollable()
            .Pageable(pageable => pageable
                .ButtonCount(5)
            )
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(datasource => datasource
                .Ajax()
                .Batch(true)
                .PageSize(30)
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(a => a.ItemId);
                    model.Field(a => a.Name).Editable(false);
                    model.Field(a => a.Price).Editable(false);
                    model.Field(a => a.Quantity);
                })
                .Update(update => update.Action("SendOrder","Orders"))
            )
        )

信息显示正确，用户应该输入一个ClientId，选择一个类别并在网格中输入每个项目的数量，我想在用户单击保存按钮时将用户输入的信息保存在控件中网格工具栏。

如何将更新后的模型传递给“SendOrder”操作？

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SendOrder(....)
    {
        //Code to save the information

        return View();
    }

Answer 1

在检查了这个demo和这个documentation之后

我可以将模型中的数据传递给动作，这是我的最终代码：

@(Html.Kendo().Grid(Model.Items)
        .Name("items")
        .Columns(columns => 
        {
            columns.Bound(a => a.ItemId);
            columns.Bound(a => a.ItemName);
            columns.Bound(a => a.Price);
            columns.Bound(a => a.Quantity);
        })
        .ToolBar(toolBar =>
        {
            toolBar.Save().SaveText("Send").CancelText("Cancel");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable()
        .Pageable(pageable => pageable
            .ButtonCount(5)
        )
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(datasource => datasource
            .Ajax()
            .Batch(true)
            .PageSize(30)
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(a => a.ItemId);
                model.Field(a => a.Name).Editable(false);
                model.Field(a => a.Price).Editable(false);
                model.Field(a => a.Quantity);
            })
            .Update(update => update.Action("SendOrder","Orders").Data("getAdditionalData"))
        )
    )

function getAdditionalData() {

    var cat = $("#categories").val();
    var cli = $("#client").val();

    return {
        clientId: cli,
        categoryId: cat
    }
}

为了将附加参数（客户端 ID 和类别）传递给操作，我使用 Data 方法并提供 JavaScript 函数的名称，该函数将返回带有附加数据的 JavaScript 对象。

动作：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult SendOrder([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]List<Item> items, string clientId, string categoryId)
        {
           //code to save information

            return View();
        }

我不知道是否有更好的方法来实现这一点，但这对我有用。