Implementing Search criteria using MVC return no record

[David]

I am trying to implement search criteria which bind to Kendo Ui grid.
However it return no record and no error display. 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

@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.cshtml

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

[Petur Subev]

Hello David,

Basically to filter the Grid you should either use the filter method of the dataSource or the read method and pass additional parameters (your search criteria).

Based on the parameters send to the server you should return different number of records.

Or you can perform your own $.ajax request and return collection from the server which you can pass to the data method of the dataSource.


Kind regards,
Petur Subev
the Telerik team