در این آموزش Kendo UI به زبان فارسی ، یاد خواهید گرفت که با استفاده از Kendo UI چگونه می توانید عملیات ایجاد داده ، خواندن داده ، به روز رسانی داده و حذف کردن داده (CRUD) را در Grid و در ASEP.NET MVC انجام دهید. یک پروژه MVC جدید ایجاد کنید.
مرحله ۱ :
ویژوال استودیو (Visual Studio) را باز کنید.
یک پروژه جدید را از منوی File انتخاب کنید.
برنامه ASP.NET Web را انتخاب کرده و روی OK کلیک کنید.
MVC را انتخاب کنید و روی OK کلیک کنید.
مرحله ۲ – اضافه کردن HomeController جدید ( آموزش Kendo UI به زبان فارسی )
بر روی فولدر Controllers >> Add >> Controller راست کلیک کنید.
باید MVC 5 Controller-Empty را در دیالوگ ” Add Scaffold” انتخاب کرده و روی ” Add ” کلیک کنید.
روی کنترلر نامی مثل Home.Controller بگذارید و روی Add کلیک کنید.
کد زیر را در 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
پس از آنکه دانلود به اتمام رسید، فولدر زیر را نشان داده می شود.
بر روی فولدر “Style” کلیک کنید، تمام فایل های CSS نمایش داده می شوند باید در فولدر Content پروژه نیزکپی شوند .
در فولدر JS ، تمام فایل های JS نمایش داده می شود که باید در فولدر Script پروژه نیز کپی شود .
در ادامه ، نحوه کپی فایل های CSS در فولدر Content پروژه توضیح داده می شود : یک فولدر به نام فولدر Content در Kendo ایجاد نموده و فایل های CSS را کپی آن کنید.
فایل های JavaScript را وارد فولدر Scripts کنید.
مرحله ۴: ایجاد جدول در 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)
۰۹٫)
خروجی داده ها از جدول
مرحله ۵:
Connection string را در فایل web.config در ASP.NET وارد کنید.
مرحله ۶ آموزش Kendo UI به زبان فارسی :
App_Start فولدر را انتخاب کنید ، فایل Bundleconfig.cs را باز کنید و CSS زیر و JS را وارد آن کنید (کدها در ذیل داده شده اند).
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 کلیک کنيد.
کد داده شده را در 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) استفاده نمود.
کد زیر را در فایل 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 ” کلیک کنید.
کد زیر را در آن صفحه اضافه کنید.
@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 UI به زبان فارسی
امیدوارم این مقاله آموزش Kendo UI به زبان فارسی برای شما مفید بوده باشد. اگر پرسشی دارید، لطفا در بخش نظرات مطرح نمایید.
آموزش APS.NET Web Api 2 با انتیتی فریم ورک ۶ (Entity Framework)
فیلم آموزش Sql Server 2014 و ASP.NET و CSS و jQuery
