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

这是Category类：

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

我不知道是否有更好的方法可以实现这一目标，但这对我有用。

KendoUI MVC网格更新操作

1 个答案: