آموزش Kendo UI در ASP.NET MVC

آموزش Kendo UI در ASP.NET MVC

آموزش کامپوننت کندو یوآی (Kendo-UI)

لوگوی Kendo

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

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

 

نکته : برای دانلود 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(“۲۰۱۴/۰۵/۱۲”)
    .Value(“۲۰۱۳/۱۰/۲۷”)
)
                                

همانطور که مشاهده می کنید توسط 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(“۲۰۱۴/۰۵/۱۲”)
    .Value(“۲۰۱۳/۱۰/۲۷”)
    .Events(s => s.Change(“startChange”))
)
@(Html.Kendo().DatePicker()
        .Name(“end”)
        .Format(“yyyy/MM/dd”)
        .Min(“۲۰۱۵/۰۵/۱۲”)
        .Value(“۲۰۱۶/۰۱/۰۹”)
        .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 : [email protected]

 

)
)
                                

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

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

کنترل منو 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 مراجعه کنید .

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

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

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

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

پنج × یک =

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب گوگل ادز

دانلود کتاب "آموزش سرویس گوگل ادوردز"

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"