کار با Telerik Grid در MVC
سه شنبه 2 شهریور 1395Telerik یک شرکت بلغارستانی است که نرم افزارهایی برای وب ، موبایل و دسکتاپ را توسعه می دهد . در این مقاله ، نحوه کار با Telerik Grid را خواهید آموخت .
برای استفاده از Telerik UI ، یک پروژه جدید MVC ایجاد میکنیم . به Solution نگاه کنید .
ما یک entity data model برای اتصال به پایگاه داده ، همانند زیر اضافه کردیم :
در اینجا Connection String و Context را می بینید .
جدول پایگاه داده را در پنجره ORM می بینید .
به ساختار و داده های جدول احتیاج دارید ، که در زیر آن را می بینید .
USE [CodeX] GO /****** Object: Table [dbo].[tbl_employee] Script Date: 23/07/2016 1:29:43 AM ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[tbl_employee]( [id] [int] NOT NULL, [firstName] [nvarchar](50) NULL, [LastName] [nvarchar](50) NULL, [EmployeeId] [int] NULL, [Email] [nvarchar](50) NULL, [MobileNo] [nvarchar](10) NULL, [State] [nvarchar](30) NULL, [Country] [nvarchar](50) NULL, CONSTRAINT [PK_tbl_employee] PRIMARY KEY CLUSTERED ( [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (1, N'Debendra', N'Dash', 10090, N'debendra@gmail.com', N'8123371257', N'Odisha', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (2, N'Sridhar', N'Dash', 10090, N'sridhar1991@gmail.com', N'808900099', N'karnataka', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (11, N'Manas', N'sing', 56, N'manas@gmail.com', N'8090705545', N'UP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (40, N'Tushar', N'Jena', 78, N'Tusar@gmail.com', N'676789990', N'MP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (67, N'Rubi', N'singh', 90, N'Rubi32@gmail.com', N'8018070999', N'Ap', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (99, N'Sujit', N'Tiwari', 80, N'sujit@gmail.com', N'7894290976', N'UP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (120, N'Kabita', N'Kumari', 129, N'kabita@yahoo.com', N'7894290765', N'MP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (123, N'Dinesh', N'Kumar', 234, N'Dinesh123@gmail.com', N'8012345678', N'Bihar', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (150, N'Sachin', N'Tendulkar', 2345, N'sachin@gmail.com', N'8909900008', N'Assam', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (190, N'Sourav', N'Ganguli', 234, N'sourav@gmail.com', N'7894270987', N'WB', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (191, N'Pankaj', N'sahu', 188, N'pankaj.sahu@gmail.com', N'7894270987', N'WB', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (192, N'Kisan', N'agrawal', 177, N'contact@gmail.com', N'7894270989', N'AP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (193, N'Ravi', N'kumar', 199, N'Ravi@gmail.com', N'7894270989', N'ODISHA', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (194, N'Kumar', N'dora', 100, N'doea@gmail.com', N'3494270987', N'JHARKHAND', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (195, N'Prakash', N'jha', 30, N'jha12345@yahoo.com', N'7894270987', N'BIHAR', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (196, N'Jeetu', N'nayak', 34, N'jeetu@yahoo.com', N'7894270987', N'PUNJAB', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (197, N'Rani', N'sahu', 35, N'Rani@gmail.com', N'7894270987', N'GOA', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (198, N'Bharat', N'das', 67, N'bharat234@gmail.com', N'7894279900', N'GOA', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (199, N'OM', N'prakash', 68, N'OM@gmail.com', N'8090907090', N'AP', N'India') INSERT [dbo].[tbl_employee] ([id], [firstName], [LastName], [EmployeeId], [Email], [MobileNo], [State], [Country]) VALUES (200, N'Sujata', N'sahu', 29, N'sahu23@gmail.com', N'709087690', N'KARNATAKA', N'India') Now, after connecting with the database, I will go to NuGet Package Manager and download the following "TelerikMvcExtensions" dll in my project. It will add the following dll and scripts into my project, as follow. Now, I will add an Employee model, as shown below. using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Tellerik_grid.Models { public class employee { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Email { get; set; } public int EmployeeId { get; set; } public string MobileNo { get; set; } public string State { get; set; } public string Country { get; set; } } } Now, I will go to Home Controller and add an action method in it. public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GetData() { List<employee> li = new List<employee>(); CodeXEntities CX = new CodeXEntities(); var det = CX.tbl_employee; foreach(var x in det) { employee emp = new employee(); emp.Id = x.id; emp.FirstName = x.firstName; emp.LastName = x.LastName; emp.MobileNo = x.MobileNo; emp.State = x.State; emp.Country = x.Country; emp.Email = x.Email; emp.EmployeeId =Convert.ToInt32(x.EmployeeId); li.Add(emp); } return View(li); } This action method simply retrieves the data from my table and returns to the View. Now, this is how I will add a GetData View here. Now, here is my View where I have bound the controller data in Telerik Grid. @model IEnumerable<Tellerik_grid.Models.employee> @using Telerik.Web.Mvc.UI; @{ ViewBag.Title = "GetData"; } </br> <div> @{ Html.Telerik().Grid(Model) .Name("Grid") .DataKeys(keys => keys.Add(c => c.Id)) .Footer(true) .Sortable() .Filterable() .Scrollable(scr => scr.Height(330)) .Columns(x => { x.Bound(m => m.Id).Width(120).HeaderTemplate("UserId").Title("User ID").Groupable(false); x.Bound(m => m.FirstName).Width(120).Groupable(false).Filterable(true).Groupable(true); x.Bound(m => m.LastName).Width(120).Groupable(true).Filterable(true).Groupable(true); x.Bound(m => m.MobileNo).Width(120).HeaderTemplate("UserId").Filterable(true); x.Bound(m => m.Email).Width(120).Groupable(false).Filterable(true); x.Bound(m => m.State).Width(120).Groupable(true).Filterable(true); x.Bound(m => m.Country).Width(120).Groupable(false).Filterable(true); }) .Pageable(x => x.PageSize(10)) .Render(); @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true))) @(Html.Telerik().ScriptRegistrar()) } </div> Now, save the project and run it.This will give the following output. As we have defined filterable, it will filter the data, as shown below: Now, if you want to filter, it will filter it. NOTE: The Telerik Grid contains various properties, like - HeaderTemplate: This is the string which will appear in the header of the Grid. Name: We can say it's the Id of the Telerik Grid. Footer: This is a boolean property. True indicates that we need a footer. Filterable: By using this property, the filter option in the Grid is enabled. Pageable: Used for enabling the paging where you have to give the page size. Defining CSS for the Telerik Grid @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true))) @(Html.Telerik().ScriptRegistrar()) We have various CSS files included in our project. You can attach any CSS file of your choice to the Telerik Grid. This will give a different look and feel to the View. Hope you liked this article. If you have any doubt, you can comment, and I will try to help you. AngularJS JumpStart with Dan Wahlin MVC Products Telerik Grid Debendra Dash Debendra Dash http://www.c-sharpcorner.com/members/debendra-dash Follow Facebook LinkedIn message 126 Rank 418.6k Read Platinum Member 2 Times COMMENTS (5) Contact Us Privacy Policy Terms & Conditions About Us ©2016 C# Corner. All contents are copyright of their authors.
حال ، بعد از ایجاد ارتباط با پایگاه داده ، به NuGet Package Manager خواهم رفت و TelerikMvcExtensions" ، dll" را دانلود و به پروژه خود اضافه میکنیم . همانند زیر:
dll و scriptهای زیر به پروژه ما اضافه میشود :
حال ، همانطور که در زیر نشان داده شده است ، یک model با نام Employee به پروژه اضافه میکنیم .
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Tellerik_grid.Models { public class employee { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Email { get; set; } public int EmployeeId { get; set; } public string MobileNo { get; set; } public string State { get; set; } public string Country { get; set; } } }
حال ، به HomeController رفته و متد Action زیر را اضافه میکنیم :
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GetData() { List<employee> li = new List<employee>(); CodeXEntities CX = new CodeXEntities(); var det = CX.tbl_employee; foreach(var x in det) { employee emp = new employee(); emp.Id = x.id; emp.FirstName = x.firstName; emp.LastName = x.LastName; emp.MobileNo = x.MobileNo; emp.State = x.State; emp.Country = x.Country; emp.Email = x.Email; emp.EmployeeId =Convert.ToInt32(x.EmployeeId); li.Add(emp); } return View(li); }
این action method از جداول ،داده را بازیابی کرده و به view بازمی گرداند . حال ، در زیر چگونگی اضافه کردن GetData را می بینید .
حال ، view را میبینید که controller data را به telerik grid متصل کرده است .
@model IEnumerable<Tellerik_grid.Models.employee> @using Telerik.Web.Mvc.UI; @{ ViewBag.Title = "GetData"; } </br> <div> @{ Html.Telerik().Grid(Model) .Name("Grid") .DataKeys(keys => keys.Add(c => c.Id)) .Footer(true) .Sortable() .Filterable() .Scrollable(scr => scr.Height(330)) .Columns(x => { x.Bound(m => m.Id).Width(120).HeaderTemplate("UserId").Title("User ID").Groupable(false); x.Bound(m => m.FirstName).Width(120).Groupable(false).Filterable(true).Groupable(true); x.Bound(m => m.LastName).Width(120).Groupable(true).Filterable(true).Groupable(true); x.Bound(m => m.MobileNo).Width(120).HeaderTemplate("UserId").Filterable(true); x.Bound(m => m.Email).Width(120).Groupable(false).Filterable(true); x.Bound(m => m.State).Width(120).Groupable(true).Filterable(true); x.Bound(m => m.Country).Width(120).Groupable(false).Filterable(true); }) .Pageable(x => x.PageSize(10)) .Render(); @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true))) @(Html.Telerik().ScriptRegistrar()) } </div>
حال ، پروژه را ذخیره کرده و آن را اجرا کنید . خروجی زیر را باید ببینید .
آموزش asp.net mvc
- ASP.net MVC
- 4k بازدید
- 5 تشکر