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> <divclass="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> <inputid="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) ) <scriptsrc="~/Scripts/Working.js"></script>
JavaScript
$(function() { varmyModel = { SelectedIDs: [] }; vardataSource = $("#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(); }) functiongetFilters() { returnmyModel; } })
Controller
publicclassWorkingController : Controller { publicActionResult Index() { var model = newMyModel(); returnView(model); } publicActionResult GetData([DataSourceRequest]DataSourceRequest request, MyModel model) { if(!ModelState.IsValid) { // What should i return here so that Model error message will appear in ValidationSummary ??? } returnJson(MockData.GetPersons().ToDataSourceResult(request), JsonRequestBehavior.AllowGet); } }
Model
publicclassMyModel { [Required(ErrorMessage = "State is required.")] publicint[] SelectedIDs { get; set; } publicIEnumerable<State> States { get { returnMockData.GetStatesWithAbbr(); } } publicIEnumerable<Person> Persons { get; set; } }