如何在不重新加载整个页面的情况下刷新局部视图中的kendo ui网格?

时间:2015-12-30 17:00:18

标签: javascript ajax asp.net-mvc kendo-grid kendo-asp.net-mvc

美好的一天,

我很难刷新放置在局部视图中的剑道网格。在我的部分视图中查看我目前使用的代码:

@model IEnumerable<TelerikMvcAscernAdmin2.Models.ConnectionViewModel>
@(Html.Kendo().Grid(Model).Name("id").Sortable().Columns(c =>  {
  c.Bound(p => p.SystemId);
  c.Bound(p => p.Host);
  c.Bound(p => p.Port);})
  .DataSource(datasoure =>datasoure.Server().PageSize(25).Sort(sort=>{sort.Add(c => c.Host).Ascending(); })
                  ).Filterable()
  .Pageable(p => p.PageSizes(new int[] { 25, 35, 40 })
        .Refresh(true)).Groupable().Sortable().Scrollable(s => s.Height("200px")).RowAction(row =>   {
  if (row.DataItem.Port == 0) row.HtmlAttributes["style"] = "background:red";  }).HtmlAttributes(new { style = "width: 800px;" }) )

<script>  $(document).ready(function () {
          var refId = setInterval(function () {
          var grid = $("#id").data("kendoGrid");
          grid.dataSource.read();
          }, 40000);
          });   </script>

如您所见,我正在使用服务器端功能,以便我可以自动刷新此网格。我已经尝试将其切换到Ajax函数,但是当我这样做时,我的网格无法刷新。

我在Home视图中渲染了这个局部视图,如下所示:

@Html.Action("EngineConnection", "GatewayConnections")

另外,看一下我的动作控制器方法,我将所有数据都返回到局部视图:

public ActionResult EngineConnection()
    {
        var gatewayConnections = GatewayConnections.GetAllConnections();
        var agents = Agent.RetrieveAgents();
        var connectionViewModels = (from agent in agents.Where(a => a.Active)
                                    join gatewayConnection in gatewayConnections on agent.SystemId equals gatewayConnection.ClientId into
                                        agentConnections
                                    from agentConnection in agentConnections.DefaultIfEmpty()
                                    select
                                        new ConnectionViewModel
                                        {
                                            SystemId = agent.SystemId,
                                            Host = (agentConnection == null ? string.Empty : agentConnection.Host),
                                            Port = (agentConnection == null ? 0 : agentConnection.Port)
                                        }).ToList();
        return PartialView("_EngineConnection", connectionViewModels);
    }

我试过返回一个JSON对象,但这似乎没有办法。有没有办法只刷新网格而不是整个页面,仍然将网格保留在局部视图中?

任何建议都会有所帮助!

谢谢

1 个答案:

答案 0 :(得分:0)

我建议您按照绑定网格的方式。

    @(Html.Kendo().Grid<EntityStandardGridModel>()
    .Name("KendoEntityStandardGrid")
    .Columns(columns =>
      {
         //columns
      })
      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Scrollable(scrollable => scrollable.Virtual(true))
      .Resizable(resizable => resizable.Columns(true))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(100)
          .Model(model => model.Id(p => p.SearchId))
          .Read(read => read.Action("GetStandardGriddata", "Search", new { SearchId = Model.SearchId }))
        )
     )