Databases
StackOverflow2013
Postsdbo
POForm is posting back multiple times if there are multiple grids in a view (Kendo Grid MVC)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForm is posting back multiple times if there are multiple grids in a view (Kendo Grid MVC)
    text
    copied!<p>I have 3 Kendo grids and a Save button in a view. When I click on Save button, I get the updated ViewModel in my controller’s action method which in turns add/update records in database. But the save action method is called 3 times because there are 3 kendo grids on the view. I removed 2 grids from the view and it post backs only time since the view has only one grid (weird).</p> <p>How to stop multiple postbacks when the Save button is clicked?</p> <p>Index.cshtml</p> <pre><code>@using (Html.BeginForm("Save", "UDFController", FormMethod.Post)) { &lt;input class="button" type="submit" name="save" value="Save"/&gt; @(Html.Kendo().Grid(Model.List1) .Name("List1") .HtmlAttributes(new { style = "width:auto;height:100%" }) .ToolBar(toolbar =&gt; toolbar.Create().Text("Add New Record")) .Editable(editable =&gt; editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) .Columns(columns =&gt; { columns.Bound(p =&gt; p.Title) .ClientTemplate("#= Title #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' /&gt;") .Title("Title").HtmlAttributes(new { style = "width:30%" }); columns.Bound(p =&gt; p.MaxPrecision).Title("Decimal Places") .ClientTemplate("#= MaxPrecision #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' /&gt;"); columns.Bound(p =&gt; p.IsObsolete).Title("Obsolete") .ClientTemplate("#= IsObsolete #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' /&gt;"); }) .DataSource(datasource =&gt; datasource .Ajax() .Model(model =&gt; { { model.Id(p =&gt; p.Title); model.Field(p =&gt; p.Title).Editable(true); model.Field(p =&gt; p.MaxPrecision).Editable(true); model.Field(p =&gt; p.IsObsolete).Editable(true); } } ) ) ) @(Html.Kendo().Grid(Model.List2) .Name("List2") .HtmlAttributes(new { style = "width:auto;height:100%" }) .ToolBar(toolbar =&gt; toolbar.Create().Text("Add New Record")) .Editable(editable =&gt; editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) .Columns(columns =&gt; { columns.Bound(p =&gt; p.Title) .ClientTemplate("#= Title #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' /&gt;") .Title("Title").HtmlAttributes(new { style = "width:30%" }); columns.Bound(p =&gt; p.MaxPrecision).Title("Decimal Places") .ClientTemplate("#= MaxPrecision #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' /&gt;"); columns.Bound(p =&gt; p.IsObsolete).Title("Obsolete") .ClientTemplate("#= IsObsolete #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' /&gt;"); }) .DataSource(datasource =&gt; datasource .Ajax() .Model(model =&gt; { { model.Id(p =&gt; p.Title); model.Field(p =&gt; p.Title).Editable(true); model.Field(p =&gt; p.MaxPrecision).Editable(true); model.Field(p =&gt; p.IsObsolete).Editable(true); } } ) ) ) @(Html.Kendo().Grid(Model.List3) .Name("List3") .HtmlAttributes(new { style = "width:auto;height:100%" }) .ToolBar(toolbar =&gt; toolbar.Create().Text("Add New Record")) .Editable(editable =&gt; editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) .Columns(columns =&gt; { columns.Bound(p =&gt; p.Title) .ClientTemplate("#= Title #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].Title' value='#= Title #' /&gt;") .Title("Title").HtmlAttributes(new { style = "width:30%" }); columns.Bound(p =&gt; p.MaxPrecision).Title("Decimal Places") .ClientTemplate("#= MaxPrecision #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].MaxPrecision' value='#= MaxPrecision #' /&gt;"); columns.Bound(p =&gt; p.IsObsolete).Title("Obsolete") .ClientTemplate("#= IsObsolete #" + "&lt;input type='hidden' name='DateFields[#= index(data)#].IsObsolete' value='#= IsObsolete #' /&gt;"); }) .DataSource(datasource =&gt; datasource .Ajax() .Model(model =&gt; { { model.Id(p =&gt; p.Title); model.Field(p =&gt; p.Title).Editable(true); model.Field(p =&gt; p.MaxPrecision).Editable(true); model.Field(p =&gt; p.IsObsolete).Editable(true); } } ) ) ) } </code></pre> <p>Controller Code</p> <pre><code>[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); } } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload