内联编辑在Kendo MVC中不起作用

时间:2016-08-05 09:49:18

标签: asp.net-mvc kendo-grid kendo-asp.net-mvc inline-editing

以下是我的.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,但UpdateDestroy未被调试器命中。有人可以建议什么是更新和Kendo网格中的删除方法。 我已经看到解决方法也删除[AcceptVerbs(HttpVerbs.Post)],但这对我不起作用。

1 个答案:

答案 0 :(得分:0)

我的观察:

EditingInline_Read() -> DataSourceResult result = model.Testlist.ToDataSourceResult(request);

以上代码会将List<TestDemo>转换为DemoViewModel,而不是@(Html.Kendo().Grid<WebApplication1.Models.DemoViewModel>()。请调试此代码并检查结果。

在视图中您使用了DemoViewModel: columns.Bound(p => p.name).Title("Name"); columns.Bound(p => p.gender).Title("Gender") .....

你仍然有正确的列绑定!

$(".btn-cart").click(function(){ $.ajax({ url: 'update_cart.php' , type: 'GET', success : function(data) { $("#cart_items_count").text(data); $("#cart_items_count").show(); }, error: function (xhr) { alert(xhr.responseText); } }); });

所以我认为在DemoViewModel中也可以使用Name,Gender。

GridView将列表中的每个对象(DataSource)显示为row.And仅调用单个对象的Update和destroy方法。

可能的解决方案:

将GridView的绑定更改为TestDemo。

更改更新和销毁接受TestDemo类型对象的方法。

我跳这会对你有帮助。