刷新后剑道网格数据未正确绑定

Question

当我加载页面时，它是一个部分页面，网格中填充了数据

但是一旦我像这样调用刷新方法

<button onclick="doRefresh">refresh</button>
<script type="text/javascript">
    var doRefresh = function () {
            var kendogrid = $("#this_Id").data("kendoGrid");                 
            kendogrid.refresh();
    }
</script>

它应该刷新网格并使用当前绑定到网格的数据源重建它。但是网格变空了

我认为我绑定模型错误，因为一旦我刷新网格，我就会丢失所有数据。我已经尝试绑定模型并使用 bindto 方法作为mentioned here。

这是我的看法：

 @model List<bModel>

 @(Html.Kendo().Grid(Model)
        .Name("this_Id") // template expression, to be evaluated in the master context
    .Columns(columns =>
    {
        columns.Bound(m => m.Sequence).Title("Seq.");
        columns.Bound(m => m.JobType).Title("Job Type");
        columns.Bound(m => m.Service).Title("Service");
        columns.Bound(m => m.Status).Title("Status");
        columns.Bound(m => m.PropertyType).Title("Property Type");
        columns.Bound(m => m.PropertySubType).Title("Property SubType");
        columns.Bound(m => m.Address).Title("Address");
    })
    .Sortable()
    .Selectable(s => s.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Row))
    .ClientDetailTemplateId("taskTemplate")
    .DetailTemplate(
               .......
        )
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model => model.Id(jobItem => jobItem.Id))
    )
    .Read(read => read.Action("GetJobForBulkUpdate", "Project", new { jobId = "#=Id#" }))
    .Events(events => events.DetailExpand("detailExpand"))
)

我正在像这样调用面板栏中的视图

@(Html.Kendo().PanelBar()
      .Name("panel-bar")
      .ExpandMode(PanelBarExpandMode.Multiple)
      .ExpandAll(true)
      .Items(panel =>
      {       
          panel.Add()
              .Text("<span id='batch-update-panel-bar-job'>JOB-TASK</span>")
              .Encoded(false)
              .Content("<div id='update-model'>" + Html.Action("BatchUpdateJob", "BatchUpdate", new { projectId = Model.Id}).ToHtmlString() + "</div>");      
      })
)

而控制器方法是这样的

public ActionResult BatchUpdateJob(int projectId)
{
    mymodel = something;
    return PartialView("_MymodelPageJob", mymodel);
}

public ActionResult GetJobForBulkUpdate(int projectId, [DataSourceRequest] DataSourceRequest request)
    {            
           List<OfData> jobData = getData();
        return Json(jobData.ToDataSourceResult(request));
    }

Answer 1

更新：用户将绑定更改为 Ajax，问题是返回的数据格式不正确。按照下面的 ajax 格式示例修复传入的数据格式有助于解决问题。

一旦我调用刷新方法，就像这个网格变成空的。 kendogrid.refresh();

使用正确的 Html.Action 不确定您的控制器是否被击中

@Html.Action("BatchUpdateJob", "ControllerName", new { projectId = Model.Id });

您只是在没有数据的情况下在网格上调用刷新，当然它会显示为空。因此，您希望根据特定的 setTimeout 自动刷新网格，因为目标数据在特定时间间隔后可能会有所不同。

请勿使用！您的做法有误，请查看文档并清除您的基础知识

    var kendogrid = $("#this_Id").data("kendoGrid");
    console.log(kendogrid.dataItem());
    kendogrid.refresh();

改用这个 -

 //read will request the server and reload only reload datasource
    $('#this_Id').data('kendoGrid').dataSource.read();

    //refresh will re-render items in grid from the current datasource
    $('#this_Id').data('kendoGrid').refresh(); 

现在 ---- 应用户要求，我正在为 AJAX 和 服务器端绑定 添加示例演示。

AJAX BINDING ： 如 Telerik 文档 Ajax binding

中所述

视图模型

 public class ProductViewModel
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public short? UnitsInStock { get; set; }
    }

Razor 语法中的网格

  @(Html.Kendo().Grid<KendoGridAjaxBinding.Models.ProductViewModel>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax() 
      //Set the action method which will return the data in JSON format.    
          .Read(read => read.Action("Products_Read", "Home")) 

       )
       )
      .Columns(columns =>
      {
          columns.Bound(product => product.ProductID);
          columns.Bound(product => product.ProductName);
          columns.Bound(product => product.UnitsInStock);
      })
      .Pageable()
      .Sortable()
)

控制器

 public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                //Convert the Product entities to ProductViewModel instances.
                DataSourceResult result = products.ToDataSourceResult(request, product => new ProductViewModel
                        {
                        ProductID = product.ProductID,
                        ProductName = product.ProductName,
                        UnitsInStock = product.UnitsInStock
                        });
                return Json(result);
            }
        }

服务器端绑定： 如 Telerik 文档 Server side binding

中所述

有几种方法可以做到这一点：

• 绑定到视图模型
• 使用 ViewData 或 ViewBag 绑定到项目
• BindTo 方法将附加数据传递给操作方法

这里是讨论服务器端绑定的github解决方案 下载吧 看看你缺少什么 - Server side binding