چرا می خواهیم این MultiColumnComboBox را یاد بگیریم؟ اساساً، بیشتر کرکرهها یا جعبههای ترکیبی به پر کردن تنها یک ستون از دادهها کمک میکنند، اما این MultiColumnComboBox به ما کمک میکند تا دادههای چند ستونی را در یک ردیف نمایش دهیم، مانند یک شبکه با یا بدون تصاویر. این خیلی جالب است، درست است؟ خوب، بیایید جلو برویم تا این ویژگی ها را با یک مثال ببینیم.
پیش نیازها
- ویژوال استودیو
- SQL Server
- دانش اولیه ASP.NET MVC
- دانش اولیه Entity Framework
- دانش اولیه jQuery
- دانش اولیه CSS
جریان مقاله
- یک جدول در پایگاه داده با مقادیر ساختگی ایجاد کنید
- یک پروژه ASP.NET MVC Empty ایجاد کنید
- Entity Framework را با پایگاه داده و برنامه پیکربندی کنید
- یک کنترلر و نمایش ایجاد کنید
- ویژگی های Kendo UI را فعال کنید
- MultiColumnComboBox را پیاده سازی کنید
- الگوی سفارشی با MultiColumnComboBox
یک جدول در پایگاه داده با مقادیر ساختگی ایجاد کنید
ابتدا یک جدول در SQL Server ایجاد می کنیم تا یک Kendo UI MultiColumnComboBox با داده ها در ASP.NET MVC5 پر شود. من یک جدول "کارمند" با طرح زیر ایجاد کرده ام.
![ASP.NET MVC 5 - Kendo UI - کار با MultiColumnComboBox با استفاده از EF](http://pezhvak24.ir/dl/10kcor/cscd/article/asp-net-mvc5-kendo-ui-working/Images/Pic-1.png)
کوئری زیر را برای ایجاد جدول با طرح بالا اجرا کنید.
- CREATE TABLE [dbo].[Employee](
- [ID] [bigint] IDENTITY(1,1) NOT NULL,
- [Name] [nvarchar](150) NULL,
- [Country] [nvarchar](50) NULL,
- [Role] [nvarchar](50) NULL,
- [ImageName] [nvarchar](50) NULL,
- CONSTRAINT [PK_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
و چند سوابق کارمند را مانند زیر وارد کنید.
![ASP.NET MVC 5 - Kendo UI - کار با MultiColumnComboBox با استفاده از EF](http://pezhvak24.ir/dl/10kcor/cscd/article/asp-net-mvc5-kendo-ui-working/Images/Pic-2.png)
کوئری زیر را اجرا کنید تا همان رکوردها را بدست آورید.
- USE [CSharpCorner]
- GO
- SET IDENTITY_INSERT [dbo].[Employee] ON
- GO
- INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (1, N'Gnanavel Sekar', N'India', N'Sr. Software Engineer', N'gnanavelsekar')
- GO
- INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (2, N'Gokul', N'UK', N'Sr. Software Engineer', N'ManIcon')
- GO
- INSERT [dbo].[Employee] ([ID], [Name], [Country], [Role], [ImageName]) VALUES (3, N'Ramar', N'India', N'Technical Lead', N'ManIcon')
- GO
- SET IDENTITY_INSERT [dbo].[Employee] OFF
- GO
یک پروژه ASP.NET MVC Empty ایجاد کنید
برای ایجاد پروژه خالی ASP.NET MVC، مراحل زیر را یکی یکی دنبال کنید. در اینجا، من از ویژوال استودیو 2017 استفاده کرده ام.
- New Project -> Visual C# -> Web -> ASP.NET Web Application را انتخاب کنید و نام برنامه خود را وارد کنید. در اینجا، من آن را به عنوان "KendoMultiColumnComboBox" نامگذاری کردم.
- حالا روی OK کلیک کنید.
- سپس، Empty MVC template را انتخاب کرده و روی OK کلیک کنید تا پروژه ایجاد شود.
- پس از کلیک بر روی OK، پروژه با معماری اصلی MVC ایجاد می شود.
- اگر از نحوه ایجاد یک برنامه وب خالی ASP.NET آگاه نیستید، لطفاً برای یادگیری به مرحله 1 و مرحله 2 مراجعه کنید. پس از انجام این مراحل، صفحه ای مانند زیر مشاهده خواهید کرد.
![ASP.NET MVC 5 - Kendo UI - کار با MultiColumnComboBox با استفاده از EF](http://pezhvak24.ir/dl/10kcor/cscd/article/asp-net-mvc5-kendo-ui-working/Images/Pic-3.png)
Entity Framework را با پایگاه داده و برنامه پیکربندی کنید
در اینجا، من قبلاً در مورد نحوه پیکربندی و پیاده سازی یک رویکرد اول پایگاه داده بحث کرده ام. در همین حال، جدول ایجاد شده ما با چارچوب نهاد را انتخاب کنید. هنگامی که پیکربندی خود را با جدول SQL "Employee" از پایگاه داده CSharpCorner و با برنامه خود به پایان رساندیم، صفحه زیر را به عنوان پیکربندی بعدی دریافت خواهیم کرد.