我想实现DevExpress Grid绑定保存按钮的问题

时间:2019-05-19 20:25:56

标签: asp.net-core-mvc devexpress

演示 https://js.devexpress.com/Demos/Widgetsgallery/Demo/DataGrid/RowEditingAndEditingEvents/NetCore/Light/

我要实现的是,当用户单击“编辑”时,它会更新该行,然后在用户单击“保存”时,它会将请求发送到操作并更新数据库,我们正在使用Asp MVC Core,我遇到的问题是我不知道哪个自定义Jquery函数DevExtreme绑定了保存按钮,请检查代码,我也共享DevExpre URL

@using DevExtremeAspNetCoreApp1.Models

<h2>Home</h2>

@(Html.DevExtreme().DataGrid<Order>()
                .ShowBorders(true)
                .DataSource(d => d.Mvc().Controller("Orders").LoadAction("Get").Key("OrderID"))
                .Columns(columns =>
                {
                    columns.AddFor(m => m.OrderID);
                    columns.AddFor(m => m.OrderDate);
                    columns.AddFor(m => m.CustomerName);
                    columns.AddFor(m => m.ShipCountry);
                    columns.AddFor(m => m.ShipCity);
                })
                .Paging(p => p.PageSize(10))
                .Editing(editing =>
                {
                    editing.Mode(GridEditMode.Row);
                    editing.AllowAdding(true);
                    editing.AllowDeleting(true);
                    editing.AllowUpdating(true);
                }).OnRowUpdated(@<text> function(e) { logEvent("RowUpdated"); } </text>)
                                                .FilterRow(f => f.Visible(true))
                                                .HeaderFilter(f => f.Visible(true))
                                                .GroupPanel(p => p.Visible(true))
                                                .Grouping(g => g.AutoExpandAll(false))
                                                .RemoteOperations(true)
                                                .Summary(s => s
                                                    .TotalItems(totalItems =>
                                                    {
                                                        totalItems.AddFor(m => m.ShipCity).SummaryType(SummaryType.Count);
                                                    })
                                                    .GroupItems(groupItems =>
                                                    {
                                                        groupItems.Add().SummaryType(SummaryType.Count);
                                                    })
                                                )
)



<div id="data-grid-demo">
    @(Html.DevExtreme().DataGrid<Order>()
                        .ShowBorders(true)
                        .DataSource(d => d.Mvc().Controller("Orders").LoadAction("Get").Key("OrderID"))
                        .ID("gridContainer")
                        .ShowBorders(true)
                        .Paging(p => p.Enabled(false))
                        .Editing(e => e.Mode(GridEditMode.Popup)
                           .AllowUpdating(true)
                           .Popup(p => p
                                .Title("Employee Info")
                                .ShowTitle(true)
                                .Width(700)
                                .Height(525)
                                .Position(pos => pos
                                    .My(HorizontalAlignment.Center, VerticalAlignment.Top)
                                    .At(HorizontalAlignment.Center, VerticalAlignment.Top)
                                    .Of(new JS("window"))
                                )
                           )
                           .Form(f => f.Items(items =>
                           {
                               items.AddGroup()
                                   .ColCount(2)
                                   .ColSpan(2)
                                   .Items(groupItems =>
                                   {
                                       groupItems.AddSimpleFor(m => m.CustomerID);
                                       groupItems.AddSimpleFor(m => m.CustomerName);
                                       groupItems.AddSimpleFor(m => m.OrderDate);
                                       groupItems.AddSimpleFor(m => m.OrderID);
                                       groupItems.AddSimpleFor(m => m.ShipCity);
                                       groupItems.AddSimpleFor(m => m.ShipCountry);

                                       groupItems.AddSimpleFor(m => m.CustomerName)
                                           .ColSpan(2)
                                           .Editor(editor => editor.TextArea().Height(100));
                                   });

                               items.AddGroup()
                                   .Caption("Home Address")
                                   .ColCount(2)
                                   .ColSpan(2)
                                   .Items(groupItems =>
                                   {
                                       groupItems.AddSimpleFor(m => m.CustomerID);
                                       groupItems.AddSimpleFor(m => m.CustomerID);
                                   });
                           }))
                        )
                        .Columns(columns =>
                        {
                            columns.AddFor(m => m.CustomerID)
                                .Width(70);

                            columns.AddFor(m => m.CustomerName);

                            columns.AddFor(m => m.CustomerName);

                            columns.AddFor(m => m.CustomerName);

                            columns.AddFor(m => m.CustomerName)
                                .Width(170);

                            columns.AddFor(m => m.CustomerName);

                            columns.AddFor(m => m.CustomerName)
                                .Width(125)
                                .Lookup(lookup => lookup
                                    .DataSource(d => d.Mvc().Controller("DataGridStatesLookup").LoadAction("Get").Key("ID"))
                                    .DisplayExpr("Name")
                                    .ValueExpr("ID")
                                );

                            columns.AddFor(m => m.CustomerName)
                                .Visible(false);

                            columns.AddFor(m => m.CustomerName)
                                .Visible(false);
                        })
                        .DataSource(d => d.Mvc()
                            .Controller("DataGridEmployees")
                            .LoadAction("Get")
                            .UpdateAction("Put")
                            .Key("ID")
                        )
                        .DataSourceOptions(d => d.Filter("['ID', '<=' , 14]"))
    )
</div>

1 个答案:

答案 0 :(得分:0)

您是否尝试过在控制器中创建一个操作来处​​理HttpPut事件?

.DataSource(d => d.Mvc()
     .Controller("Order")
     .LoadAction("Get")
     .UpdateAction("Put") //Add an action
    .Key("OrderId")
)

您的操作将向该操作发送一个 key 参数和一个 values 参数。您需要:

  1. 根据密钥获取订单
  2. 反序列化Json
  3. 更新订单中的物品
  4. 退货

您链接的演示也做同样的事情:

[HttpPut]
public IActionResult Put(int key, string values) {
    var employee = _data.Employees.First(a => a.ID == key);
    JsonConvert.PopulateObject(values, employee);

    if(!TryValidateModel(employee))
         return BadRequest(ModelState.GetFullErrorMessage());

    _data.SaveChanges();

    return Ok();
}