2013-04-15 45 views
0

我想實現綁定到Kendo Ui網格的搜索條件。但它不返回記錄,也不顯示錯誤。在SearchProduct中,它返回的數據,但它不會綁定到網格使用MVC實現搜索條件不返回記錄

有什麼我錯過了?

控制器代碼:

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

回答

1

你r 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)); 
} 

要通過搜索參數與讀Ajax請求額外的數據,使用Data方法:

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

Kendo: Ajax Binding - Pass Additional Data to Action Method