Post
Ask Question

Populating A ListView With Data Using Kendo Listview And Entity Framework In ASP.NET MVC 5

Prerequisites 
  • Visual Studio
  • SQL Server
  • Basic knowledge in Kendo UI
  • Basic knowledge in MVC
  • Basic knowledge in Entity Framework
  • Basic knowledge In jQuery
Article Flow 
  • Create table in SQL Server
  • Create Empty Project in ASP.Net MVC
  • Integrate EntityFramework
  • Create Controller and View
  • Enable Kendo UI ListView
  • Call MVC Action Method in Jquery Ajax to bind data to Kendo Listview
  • Configure RouteConfig
  • Summary
Create a Table in SQL Server

First, we will create a table in SQL Server with the dummy values to populate the data into Kendo ListView. I have designed the below table. 

Execute the below query to create a table with the above design.
  1. CREATE TABLE [dbo].[Employee](  
  2. [ID] [bigint] IDENTITY(1,1) NOT NULL,  
  3. [Name] [nvarchar](max) NULL,  
  4. [Designation] [nvarchar](200) NULL,  
  5. [Location] [nvarchar](200) NULL,  
  6. CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED  
  7. (  
  8. [ID] ASC))   
And, insert a few dummy records to view in our project UI.

 

Execute the below query to insert the same dummy values.
  1. SET IDENTITY_INSERT [dbo].[Employee] ON  
  2. GO  
  3. INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location]) VALUES (1, N'Gnanavel Sekar', N'Software Engineer', N'Chennai')  
  4. GO  
  5. INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location]) VALUES (3, N'Robert', N'Application Developer', N'Chennai')  
  6. GO  
  7. INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Location]) VALUES (4, N'Ramar', N'TechLead', N'Chennai')  
  8. GO  
  9. SET IDENTITY_INSERT [dbo].[Employee] OFF  
  10. GO  
Create Empty Project in ASP.NET MVC

If you are not aware of the process to create ASP.NET MVC empty project, follow the steps 1 to 3 here. Here, I named it as KendoListView.

 

Integrate EntityFramework

I already discussed in a previous article about how to integrate Entity Framework with MVC. For that, refer here and once you integrate the Entity Framework with your MVC application, you will get the screenshot, as shown below.

 

And also, it generates a connection string in web.config file.
  1. <connectionStrings>  
  2.     <add name="CSharpCornerEntities" connectionString="metadata=res://*/Models.Model1.csdl|res://*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=CSharpCorner;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />   
  3. </connectionStrings>  
Create a Controller and View

To create a Controller, follow the below steps one by one.

Step 1

Right click on Controllers folder under your project and select Add-> Controller. 

 

Step 2

Select Empty controller and click Add.

 

Step 3

Name your Controller. Here, I named it as "ListViewController" and you can see that on below screen.

 

Create a View 

To create a View, right click on the generated action method Index and select "Add View".

 

You will get to the below screen. Name it as "Index" and select Empty Template without a Model. Click Add.

 

Enable Kendo UI ListView

Step 1 Call Kendo Scripts and CSS 

To access the predefined functionality from Kendo UI, we need to call the following scripts and CSS in our application. So, just add the below references in the <head> tag. 
  1. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />  
  2. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />  
  3. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />  
  4. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  5. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
Step 2 Create a ListView

Add the below codes to your View to create a ListView.
  1. <body>  
  2.     <div id="example">  
  3.         <div class="demo-section k-content wide">  
  4.             <div id="listView"></div>  
  5.             <div id="pager" class="k-pager-wrap"></div>  
  6.         </div>  
  7.         <script type="text/x-kendo-template" id="template">  
  8.             <div class="employee">  
  9.                 <h2>#:Name#</h2> <br />  
  10.                 <h3>#:Designation#</h3>  
  11.                 <h3>#:Location#</h3>  
  12.             </div>  
  13.         </script>  
  14.         <style>  
  15.             #listView {  
  16.                 padding: 10px 5px;  
  17.                 margin-bottom: -1px;  
  18.                 min-height: 510px;  
  19.                 font: inherit;  
  20.             }  
  21.   
  22.             .employee {  
  23.                 float: left;  
  24.                 position: relative;  
  25.                 width: 300px;  
  26.                 height: 170px;  
  27.                 margin: 0 5px;  
  28.                 border: double;  
  29.                 background-color: #73C6B6;  
  30.                 border-radius: 5px;  
  31.                 color: white;  
  32.             }  
  33.   
  34.             .employee img {  
  35.                 width: 110px;  
  36.                 height: 110px;  
  37.             }  
  38.   
  39.             .employee h3 {  
  40.                 margin: 0;  
  41.                 padding: 3px 5px 0 0;  
  42.                 overflow: hidden;  
  43.                 line-height: 1.1em;  
  44.                 font-size: .9em;  
  45.                 font-weight: normal;  
  46.                 text-transform: uppercase;  
  47.                 color: white;  
  48.             }  
  49.   
  50.             .employee p {  
  51.                 visibility: hidden;  
  52.             }  
  53.   
  54.             .employee:hover p {  
  55.                 visibility: visible;  
  56.                 position: absolute;  
  57.                 width: 110px;  
  58.                 height: 110px;  
  59.                 top: 0;  
  60.                 margin: 0;  
  61.                 padding: 0;  
  62.                 line-height: 110px;  
  63.                 vertical-align: middle;  
  64.                 text-align: center;  
  65.                 color: #fff;  
  66.                 background-color: rgba(0, 0, 0, 0.75);  
  67.                 transition: background .2s linear, color .2s linear;  
  68.                 -moz-transition: background .2s linear, color .2s linear;  
  69.                 -webkit-transition: background .2s linear, color .2s linear;  
  70.                 -o-transition: background .2s linear, color .2s linear;  
  71.             }  
  72.   
  73.             .k-listview:after {  
  74.                 content: ".";  
  75.                 display: block;  
  76.                 height: 0;  
  77.                 clear: both;  
  78.                 visibility: hidden;  
  79.             }  
  80.         </style>  
  81.     </div>  
  82. </body>  
Detailed Description
  1. <div id="listView"></div>   
The above div will act as listview and all the data is appended here.
  1. <script type="text/x-kendo-template" id="template">  
  2.     <div class="employee">  
  3.         <h2>#:Name#</h2> <br />  
  4.         <h3>#:Designation#</h3>  
  5.         <h3>#:Location#</h3>  
  6.     </div>  
  7. </script>  
  8. <style>  
The above Kendo template will help us to access the data from Kendo ListView and all database data is loaded here. Here, we mentioned to load only the name, designation, and location. Our database column should be present between the # symbol to load the database data to the kendo listview template.

Enable Kendo listview controller to HTML 5 div "Listview" 

To enable kendo listview to our HTML 5 div, add the kendoListView() to the respective Controller. In below code, you can see that "ListView" represents div name.
  1. $("#listView").kendoListView();  
Write logic in controller to load data from database

Write the below codes in your Controller to load the data from database using Entity Framework.
  1. [HttpGet]  
  2. public JsonResult GetData()   
  3. {  
  4.     CSharpCornerEntities ce = new CSharpCornerEntities();  
  5.     var result = ce.Employees.ToList();  
  6.     return Json(result, JsonRequestBehavior.AllowGet);  
  7. }  
Call MVC Action Method "GetData" in jQuery AJAX to bind the data to Kendo ListView.
  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         $(function() {  
  4.             $.ajax({  
  5.                 type: "GET",  
  6.                 url: "/ListView/GetData",  
  7.                 contentType: "application/json; charset=utf-8",  
  8.                 dataType: "json",  
  9.                 success: function(responseData) {  
  10.                     var dataSource = new kendo.data.DataSource({  
  11.                         data: responseData,  
  12.                         pageSize: 3  
  13.                     });  
  14.                     $("#pager").kendoPager({  
  15.                         dataSource: dataSource  
  16.                     });  
  17.                     $("#listView").kendoListView({  
  18.                         dataSource: dataSource,  
  19.                         template: kendo.template($("#template").html())  
  20.                     });  
  21.                 },  
  22.                 failure: function(response) {  
  23.                     alert(response.responseText);  
  24.                 },  
  25.                 error: function(response) {  
  26.                     alert(response.responseText);  
  27.                 }  
  28.             });  
  29.         });  
  30.     });  
  31. </script>  
Detailed Description 
  1. $.ajax({  
  2. type: "GET",  
  3. - > We need to set whether we getting / posting the data  
  4. url: "/ListView/GetData",  
  5. - > It 's represent url of api / Calling mvc action method, Here ListView represents MVC controller and GetData represents Action method  
  6. contentType: "application/json; charset=utf-8",  
  7. dataType: "json",  
  8. - > Type of data  
  9. success: function(responseData) {  
  10. - > Once this call succeed it will  
  11. return the json data from respective url  
  12. var dataSource = new kendo.data.DataSource({  
  13.     data: responseData,  
  14.     - > Returned data 's assigned to the kendo datasource  
  15.     pageSize: 3 - > Represents list of item needs to be listed in a page  
  16. });  
  17. $("#pager").kendoPager({- > Enabling the pagination  
  18.     for listview  
  19.     dataSource: dataSource - > The pagination will will work based on this kendo listview databsource  
  20. });  
  21. $("#listView").kendoListView({  
  22.     dataSource: dataSource,  
  23.     - > Loaded data 's are assigned to kendo listview  
  24.     template: kendo.template($("#template").html()) - > Enabling the Kendo template to read or post data from kendo listview  
  25. });  
  26. },  
  27. failure: function(response) {  
  28. alert(response.responseText); - > It will be fired  
  29. if ajax call fails  
  30. },  
  31. error: function(response) {  
  32. alert(response.responseText); - > It will be fired  
  33. if ajax call get 's error  
  34. }  
  35. });  
  36. });  
  37. });  
Complete View 
  1. @ {  
  2.     ViewBag.Title = "Index";  
  3. } < link rel = "stylesheet"  
  4. href = "http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" / > < link rel = "stylesheet"  
  5. href = "http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" / > < link rel = "stylesheet"  
  6. href = "http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" / > < script src = "http://code.jquery.com/jquery-1.12.4.min.js" > < /script> < script src = "http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js" > < /script> < script type = "text/javascript" > $(document).ready(function() {  
  7.     $(function() {  
  8.         $.ajax({  
  9.             type: "GET",  
  10.             url: "/ListView/GetData",  
  11.             contentType: "application/json; charset=utf-8",  
  12.             dataType: "json",  
  13.             success: function(responseData) {  
  14.                 var dataSource = new kendo.data.DataSource({  
  15.                     data: responseData,  
  16.                     pageSize: 3  
  17.                 });  
  18.                 $("#pager").kendoPager({  
  19.                     dataSource: dataSource  
  20.                 });  
  21.                 $("#listView").kendoListView({  
  22.                     dataSource: dataSource,  
  23.                     template: kendo.template($("#template").html())  
  24.                 });  
  25.             },  
  26.             failure: function(response) {  
  27.                 alert(response.responseText);  
  28.             },  
  29.             error: function(response) {  
  30.                 alert(response.responseText);  
  31.             }  
  32.         });  
  33.     });  
  34. }); < /script> < body > < div id = "example" > < div class = "demo-section k-content wide" > < div id = "listView" > < /div> < div id = "pager"  
  35. class = "k-pager-wrap" > < /div> < /div> < script type = "text/x-kendo-template"  
  36. id = "template" > < div class = "employee" > < h2 > #: Name# < /h2> < br / > < h3 > #: Designation# < /h3> < h3 > #: Location# < /h3> < /div> < /script> < style > #listView {  
  37.     padding: 10 px 5 px;  
  38.     margin - bottom: -1 px;  
  39.     min - height: 510 px;  
  40.     font: inherit;  
  41. }.employee {  
  42.     float: left;  
  43.     position: relative;  
  44.     width: 300 px;  
  45.     height: 170 px;  
  46.     margin: 0 5 px;  
  47.     padding: 0;  
  48.     background - color: #73C6B6;  
  49. border-radius: 5px;  
  50. color: white;  
  51. }  
  52. .employee img {  
  53. width: 110px;  
  54. height: 110px;  
  55. }  
  56. .employee h3 {  
  57. margin: 0;  
  58. padding: 3px 5px 0 0;  
  59. overflow: hidden;  
  60. line-height: 1.1em;  
  61. font-size: .9em;  
  62. font-weight: normal;  
  63. text-transform: uppercase;  
  64. color: white;  
  65. }  
  66. .employee p {  
  67. visibility: hidden;  
  68. }  
  69. .employee:hover p {  
  70. visibility: visible;  
  71. position: absolute;  
  72. width: 110px;  
  73. height: 110px;  
  74. top: 0;  
  75. margin: 0;  
  76. padding: 0;  
  77. line-height: 110px;  
  78. vertical-align: middle;  
  79. text-align: center;  
  80. color: # fff;  
  81.     background - color: rgba(0, 0, 0, 0.75);  
  82.     transition: background .2 s linear,  
  83.     color .2 s linear; - moz - transition: background .2 s linear,  
  84.     color .2 s linear; - webkit - transition: background .2 s linear,  
  85.     color .2 s linear; - o - transition: background .2 s linear,  
  86.     color .2 s linear;  
  87. }.k - listview: after {  
  88.     content: ".";  
  89.     display: block;  
  90.     height: 0;  
  91.     clear: both;  
  92.     visibility: hidden;  
  93. } < /style> < /div> < /body>  
Complete Controller 
  1. using KendoListview.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7. namespace KendoListview.Controllers {  
  8.     public class ListViewController: Controller {  
  9.         //  
  10.         // GET: /ListView/  
  11.         public ActionResult Index() {  
  12.                 return View();  
  13.             }  
  14.             [HttpGet]  
  15.         public JsonResult GetData() {  
  16.             CSharpCornerEntities ce = new CSharpCornerEntities();  
  17.             var result = ce.Employees.ToList();  
  18.             return Json(result, JsonRequestBehavior.AllowGet);  
  19.         }  
  20.     }  
  21. }  
I Added few more dummy records in database table to perform pagination
 

Configure RouteConfig.cs

Here, we need to mention the Homepage, that means, we need to mention which Controller and which Action needs to be executed first. By default, it will be in Home and Index. Here, we created the Controller in the name of ListView. So, in the Controller, I mentioned the name "ListView". 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7. namespace KendoListview {  
  8.     public class RouteConfig {  
  9.         public static void RegisterRoutes(RouteCollection routes) {  
  10.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  11.             routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {  
  12.                 controller = "ListView", action = "Index", id = UrlParameter.Optional  
  13.             });  
  14.         }  
  15.     }  
  16. }  
Now, run your application.



Now, change the Pagination length for each page in Kendo ListView. Here, I changed the pageSize from 3 to 5.
  1. var dataSource = new kendo.data.DataSource({  
  2.     data: responseData,  
  3.     pageSize: 5  
  4. });  
Now, run your application.

 

Here, we have created an empty project so it can not get build in CSS. So, I have attached the respective CSS under Content folder and referred to a project. Refer the attached project which contains View, Controller, Scripts, and CSS without Entity files.

Summary 

In this article, you learned to bind the data to Kendo ListView and how to use it. I hope you got the clear picture about Kendo ListView. For more configuration, visit here.


Similar Articles