Local Binding
When configured for local binding, the ListView for ASP.NET MVC will serialize the data as part of its data source and will perform the majority of its operations on the client-side such as:
- Filtering
- Sorting
- Paging
This binding approach is beneficial if read-only data needs to be employed in the UI.
For a runnable example, refer to the demo on local binding of the ListView.
To configure the ListView for ASP.NET MVC to do local binding:
-
Define a model class or use an existing one from your application.
public class EmployeeViewModel { public int EmployeeID { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } public string Title { get; set; } [Required] public string Notes { get; set; } }
-
Open the
HomeController.cs
and return anIEnumerable
of the model type with the View. This is theView()
which holds the ListView definition.public ActionResult Index() { // Returns a collection of EmployeeViewModels. var employees = Enumerable.Range(1, 9) .Select(new EmployeeViewModel{ EmployeeID = i, FirstName = "FirstName" + i, LastName = "LastName" + i, Title = i % 2 == 0 ? "Manager": "CEO", Notes = i % 2 == 0 ? "Manager at your service": "CEO at your service" }); // For the purposes of demonstration, you can mock the data, and copy and paste this snippet. return View(employees); }
-
In the
Index.cshtml
view, configure the ListView to accept the model in its constructor and setServerOperations(false)
.@model IEnumerable<Kendo.Mvc.Examples.Models.EmployeeViewModel> <script type="text/x-kendo-tmpl" id="template"> <div class="employee"> <div class="details"> <h2>#=FirstName# #=LastName#</h2> <p>#=Title#</p> </div> <div class='bio'> #=Notes# </div> </div> </script> @(Html.Kendo().ListView(Model) .Name("listView") .TagName("div") .ClientTemplateId("template") .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .PageSize(3) ) .Pageable() )