Question

我正在尝试实现绑定到Kendo Ui网格的搜索条件。但它没有返回记录，也没有显示错误。在SearchProduct中，它返回数据，但不会绑定到网格

我错过了什么吗？

控制器代码：

[HttpPost]
public ActionResult SearchProduct(ProductSearchCriteria criteria)
{          
    string nameCriteria = string.Empty;
    string descCriteria = string.Empty;

    TTSEntities dc = new TTSEntities();
    if (!string.IsNullOrWhiteSpace(criteria.Name))
      nameCriteria = criteria.Name.ToLower().Trim();

    if (!string.IsNullOrWhiteSpace(criteria.Community))
      descCriteria = criteria.Desc.ToLower().Trim();

    var results = dc.Products.AsQueryable();
    if (criteria.Name!= null)
        results = results.Where(b => b.Name== criteria.Name);

    if (criteria.Desc!= null)
        results = results.Where(b => b.Desc== criteria.Desc);

    return PartialView("_ProductGrid", results.ToList());
}

Index.cshtml：

@model HHIMS_Web_App.Models.ProductSearchCriteria

@using (Html.BeginForm())
{
    <div id="headerpanel">
      <fieldset>
        <legend style="font-size:14px">Search Criteria</legend>
        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                 @Html.EditorFor(model => model.Name)
            </div>
        </div>
        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Desc)
            </div>
            <div class="editor-field">
                   @Html.EditorFor(model => model.Desc)
            </div>
            <div class="smallBox">
                <input type="button" value="Search" id="btnProductSearch" style="height:33px; font-size:14px; background-color:#3399FF" class="k-button" />
            </div>
        </div>
    </fieldset>
  </div>
}

<script type="text/javascript">

    $(document).ready(function () {

        $('#btnProductSearch').click(function (e) {
            var searchParameters = GetSearchParameters();
            var jsonData = JSON.stringify(searchParameters, null, 2);

            $.ajax({
                url: '@Url.Content("~/ProductDetails/SearchProduct/")',
                type: 'POST',
                data: jsonData,
                datatype: 'html',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $('#btnProductSearch').replaceWith(data);
                },
                error: function (request, status, err) {
                    alert(status);
                    alert(err);
                }
            });

        });

        function GetSearchParameters() {
            var hrn = $("#Name").val();
            var community = $("#Desc").val();

            return { Name: name,
                Desc: desc
            };
        }
    });

</script>

_ProductGrid查看：

<div>
    <fieldset class="searchResults">
        <legend style="font-size:14px">Search Result</legend>
        <br />
        <div>
          @(Html.Kendo().Grid<TTP.Models.ProductModel>()

                .Name("Product")
                .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:500px" })
                .Columns(columns =>
                {

                    columns.Bound(p => p.Name);
                    columns.Bound(p => p.Desc);
                })
                .AutoBind(false)
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Sortable()
                    //.Pageable()
                .Pageable(paging => paging
                    .Input(false)
                    .Numeric(true)

                    .PreviousNext(true)
                    .PageSizes(new int[] { 5, 10, 25, 50 })
                    .Refresh(false)
                )
                .Selectable()
                .Scrollable()
                .ColumnMenu(c => c.Columns(false))
                .DataSource(dataSource => dataSource
                    .Ajax()//bind with Ajax instead server bind
                    .PageSize(10)
                    .ServerOperation(true)
                    .Model(model =>
                      {
                        model.Id(p => p.Name);
                      }
                    )
                )
            )

        </div>
    </fieldset>
</div>

Answer 1

您的SearchProduct操作应返回网格的JSON数据。

请参阅Kendo Grid Demo - 选择ASP.NET MVC标签，然后查看IndexController.Products_Read代码。

你想要这样的东西：

public ActionResult SearchProduct(
  ProductSearchCriteria criteria,
  [DataSourceRequest] DataSourceRequest dsr
)
{
  IQueryable<Product> query = ...

  return Json( query.ToDataSourceResult( dsr ) );
}

要使用read ajax请求将搜索参数作为额外数据传递，请使用Data方法：

dataSource.Read( read => read.Data( "GetSearchParameters" ) )

请参阅Kendo: Ajax Binding - Pass Additional Data to Action Method

使用MVC实现搜索条件不返回任何记录

1 个答案: