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

I am trying to implement search criteria which bind to Kendo Ui grid. However it return no record and no error display. In SearchProduct it return the data but it would not bind to grid

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

Is there something i missed?

我错过了什么吗？

Controller code :

控制器代码：

[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 :

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 View :

_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>

1 个解决方案

#1

Your SearchProduct action should return JSON data for the grid.

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

See the Kendo Grid Demo - choose the ASP.NET MVC tab and look at the IndexController.Products_Read code.

请参阅Kendo Grid Demo - 选择ASP.NET MVC选项卡并查看IndexController.Products_Read代码。

You want something like this:

你想要这样的东西：

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

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

To pass the search parameters as extra data with the read ajax request, use the Data method:

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

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

See Kendo: Ajax Binding - Pass Additional Data to Action Method

请参阅Kendo：Ajax绑定 - 将附加数据传递给操作方法

#1