如果视图中有多个网格,则表单会多次回发(Kendo Grid MVC)

时间:2013-11-12 16:22:41

标签: kendo-ui kendo-grid kendo-asp.net-mvc

我在视图中有3个Kendo网格和一个Save按钮。当我单击“保存”按钮时,我在控制器的操作方法中获取更新的ViewModel,然后在数据库中添加/更新记录。但是保存操作方法被调用3次,因为视图上有3个kendo网格。我从视图中删除了2个网格,它只返回时间,因为视图只有一个网格(很奇怪)。

单击“保存”按钮时如何停止多个回发?

Index.cshtml

@using (Html.BeginForm("Save", "UDFController", FormMethod.Post))
{

<input class="button" type="submit" name="save" value="Save"/>


@(Html.Kendo().Grid(Model.List1)
                     .Name("List1")
                     .HtmlAttributes(new { style = "width:auto;height:100%" })
                     .ToolBar(toolbar => toolbar.Create().Text("Add New Record"))
                     .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                     .Columns(columns =>
                         {
                             columns.Bound(p => p.Title)
                                     .ClientTemplate("#= Title #" +
                                        "<input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' />")
                                     .Title("Title").HtmlAttributes(new { style = "width:30%" });
                             columns.Bound(p => p.MaxPrecision).Title("Decimal Places")
                                     .ClientTemplate("#= MaxPrecision #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' />");                                 
                             columns.Bound(p => p.IsObsolete).Title("Obsolete")
                                 .ClientTemplate("#= IsObsolete #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' />");
                         })
                    .DataSource(datasource => datasource
                        .Ajax()
                        .Model(model =>
                                {
                                    {
                                        model.Id(p => p.Title);
                                        model.Field(p => p.Title).Editable(true);
                                        model.Field(p => p.MaxPrecision).Editable(true);
                                        model.Field(p => p.IsObsolete).Editable(true);                                    
                                    }
                                }
                            )

                        )

                    )



@(Html.Kendo().Grid(Model.List2)
                     .Name("List2")
                     .HtmlAttributes(new { style = "width:auto;height:100%" })
                     .ToolBar(toolbar => toolbar.Create().Text("Add New Record"))
                     .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                     .Columns(columns =>
                         {
                             columns.Bound(p => p.Title)
                                     .ClientTemplate("#= Title #" +
                                        "<input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' />")
                                     .Title("Title").HtmlAttributes(new { style = "width:30%" });
                             columns.Bound(p => p.MaxPrecision).Title("Decimal Places")
                                     .ClientTemplate("#= MaxPrecision #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' />");                                 
                             columns.Bound(p => p.IsObsolete).Title("Obsolete")
                                 .ClientTemplate("#= IsObsolete #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' />");
                         })
                    .DataSource(datasource => datasource
                        .Ajax()
                        .Model(model =>
                                {
                                    {
                                        model.Id(p => p.Title);
                                        model.Field(p => p.Title).Editable(true);
                                        model.Field(p => p.MaxPrecision).Editable(true);
                                        model.Field(p => p.IsObsolete).Editable(true);                                    
                                    }
                                }
                            )

                        )

                    )

@(Html.Kendo().Grid(Model.List3)
                     .Name("List3")
                     .HtmlAttributes(new { style = "width:auto;height:100%" })
                     .ToolBar(toolbar => toolbar.Create().Text("Add New Record"))
                     .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
                     .Columns(columns =>
                         {
                             columns.Bound(p => p.Title)
                                     .ClientTemplate("#= Title #" +
                                        "<input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' />")
                                     .Title("Title").HtmlAttributes(new { style = "width:30%" });
                             columns.Bound(p => p.MaxPrecision).Title("Decimal Places")
                                     .ClientTemplate("#= MaxPrecision #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' />");                                 
                             columns.Bound(p => p.IsObsolete).Title("Obsolete")
                                 .ClientTemplate("#= IsObsolete #" +
                                            "<input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' />");
                         })
                    .DataSource(datasource => datasource
                        .Ajax()
                        .Model(model =>
                                {
                                    {
                                        model.Id(p => p.Title);
                                        model.Field(p => p.Title).Editable(true);
                                        model.Field(p => p.MaxPrecision).Editable(true);
                                        model.Field(p => p.IsObsolete).Editable(true);                                    
                                    }
                                }
                            )

                        )

                    )

}

控制器代码

[HttpPost]
    public ActionResult Save(ListViewModel viewModel)
    {
        //This is getting called 3 times. But this is supposed to be called 1 time
        if (ModelState.IsValid)
        {
            if (viewModel != null)
            {
                try
                {
                    viewModel.Save(viewModel);
                    return View("Index", viewModel); 
                }
                catch (Exception e)
                {
                    return View("Index", viewModel);
                }
            }
        }

2 个答案:

答案 0 :(得分:0)

我认为这是预期的,因为你有3个启用了ajax的网格。由于它们被设置为ajax网格,因此它们应该彼此独立地运行。

答案 1 :(得分:0)

我认为如果在html帮助器中将null传递给kendo Grid的数据源,则Grid将构建在remote data mode而不是local data mode中,因为读取的Url未设置为当前浏览器Url将用于读取操作。

修复非常简单,只需确保在将模型用作数据源之前初始化模型中的列表。

像这样:

Html.Kendo().Grid(Model.List1) 
Model.List1 needs to be initialized.