A public action method 'ABC' was not found on controller xyz - asp.net-mvc

Question

Background:
I'm doing some changes in already implemented project, Which uses MVC, Kendo Grid.And there is onePost action method called EmployeeSearchByName which takes one string parameter 'Name'.Kendo Grid's pages size is 10 records per page, when I search someones name control properly goes to that action and it fetches the employee according name and shows it in kendo grid but when I click on next page in kendo then I get the error 'A public action method 'EmployeeSearchByName ' was not found on controller xyz'.
Code Of View:
#model Silicus.Finder.Web.ViewModel.EmployeesViewModel
#using Kendo.Mvc.UI;
#using Silicus.Finder.Models.DataObjects;
<link href="~/Content/css/FinderStyle.css" rel="stylesheet" />
#{
ViewBag.Title = "Employees List";
var message = TempData["AlertMessage"] ?? string.Empty;
var importMessage = Session["ImportEmployee"] ?? string.Empty;
Session["ImportEmployee"] = string.Empty;
}
<link href="~/Content/MyKendoStyle.css" rel="stylesheet" />
<link href="~/Content/css/FinderStyle.css" rel="stylesheet" />
<div class="container-fluid" style="padding-right: 0px;padding-left: 0px;">
<div id="modal-container" class="k-popup" tabindex="-1" role="dialog" style="border-style: hidden;margin-top:-100px">
<div class="modal-content" style=" position:fixed !important;z-index:auto;width:97%;">
</div>
</div>
</div>
<div id="adv" class="container-fluid" style="margin-left: 3%;">
<div class="ContainerPanel">
<div>
<span style="color:black; font-weight: bold;">Advanced Search</span>
<div class="header1 pull-right">
<img src="~/Images/Project/down-arrow.png" style="height:20px; margin-top: -3px;" />
</div>
<div class="content">
<br />
#using (Html.BeginForm("GetEmployeesByCriteria", "Employee", FormMethod.Post))
{
var model = Model.SearchCriteria;
var i = 0;
if (i == 0)
{
#Html.EditorFor(modelItem => model, new { htmlAttributes = new { #class = "form-control" } });
++i;
}
}
</div>
</div>
</div>
</div>
<div id="Grid" class="container-fluid" style="margin: 0.5% 3% 0.5% 3%;">
#(Html.Kendo().Grid((IEnumerable<Silicus.Finder.Web.ViewModel.EmployeesListViewModel>)Model.Employees)
.Name("employeeListGrid")
.Columns(columns =>
{
columns.Bound(employee => employee.FullName).Template(#<label>
#Html.ActionLink(item.FullName, "Details", "Employee", new { id = item.EmployeeCode }, new { #class = "modal-link" })
</label>
);
columns.Bound(employee => employee.EmployeeCode).Title("Employee Code");
columns.Bound(employee => employee.Title);
columns.Bound(employee => employee.HighestQualification).Sortable(false);
columns.Bound(employee => employee.EmployeeType).Sortable(false);
columns.Bound(employee => employee.TotalExperienceInMonths);
columns.Bound(employee => employee.SilicusExperienceInMonths).Sortable(false);
})
.Scrollable(scr => scr.Height(300))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Sortable(sortable => sortable.AllowUnsort(false))
)
</div>
#Scripts.Render("~/bundles/jquery")
<script>
//Details Modal Popup
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
$('#Grid').toggle();
$('#adv').toggle();
});
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
$(document).ready(function () {
$("#modal-container").hide();
$("#dialog-import-employee").hide();
});
$(window).load(function () {
$('#moduleHeaderTitleOnDashBoardImage').text("Employees");
$('#modal-container').hide();
});
$(".header1").click(function () {
$(".ContainerPanel").toggleClass("advance-width");
$header = $(this);
$content = $header.next();
$content.slideToggle(1, function () {
});
});
</script>
Question:How to resolve this ?

Answer 1

Kendo grid sends additional parameters which are used for its sorting & filtering.
Try to rewrite your action method like this:
public JsonResult GetIndexContent([DataSourceRequest]DataSourceRequest request, SearchCriteriaViewModel searchCriteria)
{
// your logic ... + return json
}
What we did additionally was telling the GridBuilder which Read method it should use. You even have the possibility to add searchCriteria as parameters;
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id("Id"))
.Read(read => read.Action("GetIndexContent", "YourControllerName").Data(fetchSearchCriteriaMethodName))
.PageSize(10)
);
The JavaScript function 'fetchSearchCriteriaMethodName' should just return your search criteria as a JSON object.