در این مقاله با نحوه کار با ASP.NET MVC Wrapper در KendoUI آشنا خواهیم شد.

در این مقاله آشنا خواهید شد با :

- چگونه از ASP.NET MVC wrapper استفاده نماییم.

- چگونه یک DropDown به صفحه اضافه نماییم.

- پر کردن DropDown از بانک اطلاعاتی

نیازمندیها :

- ویژوال استادیو

- MVC با ورژن بالاتر از ورژن 3

مراحل کار:

ابندا لازم است تا Kendo UI که از شرکت telerik می باشد نصب نمایید.

یک پروژه از نوع Telerik ASP.NET MVC بسازید.

برای این کار :
 

ویژوال استادیو را باز کرده و یک پروژه جدید می سازیم. ("..File" -> "New" -> "Project")

از نوار سمت چپ گزینه Web را انتخاب کرده و روی Telerik ASP.NET MVC Application کلیک می کنیم.

یک نام برای پروژه در نظر گرفته و OK می کنیم.

حالا ویژوال استادیو یک پروژه ساخته و همه کتابخانه های جاوا اسکریپت و فایل های Css را با همه تنظیمات مورد نیاز به پروژه ساخته شده اضافه می نماید.

شما می توانید فایل های Css و Javascirpt اضافه شده به پروژه را در تصاویر زیر مشاهده نمایید.

حالا صفحه Layout.cshtml_ را باز کرده و نگاه کنید. شما می توانید مشاهده نمایید که تمامی کتابخانه های لازم و ضروری به صفحه رفرنس داده شده اند.

به طور پیش فرض شما در ویو Home می توانید Kendo UI panel bar را مشاهده نمایید.

اضافه کردن DropDown به صفحه

Kendo UI Wrapper یک HTML helper می باشد.

در زیر نمونه کد پیاده سازی یک DropDown در ویو Home را مشاهده می نمایید.

@{
    var Item = new List<string>()
        {
            "آیتم1","آیتم2","آیتم3"
        };
}
<h3>
    @Html.Kendo().DropDownList().Name("Items").BindTo(@Item)
</h3>

برنامه را اجرا نمایید.

خروجی در مرورگر مانند زیر خواهد بود.

پر کردن آیتم های DropDown از بانک اطلاعاتی:

ابتدا باید یک جدول در SQL ساخته و از طریق Entity Framework آن را به پروژه اضافه نماییم.

جدول ما به شکل زیر طراحی شده است.

همچنین می توانید برای ساخت جدول از اسکریپت زیر استفاده نمایید.

GO
ALTER DATABASE [KendoDrop] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [KendoDrop] SET ANSI_NULLS OFF
GO
ALTER DATABASE [KendoDrop] SET ANSI_PADDING OFF
GO
ALTER DATABASE [KendoDrop] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [KendoDrop] SET ARITHABORT OFF
GO
ALTER DATABASE [KendoDrop] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [KendoDrop] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [KendoDrop] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [KendoDrop] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [KendoDrop] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [KendoDrop] SET CURSOR_DEFAULT  GLOBAL
GO
ALTER DATABASE [KendoDrop] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [KendoDrop] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [KendoDrop] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [KendoDrop] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [KendoDrop] SET  DISABLE_BROKER
GO
ALTER DATABASE [KendoDrop] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [KendoDrop] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [KendoDrop] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [KendoDrop] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [KendoDrop] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [KendoDrop] SET READ_COMMITTED_SNAPSHOT OFF
GO
ALTER DATABASE [KendoDrop] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [KendoDrop] SET  READ_WRITE
GO
ALTER DATABASE [KendoDrop] SET RECOVERY FULL
GO
ALTER DATABASE [KendoDrop] SET  MULTI_USER
GO
ALTER DATABASE [KendoDrop] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [KendoDrop] SET DB_CHAINING OFF
GO
EXEC sys.sp_db_vardecimal_storage_format N'KendoDrop', N'ON'
GO
USE [KendoDrop]
GO
/****** Object:  Table [dbo].[tbl_country]    Script Date: 09/03/2015 12:12:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tbl_country](
	[Country_ID] [int] NOT NULL,
	[Country_Name] [nvarchar](50) NOT NULL,
 CONSTRAINT [PK_tbl_country] PRIMARY KEY CLUSTERED 
(
	[Country_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_country] ([Country_ID], [Country_Name]) VALUES (1, N'ایران')
INSERT [dbo].[tbl_country] ([Country_ID], [Country_Name]) VALUES (2, N'آمریکا')

مدل را به پروژه اضافه نمایید.

حال یک کنترلر با نام CountryController ساخته و کدهای زیر را برای آن می نویسیم.

public class CountryController : Controller  
    {  
        testEntities _context = new testEntities();  
        // GET: Country  
        public ActionResult Index()  
        {  
            return View(_context.tbl_country.ToList());  
        }  
    } 

ویو آن را ساخته و کدهای زیر را برای آن می نویسیم.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>ِمرجع تخصصی برنامه نویسان</h2>
<br/>
<br/>
<hr/>
<br/>
@model IEnumerable<TelerikMvcApp1.Models.tbl_country>

@(
 Html.Kendo().DropDownList().Name("kdropdownlist")
                       .DataTextField("Country_Name")
                       .DataValueField("Country_ID")
                   .BindTo(Model)
                   .OptionLabel("کشور را انتخاب نمایید")
)  

خروجی ما به شکل زیر خواهد بود :