دوره های آموزشی
خانه / ASP.NET MVC / عملیات CRUD در MVC با استفاده از Kendo UI – آموزش Kendo UI به زبان فارسی

عملیات CRUD در MVC با استفاده از Kendo UI – آموزش Kendo UI به زبان فارسی

در این آموزش Kendo UI به زبان فارسی ، یاد خواهید گرفت که با استفاده از Kendo UI چگونه می توانید عملیات ایجاد داده ، خواندن داده ، به روز رسانی داده و حذف کردن داده (CRUD) را در Grid و در ASEP.NET MVC انجام دهید. یک پروژه MVC جدید ایجاد کنید.

مرحله 1 :
ویژوال استودیو (Visual Studio) را باز کنید.

 

آموزش kendo ui به زبان فارسی

یک پروژه جدید را از منوی File انتخاب کنید.

آموزش kendo ui

برنامه ASP.NET Web را انتخاب کرده و روی OK کلیک کنید.

کندو گرید

MVC را انتخاب کنید و روی OK کلیک کنید.

آموزش kendo ui

مرحله 2 – اضافه کردن HomeController جدید (  آموزش Kendo UI به زبان فارسی  )

بر روی فولدر Controllers >> Add >> Controller راست کلیک کنید.

آموزش asp

باید MVC 5 Controller-Empty را در دیالوگ ” Add Scaffold” انتخاب کرده و روی ” Add ” کلیک کنید.

kendo ui

روی کنترلر نامی مثل Home.Controller بگذارید و روی Add کلیک کنید.

آموزش asp kendo

کد زیر را در Home.Controller وارد کنید.

مرحله 3 آموزش Kendo UI به زبان فارسی :

فایل های kendo CSS و JS را از زیر دانلود کنید. روی لینک « Download a free trial » کلیک کنید.

https://www.telerik.com/download/kendo-ui-core

 

kendo ui چیست

 

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

 

 

آموزش فارسی kendo ui

بر روی فولدر “Style” کلیک کنید، تمام فایل های CSS نمایش داده می شوند باید در فولدر Content پروژه نیزکپی شوند .

 

 

آموزش crud در Asp

در فولدر JS ، تمام فایل های JS نمایش داده می شود که باید در فولدر Script پروژه نیز کپی شود .

 

آموزش crud در Asp mvc

در ادامه ، نحوه کپی فایل های CSS در فولدر Content پروژه توضیح داده می شود : یک فولدر به نام فولدر Content در Kendo ایجاد نموده و فایل های CSS را کپی آن کنید.

asp mvc kndo ui

فایل های JavaScript را وارد فولدر Scripts کنید.

ui

مرحله 4: ایجاد جدول در Database Pgadmin (PostgreSQL) :

در ذیل (query) برای ایجاد یک جدول در پایگاه داده آمده است.

 

خروجی داده ها از جدول

 

asp.net mvc

 

مرحله 5:

Connection string را در فایل web.config در ASP.NET وارد کنید.

 

kendo

 

مرحله 6 آموزش Kendo UI به زبان فارسی :

App_Start فولدر را انتخاب کنید ، فایل Bundleconfig.cs را باز کنید و CSS زیر و JS را وارد آن کنید (کدها در ذیل داده شده اند).

 

ui

 

مرحله 7: ایجاد UserModel در فولدر مدل ها:

بر روي فولدر مدلها راست کليک کرده ، روي Add-> Class کلیک کنيد.

ذخیره و خواندن در asp

 

کد داده شده را در UserModel وارد کنید.

 

 

کلاس لایه داده در فولدر مدل :

بر روی فولدر مدل ها راست کلیک کرده ، یک کلاس جدید اضافه نموده و نام آن را DataLayer.cs بگذارید. از این ، می توان به عنوان یک فایل کمکی برای اتصال پایگاه داده و اجرای جستجوها (query) استفاده نمود.

 

asp.net core

 

کد زیر را در فایل DataLayer.cs بنویسید.

 

 

مرحله 8  آموزش Kendo UI به زبان فارسی :

یک صفحه جدید Layout ایجاد کنید، نام آن را « MasterPage.chtml » گذاشته و کد زیر را بنویسید. بر روی View/Shared -> click Add -> select New item راست کلیک کنید.

کندو گرید

صفحه MVC 5 layout یا (Razor)  را انتخاب کنید و روی دکمه ” Add ” کلیک کنید.

kendo ui دانلود

کد زیر را در آن صفحه اضافه کنید.

 

برای ساخت و اجرای پروژه F5 را فشار دهید.

 

kendo دانلود

آموزش Kendo UI به زبان فارسی

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

آموزش APS.NET Web Api 2 با انتیتی فریم ورک 6 (Entity Framework)

فیلم آموزش Sql Server 2014 و ASP.NET و CSS و jQuery

 

 

درباره ی برنامه نویسان

همچنین ببینید

روابط موجود در انتیتی – آموزش تصویری WEB API

در این بخش از آموزش تصویری WEB Api به توضیح جزئیات بخش‌های EF در ارتباط با انتیتی‌ها ...

پاسخ دهید

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