内联编辑在Kendo MVC中不起作用 [英] Inline Editing is not working in Kendo MVC
问题描述
下面是我的.cshtml
@using Kendo.Mvc.UI
@model IEnumerable<WebApplication1.Models.DemoViewModel>
@{
Layout = null;
ViewBag.Title = "Home Page";
}
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.aspnetmvc.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="PageContentHeading">
<h3>
<span>Select the company to view the document sharing area</span>
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
@(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()
.Name("SiteDetail")
.Columns(columns =>
{
columns.Bound(p => p.name).Title("Name");
columns.Bound(p => p.gender).Title("Gender");
columns.Bound(p => p.designation).Title("Designation");
columns.Bound(p => p.department).Title("Department");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250).Title("Action");
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control" id='FieldFilter' placeholder="Search by Company Details">
</div>
</div>
</div>
</div>
</text>);
})
.Navigatable()
.Pageable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.Scrollable()
.DataSource(dataSource => dataSource // Configure the grid data source
.Ajax()
.PageSize(10)
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(destroy=> destroy.Action("EditingInline_Destroy", "Home")
.Model(model =>{ model.Id(x => x.id);})
)
)
</div>
</div>
</div>
下面是我的控制器
public ActionResult EditingInline_Read([DataSourceRequest]DataSourceRequest request)
{
List<TestDemo> _tst = new List<TestDemo>();
_tst.Add(new TestDemo { name = "ddd", gender = "ffs", designation = "ff", department = "fdf" });
_tst.Add(new TestDemo { name = "ddd1", gender = "ffs1", designation = "ff1", department = "fdf1" });
DemoViewModel model = new DemoViewModel();
model.Testlist = _tst.AsEnumerable().Select(x => x);
DataSourceResult result = model.Testlist.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, DemoViewModel product)
{
if (product != null && ModelState.IsValid)
{
//productService.Update(product);
}
return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, DemoViewModel product)
{
if (product != null)
{
//productService.Destroy(product);
}
return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}
EditingInline_Read被调试器击中，但Update和Destroy未被调试器击中.有人可以建议在Kendo网格中进行更新和删除的方法是什么.
我也看到了一种解决方法，也可以删除[AcceptVerbs(HttpVerbs.Post)]，但这仍然对我不起作用.
EditingInline_Read is being hit by debugger but Update and Destroy are not being hit by debugger. Can someone suggest what is the approach for update and Delete in Kendo grid.
I have seen workaround also to remove [AcceptVerbs(HttpVerbs.Post)] but still this does not work for me.
推荐答案
我的观察结果:
EditingInline_Read() -> DataSourceResult result = model.Testlist.ToDataSourceResult(request);
上面的代码将转换List<TestDemo>作为结果，而不是DemoViewModel.请调试该代码并检查结果.
The above code will convert List<TestDemo> as result, not DemoViewModel.Please debug this code and check the result.
在视图中，您使用了DemoViewModel:
@(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()
In the view you used DemoViewModel:
@(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()
而且您仍然具有正确的列绑定！
And still you have the correct column bindings!
columns.Bound(p => p.name).Title("Name");
columns.Bound(p => p.gender).Title("Gender")
.....
columns.Bound(p => p.name).Title("Name");
columns.Bound(p => p.gender).Title("Gender")
.....
所以我认为Name，Gender在DemoViewModel中也可用.
So I think Name,Gender are also available in DemoViewModel.
GridView将list(DataSource)中的每个对象显示为一行，并仅对单个对象调用Update和destroy方法.
GridView shows each object in at list(DataSource) as row.And call Update and destroy methods for the single object only.
可能的解决方案:
将GridView的绑定更改为TestDemo.
Change the Binding of GridView to TestDemo.
更改接受TestDemo类型对象的Update和Destroy方法.
Change Update and Destroy methods that accepts object of type TestDemo.
我希望这会对您有所帮助.
I hop this will help you.
这篇关于内联编辑在Kendo MVC中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
