معرفی
Kendo multi select یکی از ابزارک های بسته Kendo UI است. این مقاله نحوه پیاده سازی کنترل چند انتخابی Kendo را در صفحه HTML با استفاده از ASP.NET WEB API توضیح می دهد. برای توضیح آن، من یک سرویس RESTful GET با استفاده از ASP.NET WEB API ایجاد کرده ام که برای بارگیری نوار پانل DataSource of Kendo استفاده می شود.
پیش نیازها
دانش اولیه ASP.NET Web API، jQuery و Kendo UI.
محتوا
- ایجاد یک برنامه ASP.NET WEB API.
- ایجاد یک کنترلر
- تست REST API.
- اتصال داده از راه دور در کنترل چند انتخابی Kendo
ایجاد یک برنامه ASP.NET Web API
همانطور که در زیر نشان داده شده است، با استفاده از یک الگوی وب نصب شده در ویژوال استودیو، یک برنامه Web API ایجاد کنید. در مورد من، نام برنامه را " List Technology " گذاشتم.
![](http://pezhvak24.ir/dl/10kcor/cscd/article/remote-data-binding-in-kendo-multi-select-control-using-asp-net-web-api/Images/image001.jpg)
شکل 1
![](http://pezhvak24.ir/dl/10kcor/cscd/article/remote-data-binding-in-kendo-multi-select-control-using-asp-net-web-api/Images/image001.jpg)
شکل 1
شکل 2
ایجاد یک مدل
در Solution Explorer، روی پوشه Models کلیک راست کرده، Add را انتخاب کنید و سپس Class را انتخاب کنید و آن را به عنوان "TechnologyList.cs" نامگذاری کنید.
ایجاد یک مدل
در Solution Explorer، روی پوشه Models کلیک راست کرده، Add را انتخاب کنید و سپس Class را انتخاب کنید و آن را به عنوان "TechnologyList.cs" نامگذاری کنید.
TechnologyList.cs
- public class TechnologyList
- {
- public TechnologyList(int Value,string Text)
- {
- this.Value = Value;
- this.Text = Text;
- }
- public int Value { get; set; }
- public string Text { get; set; }
- }
ایجاد یک کنترلر
همانطور که در شکل 3 نشان داده شده است، روی پوشه Controller کلیک راست کرده و یک Web API 2- Empty controller جدید اضافه کنید. در مورد من، آن را TechnologiesController نامیدم .
همانطور که در شکل 3 نشان داده شده است، روی پوشه Controller کلیک راست کرده و یک Web API 2- Empty controller جدید اضافه کنید. در مورد من، آن را TechnologiesController نامیدم .
![](http://pezhvak24.ir/dl/10kcor/cscd/article/remote-data-binding-in-kendo-multi-select-control-using-asp-net-web-api/Images/image003.jpg)
شکل 3
TechnologiesController.cs
- [RoutePrefix("api/Technology")]
- public class TechnologiesController : ApiController
- {
- [HttpGet]
- [AllowAnonymous]
- [Route("TechnologiesList")]
- public HttpResponseMessage GetTechnology()
- {
- try
- {
- List<TechnologyList> _TechList = new List<TechnologyList>();
- _TechList.Add( new TechnologyList( 1, "ASP.NET"));
- _TechList.Add(new TechnologyList(2, "ADO.NET"));
- _TechList.Add(new TechnologyList(3,"SilverLight"));
- _TechList.Add(new TechnologyList(4, "C#"));
- _TechList.Add(new TechnologyList(5, "SQL Server"));
- return Request.CreateResponse(HttpStatusCode.OK, _TechList, Configuration.Formatters.JsonFormatter);
- }
- catch(Exception ex)
- {
- return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
- }
- }
- }
Technologies Controller Action GetTechnolgy فهرستی از فناوری ها را برمی گرداند.
تست REST API
همانطور که در شکل 4 نشان داده شده است، API را با استفاده از POSTMAN/Fiddler تست کنید.