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

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

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

 

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

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

آموزش kendo ui

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

کندو گرید

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

آموزش kendo ui

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

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

آموزش asp

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

kendo ui

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

آموزش asp kendo

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

using System;  
۰۲٫using System.Collections.Generic;  
۰۳٫using System.Linq;  
۰۴٫using System.Web;  
۰۵٫using System.Web.Mvc;  
۰۶٫using kendoCrudMvc.Models;  
۰۷٫using System.Globalization;  
۰۸٫  
۰۹٫namespace kendoCrudMvc.Controllers  
۱۰٫{  
۱۱٫    public class HomeController : Controller  
۱۲٫    {  
۱۳٫        // GET: Home  
۱۴٫        public ActionResult Index()  
۱۵٫        {  
۱۶٫            return View();  
۱۷٫        }  
۱۸٫        public ActionResult login()  
۱۹٫        {  
۲۰٫            return View();  
۲۱٫        }  
۲۲٫        [HttpPost]  
۲۳٫        public ActionResult Index(UserModel users)  
۲۴٫        {  
۲۵٫            if (ModelState.IsValid==false)  
۲۶٫            {  
۲۷٫                return View(users);  
۲۸٫            }  
۲۹٫            Datalayer dl = new Datalayer();  
۳۰٫            string sql = "";  
۳۱٫            string strdate=users.dob.ToString();  
۳۲٫            DateTime dt = DateTime.ParseExact(strdate, "dd/MM/yyyy", CultureInfo.InvariantCulture);  
۳۳٫            users.dob = dt.ToString("yyyy-MM-dd").ToString();  
۳۴٫            if (users.userid>0)  
۳۵٫            {  
۳۶٫                sql = "UPDATE public.tbluser SET \"email\"='"+users.email+"',\"mobile\"='"+users.mobile+"', \"password\" ='" + users.password + "', \"dob\" ='" + users.dob.ToString() + "' WHERE userid=" + users.userid + "";   
۳۷٫            }  
۳۸٫            else  
۳۹٫            {  
۴۰٫                 sql = "Insert into tbluser(\"email\",\"mobile\",\"password\",\"dob\") values('" + users.email + "','" + users.mobile + "','" + users.password + "','" + users.dob + "')";  
۴۱٫  
۴۲٫            }  
۴۳٫  
۴۴٫  
۴۵٫            dl.query(sql);  
۴۶٫            return RedirectToAction("Index");  
۴۷٫        }  
۴۸٫        [HttpPost]  
۴۹٫        public JsonResult Getalluser()  
۵۰٫        {  
۵۱٫            Datalayer dl = new Datalayer();  
۵۲٫            List<UserModel> userlist = dl.getusers();  
۵۳٫            return Json(userlist);  
۵۴٫        }  
۵۵٫        [HttpPost]  
۵۶٫        public ActionResult delete(int userid)  
۵۷٫        {  
۵۸٫            Datalayer dl = new Datalayer();  
۵۹٫              
۶۰٫            string sql = "delete from tbluser where userid="+userid+"";  
۶۱٫            dl.query(sql);  
۶۲٫            return null;  
۶۳٫        }  
۶۴٫  
۶۵٫    }  
۶۶٫}  

مرحله ۳ آموزش 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

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

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

CREATE TABLE public.tbluser  
۰۲٫(  
۰۳٫   userid integer NOT NULL DEFAULT nextval('tbluser_userid_seq'::regclass),  
۰۴٫   email text COLLATE pg_catalog."default" NOT NULL,  
۰۵٫   mobile text COLLATE pg_catalog."default" NOT NULL,  
۰۶٫   password text COLLATE pg_catalog."default" NOT NULL,  
۰۷٫   dob date NOT NULL,  
۰۸٫   CONSTRAINT tbluser_pkey PRIMARY KEY (userid)  
۰۹٫)   

 

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

 

asp.net mvc

 

مرحله ۵:

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

 

kendo

 

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

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

 

ui

using System.Web;  
۰۲٫using System.Web.Optimization;  
۰۳٫  
۰۴٫namespace kendoCrudMvc  
۰۵٫{  
۰۶٫    public class BundleConfig  
۰۷٫    {  
۰۸٫        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862  
۰۹٫        public static void RegisterBundles(BundleCollection bundles)  
۱۰٫        {  
۱۱٫            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(  
۱۲٫                        "~/Scripts/jquery-{version}.js"));  
۱۳٫  
۱۴٫   
۱۵٫  
۱۶٫            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(  
۱۷٫                      "~/Scripts/bootstrap.js",  
۱۸٫                      "~/Scripts/respond.js"));  
۱۹٫  
۲۰٫            bundles.Add(new StyleBundle("~/Content/css").Include(  
۲۱٫                      "~/Content/bootstrap.css",  
۲۲٫                      "~/Content/site.css"));  
۲۳٫  
۲۴٫            bundles.Add(new StyleBundle("~/kendo/css").Include(  
۲۵٫                "~/Content/kendo/kendo.common.min.css",  
۲۶٫                "~/Content/kendo/kendo.common-bootstrap.min.css",  
۲۷٫                "~/Content/kendo/kendo.bootstrap.min.css"  
۲۸٫                ));  
۲۹٫            bundles.Add(new ScriptBundle("~/kendo/js").Include(  
۳۰٫                    "~/Scripts/kendo/kendo.all.min.js"  
۳۱٫                ));  
۳۲٫        }  
۳۳٫    }  
۳۴٫}  

 

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

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

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

 

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

 

public class UserModel  
۰۲٫    {  
۰۳٫        public int userid { get; set; }  
۰۴٫        [Required(ErrorMessage ="Email id Is required")]  
۰۵٫        public string email { get; set; }  
۰۶٫        [Required(ErrorMessage = "Mobile Number Is required")]  
۰۷٫        public string mobile { get; set; }  
۰۸٫        [Required(ErrorMessage = "Password Is required")]  
۰۹٫        public string password { get; set; }  
۱۰٫        [Required(ErrorMessage = "Confirm Password Is required")]  
۱۱٫        [Compare("password", ErrorMessage = "Password and Confirmation Password must match.")]  
۱۲٫        public string confirmpassword { get; set; }  
۱۳٫        [Required(ErrorMessage = "Date Of Birth Is required")]  
۱۴٫        public string dob { get; set; }  
۱۵٫    }  

 

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

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

 

asp.net core

 

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

 

using System;  
۰۲٫using System.Collections.Generic;  
۰۳٫using System.Linq;  
۰۴٫using System.Web;  
۰۵٫using Npgsql;  
۰۶٫using System.Configuration;  
۰۷٫using System.Data;  
۰۸٫using System.Globalization;  
۰۹٫  
۱۰٫namespace kendoCrudMvc.Models  
۱۱٫{  
۱۲٫    public class Datalayer  
۱۳٫    {  
۱۴٫        NpgsqlConnection con = new NpgsqlConnection();  
۱۵٫        public Datalayer()  
۱۶٫        {  
۱۷٫            con.ConnectionString = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString;  
۱۸٫        }  
۱۹٫        public void query(string sql)  
۲۰٫        {  
۲۱٫            NpgsqlCommand cmd = new NpgsqlCommand();  
۲۲٫            cmd.CommandText = sql;  
۲۳٫            cmd.CommandType = CommandType.Text;  
۲۴٫            con.Open();  
۲۵٫            cmd.Connection = con;  
۲۶٫            cmd.ExecuteNonQuery();  
۲۷٫            cmd.Dispose();  
۲۸٫            con.Close();  
۲۹٫        }  
۳۰٫        public List<UserModel> getusers()  
۳۱٫        {  
۳۲٫            DataTable dt = new DataTable();  
۳۳٫            DataSet ds = new DataSet();  
۳۴٫            List<UserModel> userlist = new List<UserModel>();  
۳۵٫            string sql = "select * from tbluser";  
۳۶٫            NpgsqlDataAdapter da = new NpgsqlDataAdapter(sql, con);  
۳۷٫            ds.Reset();  
۳۸٫            da.Fill(ds);  
۳۹٫            dt = ds.Tables[0];  
۴۰٫            foreach (DataRow row in dt.Rows)  
۴۱٫            {  
۴۲٫                UserModel user = new UserModel();  
۴۳٫                user.userid = Convert.ToInt32(row["userid"].ToString());  
۴۴٫                user.email= row["email"].ToString();  
۴۵٫                user.mobile = row["mobile"].ToString();  
۴۶٫                user.password = row["password"].ToString();  
۴۷٫                user.dob = row["dob"].ToString();  
۴۸٫                string strdate = user.dob.ToString();  
۴۹٫                DateTime date = DateTime.ParseExact(strdate, "dd-MM-yyyy HH:mm: ss", CultureInfo.InvariantCulture);  
۵۰٫                user.dob = date.ToString("dd-MM-yyyy").ToString();  
۵۱٫  
۵۲٫                userlist.Add(user);  
۵۳٫            }  
۵۴٫            return userlist;  
۵۵٫        }  
۵۶٫    }  
۵۷٫}  

 

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

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

کندو گرید

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

kendo ui دانلود

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

@using System.Web.Optimization  
۰۲٫<!DOCTYPE html>  
۰۳٫<html>  
۰۴٫<head>  
۰۵٫    <meta name="viewport" content="width=device-width" />  
۰۶٫    <title>@ViewBag.Title</title>  
۰۷٫    @Scripts.Render("~/bundles/jquery")  
۰۸٫    @Scripts.Render("~/kendo/js")  
۰۹٫    @Scripts.Render("~/bundles/jqueryval")  
۱۰٫    @Scripts.Render("~/bundles/modernizr")  
۱۱٫    @Styles.Render("~/Content/css")  
۱۲٫    @Styles.Render("~/kendo/css")  
۱۳٫  
۱۴٫      
۱۵٫</head>  
۱۶٫<body>  
۱۷٫    <div>  
۱۸٫        @RenderBody()  
۱۹٫    </div>  
۲۰٫</body>  
۲۱٫</html>  
۲۲٫  
۲۳٫Step9: -Add below Code in View Folder - > Index.cshtml  
۲۴٫@model kendoCrudMvc.Models.UserModel  
۲۵٫@{  
۲۶٫    ViewBag.Title = "Index";  
۲۷٫    Layout = "~/Views/Shared/_MasterPage.cshtml";  
۲۸٫}  
۲۹٫  
۳۰٫@using (Html.BeginForm())  
۳۱٫{  
۳۲٫    @Html.AntiForgeryToken()  
۳۳٫    @Html.HiddenFor(m => m.userid)  
۳۴٫    <h2></h2>  
۳۵٫    <div class="container">  
۳۶٫        <div class="row">  
۳۷٫            <div class="col-md-4">  
۳۸٫                <div class="form-group">  
۳۹٫                    <label for="email">Email</label>  
۴۰٫                    @Html.TextBoxFor(m => m.email, null, new { @class = "form-control" })  
۴۱٫                    <span style="color:red;">@Html.ValidationMessageFor(m => m.email)</span>  
۴۲٫  
۴۳٫                </div>  
۴۴٫                <div class="form-group">  
۴۵٫                    <label for="mobile">Mobile</label>  
۴۶٫                    @Html.TextBoxFor(m => m.mobile, null, new { @class = "form-control" })  
۴۷٫  
۴۸٫                    <span style="color:red;">  @Html.ValidationMessageFor(m => m.mobile)</span>  
۴۹٫                </div>  
۵۰٫                <div class="form-group">  
۵۱٫                    <label for="password">Password</label>  
۵۲٫                    @Html.PasswordFor(m => m.password, new { @class = "form-control" })  
۵۳٫                    <span style="color:red;">@Html.ValidationMessageFor(m => m.password)</span>  
۵۴٫                     
۵۵٫                </div>  
۵۶٫                <div class="form-group">  
۵۷٫                    <label for="confirmpassword">Confirm Password</label>  
۵۸٫                    @Html.PasswordFor(m => m.confirmpassword, new { @class = "form-control" })  
۵۹٫                    <span style="color:red;">@Html.ValidationMessageFor(m => m.confirmpassword)</span>  
۶۰٫                     
۶۱٫                </div>  
۶۲٫                <div class="form-group">  
۶۳٫                    <label for="dob">Date Of Birth</label>  
۶۴٫                    @*<input id="dob" name="dob" />*@  
۶۵٫                    @Html.TextBoxFor(m=>m.dob)  
۶۶٫                    <br />  
۶۷٫                    <span style="color:red;">@Html.ValidationMessageFor(m => m.dob)</span>  
۶۸٫                      
۶۹٫                </div>  
۷۰٫                <div class="form-group">  
۷۱٫                    <input type="submit" value="Submit" class="btn btn-primary" name="btninsert" />  
۷۲٫                </div>  
۷۳٫            </div>  
۷۴٫            <div class="col-md-8">  
۷۵٫                <div id="grid"></div>  
۷۶٫            </div>  
۷۷٫        </div>  
۷۸٫    </div>  
۷۹٫    <script type="text/javascript">  
۸۰٫        $(document).ready(function () {  
۸۱٫  
۸۲٫            $('body').on('click', '.edit', function () {  
۸۳٫                debugger;  
۸۴٫                $("#userid").val($(this).data("id"));  
۸۵٫                $("#email").val($(this).data("email"));  
۸۶٫                $("#mobile").val($(this).data("mobile"));  
۸۷٫                $("#password").val($(this).data("password"));  
۸۸٫                var d = $(this).data("date").slice(0, 10).split('-');  
۸۹٫                var ddate = d[0] + '/' + d[1] + '/' + d[2];  
۹۰٫                $("#dob").val(ddate);  
۹۱٫            });  
۹۲٫  
۹۳٫        });  
۹۴٫        $("#dob").kendoDatePicker({  
۹۵٫            format: "dd/MM/yyyy"  
۹۶٫        });  
۹۷٫  
۹۸٫        var datasource = new kendo.data.DataSource({  
۹۹٫            transport: {  
۱۰۰٫                read: {  
۱۰۱٫                    type: "POST",  
۱۰۲٫                    dataType: "json",  
۱۰۳٫                    url: "@Url.Action("Getalluser")",  
۱۰۴٫                    data: {}  
۱۰۵٫                },  
۱۰۶٫                destroy: {  
۱۰۷٫                    type: "POST",  
۱۰۸٫                    dataType: "json",  
۱۰۹٫                    url: "@Url.Action("delete")",  
۱۱۰٫                    data: {}  
۱۱۱٫                }  
۱۱۲٫            },  
۱۱۳٫            schema: {  
۱۱۴٫                model: {  
۱۱۵٫                    id: "userid",  
۱۱۶٫                    field: {  
۱۱۷٫                        email: { type: "string" },  
۱۱۸٫                        mobile: { type: "string" },  
۱۱۹٫                        password: { type: "string" },  
۱۲۰٫                        dob: { type: "date",format: "{0:dd-MM-yyyy}"}  
۱۲۱٫                    }  
۱۲۲٫                }  
۱۲۳٫            },  
۱۲۴٫            pageSize: 4  
۱۲۵٫        });  
۱۲۶٫        $("#grid").kendoGrid({  
۱۲۷٫            dataSource: datasource,  
۱۲۸٫            columns: [  
۱۲۹٫                {  
۱۳۰٫                    field: "email",  
۱۳۱٫                    title: "Email"  
۱۳۲٫                },  
۱۳۳٫                 {  
۱۳۴٫                     field: "mobile",  
۱۳۵٫                     title: "Mobile"  
۱۳۶٫                 },  
۱۳۷٫                 {  
۱۳۸٫                     field: "password",  
۱۳۹٫                     title: "Password"  
۱۴۰٫                 },  
۱۴۱٫                 {  
۱۴۲٫                     field: "dob",  
۱۴۳٫                     title: "Date Of Birth",  
۱۴۴٫                     format: "{0:dd-MM-yyyy}"  
۱۴۵٫                 },  
۱۴۶٫                 {  
۱۴۷٫                     command: "destroy",  
۱۴۸٫                     title: "Delete"  
۱۴۹٫                 },  
۱۵۰٫                 {  
۱۵۱٫                     template: "<input type='button' value='edit' class='k-button edit' data-id='#=userid#' data-email='#=email#' data-mobile='#=mobile#' data-password='#=password#' data-date='#=dob#' />",  
۱۵۲٫                     title: "Edit"  
۱۵۳٫                 }  
۱۵۴٫            ],  
۱۵۵٫            editable: "inline"  
۱۵۶٫        }).data("kendoGrid");  
۱۵۷٫    </script>  
۱۵۸٫  
۱۵۹٫}  
۱۶۰٫   

 

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

 

kendo دانلود

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

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

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

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

 

 

ورکشاپ رایگان دوره های تخصصی برنامه نویسی

شما این فرصت را دارید، با تکمیل فرم زیر، قبل از انتخاب دوره آموزشی مناسب خود، در ورکشاپ رایگان دوره های تخصصی برنامه نویسی شرکت کنید
  • این فیلد برای اعتبار سنجی است و باید بدون تغییر باقی بماند .

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

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

ساخت اپلیکیشن سمت کاربر با فرمت Javascript

در این بخش از آموزش Web API با استفاده از HTML، Javascript و  Knockout.js   اپلیکیشنی …

4 نظر

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

  2. سلام من یک گرید کندو دارم که فقط میخوام ServerPaging کار کنه و نمی خوام سورت کردن و فیلتر کردن سمت سرور باشه.هرچی گشتم راحی نبود حتی Support خود Telerik گفته بود نمیشه.
    میشه از طریق DataSource Transport Read : function() بشه فهمید کی داره change دیتا سورس رو صدا میزنه؟

  3. من در مورد kendo MVC سوال دارم، امکانش هست کمکم کنید، هزینه اش رو هم پرداخت میکنم

  4. استفاده از Kendo Grid در asp mvc core و عدم نمایش جدول در صورت وجود Include

    وقتی جداول بدون رابطه رو در گرید کندو استفاده میکنم مشکلی نیست

    ولی جداولی که رابطه دارند تا وقتی خالی اند درسته جداول به محض درج اطلاعات اصلا گرید کندو نمایش داده نمیشه

    کسی از گرید کندو تو asp core استفاده کرده؟

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

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