如何在保存到存储库之前将临时数据添加到 Telerik MVC Grid？

Question

前段时间，我使用 Devexpress 组件开发了一个 asp.net webforms 应用程序，在 aspxgridview 中，我可以仅使用客户端在我的网格中插入行，而不是将其保存在我的数据库中。在用户插入他需要的所有行后，用户按下“发送”按钮，然后我将所有数据发送到我的服务器端保存在 Db 中。

现在在我的 MVC Telerik 网格中，我不知道如何做同样的事情。 这是我的看法：

  @(Html.Telerik()
      .Grid( Model )
      .Name( "DocumentGrid" )
      .DataKeys(a => a.Add(b=> b.IDDocument))
                      .ToolBar(commands => { commands.Insert().Text("add"); })
                      .Columns(c =>
                                   {                                         
                                       c.Bound(column => column.SupplierIdentification).Title("CNPJ/CPF");
                                       c.Bound(column => column.StatusDescription).Title("Status");                                           
                                       c.Bound(column => column.ExpirationDate).Title("Vencimento");
                                       c.Bound(column => column.IsStock).Title("Estoque");)
                                   .DataBinding(x => 
                                       x.Server().Insert("InsertNewDocument","Client"))
      .Editable(a => a.Mode(GridEditMode.InForm).TemplateName("AddDocumentModel")).ClientEvents(x => x.OnSave("onSave")))

如您所见，我有一个以我的模型作为参数调用动作的 Insert，但我想在完成向网格中添加行时“触发”该动作。

这是放置在自定义编辑模板上的 JavaScript 按钮：

<a href="javascript:void(0);" onclick="OnUpdateClick(this)"><b>Confirm</b>

这个按钮应该调用一个 OnUpdateClick 函数，它将临时行插入到我的网格中。

function OnUpdateClick() {
    var grid = $("#DocumentGrid").data("tGrid");
    var item = {};
    grid.insertRow(item);
}

我猜应该是这样的。 有什么建议吗？

编辑：

当我编辑我的网格时，我从 ~/Shared/EditorTemplates 文件夹中获取编辑模板，是否可以从 EditorTemplate 文件夹中的脚本获取我的网格数据？

Answer 1

为什么不使用 Ajax 数据绑定和网格操作模式作为客户端来简化它。

这是我在项目中所做的，所以我基本上可以在客户端批量更新和批量添加项目，它只会在保存时上传到服务器。应该是这样的。

@(Html.Telerik().Grid<YourViewModel>()
.Name("DocumentGrid")
.Columns(c =>
{
    c.Bound(column => column.SupplierIdentification).Title("CNPJ/CPF");
    c.Bound(column => column.StatusDescription).Title("Status");                                           
    c.Bound(column => column.ExpirationDate).Title("Vencimento");
    c.Bound(column => column.IsStock).Title("Estoque");
    c.Bound(a => a.IDDocument).Hidden()
})
.DataBinding(d => 
    d.Ajax()
        .OperationMode(GridOperationMode.Client)
        .Select("SelectAction", "YourController")
        .Update("UpdateAction", "YourController")
        .Insert("InsertAction", "YourController")
        .Delete("DeleteAction", "YourController")
    )
.Pageable(p => p.PageSize(50))
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.KeyboardNavigation()
.Resizable(r => r.Columns(true))
.Reorderable(r => r.Columns(true))
.Editable(e => 
    e.Mode(GridEditMode.InCell)
            .DataKeys(k => k.Add(a => a.IDDocument))
            .ToolBar(c => 
            {
                c.Insert();
                c.SubmitChanges();
            })
    )
)

您的操作将如下所示

[HttpPost]
[GridAction]
public ActionResult UpdateAction([Bind(Prefix = "updated")]IEnumerable<YourViewModel> updatedTransactions)
{
...
}

[HttpPost]
[GridAction]
public ActionResult InsertAction([Bind(Prefix = "inserted")]IEnumerable<YourViewModel> insertedTransactions)
{
...
}

[HttpPost]
[GridAction]
public ActionResult DeleteAction([Bind(Prefix = "deleted")]IEnumerable<YourViewModel> deletedTransactions)
{
...
}