当我尝试过滤（排序、分页等）我的网格时出现错误 500

Question

我无法让排序和分页功能与我的网格一起使用。我有一个使用 Ajax Databindning 填充数据的网格。但是，当我尝试刷新或更改过滤信息时收到错误 500。我有一个搜索功能，可以将每个输入传递给控制器​​。

        public ActionResult Results(FormCollection form)
    {
        string foo= form["foo"];
        string bar= form["bar"];


        model.Result(foo, bar);
        var data = model.FilterResult().Select(o => new SearchViewModel
                        {
                            //Binding SearchViewModel propertys with the XML-elements found in model.FilterResults().
                            Foo= o.Element("Foo").Value,
                            Bar = o.Element("Bar").Value
                        });

        return View(data);
    }

在控制器中，我调用了“Result()-Method”，它基本上将输入值设置为模型中的属性。 “FilterResult()”方法使用用户输入（属性）来使用 LINQ 查询 XML 文件。该方法返回一个带有 XElements 的 IENumerable。

我的观点是这样的：

Html.Telerik().Grid(Model)
                .Name("Search")
                .PrefixUrlParameters(false)
                .DataKeys(keys => { keys.Add(m => m.Foo); })
                            .Columns(columns =>
                            {
                                columns.Bound(o => o.Foo);
                                columns.Bound(o => o.Bar);
                            })
                .DataBinding(dataBinding =>
                {
                    dataBinding.Ajax()       
                        .Select("Results", "Search").Enabled(true);   
                })
                .Pageable(pager => pager.Enabled(true).PageSize(20))
                .Sortable(sorting => sorting.Enabled(true).OrderBy(sortOrder => sortOrder.Add(o => o.TimeStamp).Ascending()))
                .Filterable(filterable => filterable.Enabled(true))
                .Render();

当我尝试更改任何过滤设置时，我收到输入值的错误 500 和 NullException（在我的控制器中）。我已经意识到它是空的，因为它在没有用户进行新搜索的情况下回调控制器，导致空值。所以我想知道如何做到这一点？我只想对网格中已经存在的数据进行过滤和排序。

Answer 1

如果 foo 和 bar 是您页面上的表单元素，您可以使用 ajax 提交页面，这样当您进行数据绑定时，您会以相同的方式调用数据。然后在您的视图中，将 ClientEvents 添加到网格中。

.ClientEvents(events => events.OnDataBinding("onDataBinding"))

onDataBinding 函数如下所示：

<script type="text/javascript">
  function onDataBinding(e) {
    var foo = document.getElementById('foo').value;
    var bar = document.getElementById('bar').value;
    var params = { pFoo: foo, pBar: bar };
    var paramsStr = $.param(params);
    var selectUrl = '@Url.Action("Results", "Search")'
      + "?" + paramsStr;
    var grid = $('#Grid').data('tGrid');
    grid.ajax.selectUrl = selectUrl;
  } 
</script>

在您的控制器中，您传入的参数将是 foo 和 bar。

public ActionResult Results(string pFoo, string pBar)

提交函数如下所示：

<script type="text/javascript">
  function displaySummary() {
    var grid = $('#Grid').data('tGrid');
    var foo = document.getElementById('foo').value;
    var bar = document.getElementById('bar').value;
    $.ajax(
    {
      type: 'POST',
      url: '@Url.Action("Results", "Search")',
      dataType: 'json',
      data: { pFoo: foo, pBar: bar },
      success: function (result) {
        grid.dataBind(result);
      },
      error: function (req, status, error) {
        alert("Sorry! Error. " + status + error);
      }
    });
  }
</script>