آموزش Kendo UI در ASP.NET MVC
آموزش Kendo UI در ASP.NET MVC l » معرفی، نصب و راه‌اندازی Kendo ui ، ایجاد پروژه MVC بر پایه تلریک (Telerik)، معرفی کنترل‌های Kendo UI مانند DatePicker

سلام ، با آموزش استفاده از Kendo در پروژه ASP.NET MVC در خدمت شما هستیم .

 

لوگوی Kendo

 

پیش نیازهای این آموزش عبارتند از :

 

نکته : برای دانلود Kendo می توانید به وب سایت P30download مراجعه کنید .

 

معرفی، نصب و راه‌اندازی Kendo UI :

 

کامپوننت Kendo-UI چیست؟

Kendo برای افزایش زیبایی و کارایی صفحات وب بکار می رود که یکی از کامپوننت های شرکت تلریک (Telerik) است و حاوی تمام آن چیزیست که برنامه نویسان و طراحان برای طراحی/ساخت وب سایت و اپلیکیشن های موبایل با HTML5 و جاوا اسکریپت ، نیاز دارند . در Kendo 2015 می توان به مواردی مانند : ادغام  AngularJS، پشتیبانی از فریم ورک Bootstrap ، کنترل های موبایل ، راه حل داده‌های آفلاین ، حاوی کامپوننت های  ASP.NET MVC ، مدولار بودن ، پشتیبانی از قابلیت های ریسپانسیو و جامعیت در نهایت سبک و سریع بودن اشاره نمود .

 

نصب و راه اندازی Kendo :

پس از اینکه Kendo را از لینک بالا دریافت نمودید ، آنرا از حالت zip خارج کرده و نصب کنید. فایلهای مربوط به kendo بطور پیش فرض در مسیر زیر نصب می شوند :

C:\Program Files\Telerik

 

ایجاد اولین دمو توسط kendo :

برای مشاهده اولین کامپوننت کندو در یک صفحه html ، نیاز به سه فایل از مسیر فوق دارید .

فایل‌های JS و CSS مورد نیاز:

به زیر پوشه js بروید و فایل kendo.all.min.js را جستجو و در دسکتاپ کپی کنید. سپس به فولدر css رفته و دو فایل زیر را در دسکتاپ سیستم خود کپی کنید :

kendo.common.min.css    و     kendo.default.min.css

ما برای ایجاد اولین دمو ، علاوه بر سه فایل فوق ، نیاز به یک فایل دیگر داریم و آن چیزی نیست جز کتابخانه jquery ! پس به وب سایت jquery رفته و آخرین نسخه آنرا دانلود کرده و به فایلهای فوق اضافه کنید .

ایجاد یک صفحه HTML:

حال یک صفحه  html بسازید و ۴ فایل مذکور را به آن رفرنس دهید :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>HTML + Kendo UI | Mohtava.info</title>

    <link href="css/kendo.common.min.css" rel="stylesheet"/>

    <link href="css/kendo.default.min.css" rel="stylesheet" />

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/kendo.all.min.js"></script>

</head>

<body>

</body>

</html>

نکته : دقت داشته باشید که کتابخانه jquery بصورت فشرده شده باشد (min) و همچنین در بالای بقیه فایلهای javascript به آن رفرنس دهید .

کد بدنه صفحه HTML:

اکنون کد زیر را در بدنه صفحه می نویسیم :

 
    <span>
        Date of Birth : <input id="dob" />
    </span>
    <script>
     $("#dob").kendoDatePicker();
    </script>                               

توضیح دستورات بالا : ابتدا یک input قرار دادیک که id=bob دارد . سپس در بخش script با علامت # آن id را بهمراه تابع kendoDatePicker تعریف کردیم . با اینکار ، هنگام اجرای صفحه ، برای نوشتن تاریخ ، یک باکس زیبا و شکیل باز می شود (تصویر زیر) :


kendo DatePicker

 

روش دوم نمایش کامپوننت Kendo در صفحه html:

روش دوم برای دستیابی به خروجی تصویر بالا ، تعریف دستورات بصورت زیر است :

    Way 2 of DatePicker : <input id="dob2" data-role="datepicker" />

    <script>

        kendo.init($("#dob2"));

    </script>

خروجی عینا مانند قبل است ، هر چند که syntax کدها با هم متفاوت است . همچنین می توان علاوه بر data-role فرمت داده ورودی را تعیین کنیم :

<input id="dob2" data-role="datepicker" data-Format="yyyy/MM/dd"/>

خروجی بصورت زیر خواهد شد :


Datepicker Format

 

مشاهده میکنید که تاریخ اولی بصورت پیش فرض (MM/dd/yyy) و دومی که خودمان فرمتش را تعریف کردیم بصورت (yyyy/MM/dd) می باشد .

 

کامپوننت comboBox :

در این مثال کمی بیشتر با کدهای jQuery سر و کار داریم .در همان صفحه html که از قبل ساختیم ، یک input با id=colorPicker تعریف می کنیم . سپس تگ script را شروع می کنیم . در این بخش باید دستور مربوط به لود کامل صفحه یعنی document.ready را فراخوانی کنیم و سپس کدهای زیر را بنویسیم :

 
$("#colorPicker").kendoComboBox({
    dataSource :[“Red”,”Yellow”,”Green”,”Blue”],
});
                                

و خروجی آن به شکل زیر است :


kendo ComboBox

برای دانلود سورس کد این مقاله به لینک زیر مراجعه کنید:

دانلود رایگان سورس کد نمایش Kendo در HTML

در بخش بعد، استفاده از kendo در MVC را آغاز می کنیم . همراه ما باشید …smiley

 

ایجاد پروژه MVC بر پایه تلریک (Telerik):

همانطور که می دانید Kendo یک زبان client Side و MVC یک تکنولوژی server side می باشد و تلفیق این دو می تواند جالب باشد .


لوگوی تلریک

 

روش‌های استفاده از کامپوننت Kendo در پروژه ASP.NET MVC:

پس از نصب  Kendo-UI for MVC امکاناتی به ویژوال استودیو اضافه می گردد . برای ایجاد یک پروژه MVC بر پایه kendo دو راه وجود دارد :

  1. مانند قبل ، به مسیر File>New>Project>Web>ASP.NET Web Application برویم و گزینه Telerik ASP.NET MVC Application را انتخاب کنیم (تصویر زیر) :


ایجاد پروژه Telerik MVC

 

۲٫ پس از نصب telerik ، به منوی افقی برنامه ویژوال استودیو ، منویی بنام Telerik اضافه می شود . بنابراین به مسیر Telerik>UI for Asp.net MVC>Create new Telerik Project می رویم (تصویر زیر) :


Telerik MVC Application

 

آپدیت کردن Nuget Package Manager :

اگر در هنگام ایجاد پروژه فوق ، با پیام خطای آپدیت نبودن Nuget Package Manger روبرو شدید ، می بایست NuGet را آپدیت بفرمایید . بدین منظور به منوی Tools > Extension and Update بروید و در بخش update ، گزینه nuget را آپدیت نمایید . دقت کنید که پس از آپدیت نوگت ، باید یکبار نرم افزار ویژوال استودیو را بسته و سپس باز کنید تا تغییرات اعمال شود .

اکنون می توانید بدون error یک پروژه بر مبنای Telerik ایجاد کنید .

در مرحله بعد با پنجره تنظیمات تلریک روبرو می شوید . تنظیمات را در این مثال بصورت تصویر زیر در نظر می گیریم و سپس Next را می زنیم :


تنظیمات تلریک

 

در مرحله بعد گزینه Skip را انتخاب کرده و finish را بزنید . ممکن است در اینجا مراحل ساخت پروژه چند ثانیه طول بکشد (بدلیل سنگین بودن فریم ورک تلریک) .

نکته : برای یادگیری بیشتر در زمینه پروژه مبنی بر تلریک ، به وب سایت Telerik مراجعه شود .

خب دوستان عزیز ، تا اینجا توانستیم یک اپلیکیشن وب بر پایه تلریک ایجاد کنیم . در بخش بعد، می خواهیم از کنترلهای کندو در MVC استفاده کنیم . همراه ما باشید …wink

 

معرفی کنترل‌های Kendo UI :

Input :

  1. AutoComplete

  2. ColorPicker

  3. DatePicker

  4. ComboBox

  5. DropDownList

  6. NumericTextBox

  7. Slider

  8. Upload

 

Unordered List :

  1. Menu

  2. PanelBar

  3. TreeView

 

TextArea :

  1. Editor

 

Table :

  1. Grid

 

Div :

  1. Calendar

  2. Grid

  3. ListView

  4. Scheduler

  5. TabStrip

  6. Tooltip

  7. Chart

برای شروع ، نرم افزار ویژوال استودیو را باز نموده و یک پروژه Telerik MVC Application بسازید و نام آنرا KendoWorking قرار دهید .

در این پروژه قصد داریم برای هر کنترل کندو ، یک کنترولر در MVC بسازیم .

 

کنترل DatePicker :

روی فولدر Controller راست کلیک کرده و Add Controller را انتخاب میکنیم و نام آنرا DatePickerController قرار می دهیم .

سپس یک View برای اکشن Index این کنترولر می سازیم بنام Index .

عنوان صفحه را Kendo DatePicker می نویسیم و دستور زیر را برای افزودن یک DatePicker به صفحه می نویسیم :

@(Html.Kendo().DatePicker().Name("DateOfBirth"))

مشاهده می شود که براحتی توانستیم یک DatePicker در View پروژه خود قرار دهیم که خروجی آن بصورت زیر است :


Kendo DatePicker

 

افزودن Attribute به DatePicker :

به این منظور با زدن نقطه (.) بعد از Name ، لیست اتریبیوت ها را می بینیم . بعنوان مثال در دستور زیر ابتدا یک فرمت برای نمایش تاریخ بصورت (روز/ماه/سال) برای آن تعیین کرده ایم و سپس یک مقدار پیش فرض (Initial Value) برای DatePicker خود انتخاب نموده ایم :

 
  @(Html.Kendo().DatePicker().Name("DateOfBirth").Format("yyyy/MM/dd").Value("2016/01/09"))
                                

حال می خواهیم مثال فوق را کمی پیچیده تر کنیم :

دستورات زیر را در Index.cshtml بنویسید :

 

@(Html.Kendo().DatePicker().Name(“start”))



@(Html.Kendo().DatePicker().Name(“end”)))
                                

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


DatePicker in Kendo UI

 

افزودن max و min به کامپوننت datePicker:

حال می خواهیم اتریبیوت هایی مانند Min,Max,Value,Format را به آن اضافه کنیم :

 
@(Html.Kendo().DatePicker()
    .Name(“start”)
    .Format(“yyyy/MM/dd”)
    .Max(“2014/05/12”)
    .Value(“2013/10/27”)
)
                                

همانطور که مشاهده می کنید توسط Max تاریخ ورودی کاربر را به ماکزیمم ۱۲/۰۵/۲۰۱۴ محدود کردیم . بنابراین کاربر نمی تواند تاریخهای مابعد این تاریخ را انتخاب کند (غیرفعال هستند) .

نکته : اتریبیوت Name در کنترل های کندو ، پس از رندر شدن صفحه و تبدیل به html ، به id تبدیل می شود .

برای تمرین بیشتر در مورد کنترل DatePicker به وب سایت Telerik مراجعه شود .

این بخش در اینجا به پایان می رسد ، در بخش بعد، میخواهیم برای DatePicker ایجاد شده در این مقاله ، یک Event Handler تعریف کنیم . همراه ما باشید …blush

 

تعریف Event Handler برای کامپوننت‌های Kendo:

میخواهیم برای DatePicker در مثال فوق ، یک Event Handler تعریف کنیم .

سناریو : میخواهیم بصورت Run Time ، انتخاب های کاربر را محدود کنیم . بعنوان مثال وقتی کاربر تاریخ شروع را ۰۳/۱۱/۲۰۱۳ انتخاب می کند ، پس باید این تاریخ را از لیست تاریخ پایان حذف کنیم تا کاربر نتواند آنرا انتخاب کند . به این منظور در تابع جاوا اسکریپت ، تاریخ شروع را که کاربر وارد میکند را گرفته و یک واحد به آن اضافه میکنیم (در این مثال تاریخ ۰۴/۱۱/۲۰۱۳ می شود) و این مقدار را تاریخ مینیمم برای پایان در نظر میگیریم تا کاربر تاریخهای ما بعد آنرا مشاهده کند . به همین روش تاریخ شروع را محدود میکنیم . یعنی اگر کاربر ابتدا تاریخ پایان را انتخاب کند ، یکواحد از تاریخ ورودی کاربر کم می کنیم و بعنوان ماکزیمم تاریخ شروع در نظر میگیریم .

افزودن Event به کنترل DatePicker

افزودن Event به کنترل DatePicker بصورت زیر می باشد :

 
 @(Html.Kendo().DatePicker()
    .Name(“start”)
    .Format(“yyyy/MM/dd”)
    .Max(“2014/05/12”)
    .Value(“2013/10/27”)
    .Events(s => s.Change(“startChange”))
)
@(Html.Kendo().DatePicker()
        .Name(“end”)
        .Format(“yyyy/MM/dd”)
        .Min(“2015/05/12”)
        .Value(“2016/01/09”)
        .Events(e => e.Change(“endChange”))
)
                                

توسط Lambda ، نام رویداد را تعریف میکنیم و توابع مربوطه را در جاوااسکریپت بصورت زیر تعریف خواهیم کرد :

 
  function startChange() {
        var endPicker = $(“#end”).data(“kendoDatePicker”),
            startDate = this.value();
        if (startDate) {
            startDate = new Date(startDate);
            startDate.setDate(startDate.getDate() + 1)
            endPicker.min(startDate);
        }
    }
 
    function endChange() {
        var startPicker = $(“#start”).data(“kendoDatePicker”),
            endDate = this.value();
        if (endDate) {
            endDate = new Date(endDate);
            endDate.setDate(endDate.getDate() + 1)
            startPicker.max(endDate);
        }
    }
                                

اگر این View را اجرا کنیم و تاریخ شروع را ۱/۱۲/۲۰۱۳ انتخاب کنیم ، می بینیم که این تاریخ از تقویم تاریخ پایان حذف شده است و باید از ۲/۱۲/۲۰۱۳ به بعد را انتخاب کنیم (مطابق تصویر زیر) :


DatePicker Event Handler

برای اطلاعات بیشتر در مورد رویدادهای DatePicker به وب سایت Telerik مراجعه کنید . در بخش بعد، کنترل های کاربردی دیگری آشنا می شویم . با ما بمانید …laugh

 

کنترل Slider :

یک کنترولر بنام SliderController بسازید و یک view برای اکشن Index این کنترولر ایجاد کنید (با تنظیمات پیش فرض) .

در Index.cshtml دستورات زیر را تایپ می کنیم :

 

@(Html.Kendo().Slider()
    .Name("slider")
    .Min(0)
    .Max(255)
    .SmallStep(8)
    .LargeStep(16)
    .Orientation(SliderOrientation.Vertical)
    .ShowButtons(false)
    .TickPlacement(SliderTickPlacement.Both)
    .Events(s => s.Slide("onSlide"))
)
                                

توضیح : ابتدا یک label تعریف کردیم برای نمایش موقعیت اسلایدر . سپس کنترل اسلایدر را فراخوانی کرده ایم . اتریبیوت های موردنظر را نوشته و در نهایت Event را تعریف میکنیم . تابع onSlide بصورت RunTime با هر بار تغییر مقدار اسلایدر صدا زده می شود . تابع onSlide بصورت زیر است :

 

function onSlide(e) {
    $("#status").text(e.value);
}
                                

پارامتر e را میگیرد و متن داخل label را برابر مقدار اسلایدر قرار میدهد . خروجی بصورت زیر است :


اسلایدر کندو

 

کنترل ویرایشگر Editor :

کنترولر جدیدی بنام EditorController بسازید و یک View برای اکشن Index ایجاد کنید .

کد زیر را در ویو می نویسیم :

 
@(Html.Kendo().Editor()
    .Name("editor")
)
                                

در اینصورت خروجی بصورت زیر است :


ویرایشگر متن Kendo

 

مشاهده می شود که امکانات زیادی برای نوشتن متون دارد . ما در این مثال می خواهیم ابزارهای موردنظر را به آن اضافه و یا حذف کنیم .

به ویو دستورات زیر را اضافه کنید :

 
   @(Html.Kendo().Editor()
    .Name("editor")
    .Tools(t => t
        .Clear()
        .FontName(fn => fn
            .Add("Verdana", "Verdana , Geneva")
            .Add("Garamond", "Garamond , serif")
            )
        .FontSize(fs => fs
            .Add("14px", "14px")
            .Add("16px", "16px")
        )
    )
    .Value(@

www.Mohtava.info is About Web Developing … Contact us : EhsanSafari@hotmail.com

) )

توضیح : ابتدا نام فونت های دلخواه خود را تعریف نمودیم و سپس اندازه های موردنظر را نوشتیم و در نهایت مقدار اولیه (پیش فرض) به ادیتور اعمال کردیم . خروجی بصورت زیر است :


افزودن ابزار دلخواه به ویرایشگر

 

کنترل منو Menu :

مانند قبل یک کنترلر بنام کنترل کندو می سازیم . پس در این مثال MenuController را ایجاد کرده و یک View برای آن تعریف می کنیم . برای داشتن یک منوی ساده بصورت زیر عمل می کنیم :

 
 @(Html.Kendo().Menu()
      .Name("Menu")
      .Items(items =>
      {
          items.Add().Text("Home");
          items.Add().Text("Blog");
          items.Add().Text("Service");
          items.Add().Text("Gallery");
          items.Add().Text("News").Enabled(false);
      })
 )
                                

این دستورات ، منویی تولید می کنند با ۵ لینک که هیچ زیرمنویی ندارند و نیز منوی آخر غیرفعال می باشد . (تصویر زیر) :


کنترل منوی کندو

 

تعریف زیر منو (SubMenu):

برای داشتن زیر منو بصورت زیر عمل می کنیم :

 
@(Html.Kendo().Menu()
      .Name("Menu")
      .Items(items =>
      {
          items.Add()
              .Text("Products")
              .Items(children =>
               {
                   children.Add().Text("Furniture")
                           .Items(innerChildren =>
                           {
                               innerChildren.Add().Text("Tables & Chairs");
                               innerChildren.Add().Text("Sofas");
                           });
               });
          items.Add().Text("Blog");
          items.Add().Text("News").Enabled(false);
      })
)
                                

خروجی بصورت زیر خواهد بود :


زیرمنو دار کردن منوی کندو

 

منوی Products دارای زیرمنو است . منوی Blog فاقد submenu است . منوی News غیرفعال است .

امیدوارم از این آموزش نیز استفاده لازم را برده باشید .

برای تمرین بیشتر در زمینه کنترلهای Kendo ، می توانید به وب سایت Telerik مراجعه کنید .

لطفا سوالات و پیشنهادهای خود را از طریق فرم ارسال دیدگاه ، برای بنده ارسال فرمایید .


برچسب‌ها:

kendoآموزش Kendoآموزش kendo uiآموزش تلریکآموزش کامپوننت تلریکتلریککامپوننت kendoکندو

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

8 + هشت =