I’m using MVC Kendo grid and few drop down lists as filters and search button. Grid is bound using Ajax. The filters are defined outside of the grid. When user clicks on the search button i am passing the selected filter values to action method as Model, do the search and return the result. This is working fine when user selects the filter.
However, One of the filter is required filter, so I have [Required] attribute on the model’s property. When user don’t select the required filter, it makes the GetData() action method as expected, I see ModelState is NOT valid as expected.
But here im not sure what should I return when Model is not valid,
Questions:
I have validation summary on the layout page, how do I show model error in ValidationSummary without clearing the grid?When action method returns error, I don’t want to clear the existing result in the Grid. The error should display on top of the page.
Note: For brevity purpose my sample below showing only one filter. Also I’m not worrying about client side validation.
Layout Page
<html><head> @Styles.Render("~/Content/css") @Styles.Render("~/Content/kendo/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/kendo") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jqueryval")</head><body> <div class="container body-content"> @Html.ValidationSummary() @RenderBody() <footer></footer> </div> @RenderSection("scripts", required: false)</body></html>Index Page
@model MyModel @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div> <br /> @Html.ListBoxFor(x => x.SelectedIDs, new MultiSelectList(Model.States, "ID", "Name")) @Html.ValidationMessageFor(m => m.SelectedIDs) </div> <input id="btnSearch" type="submit" width="100" value="Search" /> @(Html.Kendo().Grid<Person>() .Name("grid") .Columns(col => { col.Bound(p => p.ID); col.Bound(p => p.Name); }) .DataSource(ds => ds.Ajax() .Read(r => r.Action("GetData", "Working")) .PageSize(3)) .Pageable() .Sortable() .AutoBind(false) ) <script src="~/Scripts/Working.js"></script>
JavaScript
$(function () { var myModel = { SelectedIDs: [] }; var dataSource = $("#grid").data("kendoGrid").dataSource; dataSource.transport.options.read.data = getFilters; $("#btnSearch").click(function () { myModel.SelectedIDs = $("#SelectedIDs").val(); $("#grid").data("kendoGrid").dataSource.read(); $("#grid").data("kendoGrid").refresh(); }) function getFilters() { return myModel; } })Controller
public class WorkingController : Controller { public ActionResult Index() { var model = new MyModel(); return View(model); } public ActionResult GetData([DataSourceRequest]DataSourceRequest request, MyModel model) { if (!ModelState.IsValid) { // What should i return here so that Model error message will appear in ValidationSummary ??? } return Json(MockData.GetPersons().ToDataSourceResult(request), JsonRequestBehavior.AllowGet); } }
Model
public class MyModel { [Required(ErrorMessage = "State is required.")] public int[] SelectedIDs { get; set; } public IEnumerable<State> States { get { return MockData.GetStatesWithAbbr(); } } public IEnumerable<Person> Persons { get; set; } }1 Answer, 1 is accepted
Rank 1
I found a solution
http://stackoverflow.com/questions/14005773/use-asp-net-mvc-validation-with-jquery-ajax
and then we can user datasource's error event to display returned messages in validation summary using jquery
http://stackoverflow.com/questions/13653662/kendo-handling-errors-in-ajax-data-requests