عملیات CRUD با استفاده از jqGrid در MVC

در این مقاله ما یک برنامه بسیار ساده با ASP.NET MVC به صورت گام به گام ایجاد می کنیم. ما برای ایجاد دیتابیس ، در EntityFrameWork به صورت CodeFirst می نویسیم و در برنامه ما از JqGrid استفاده می کنیم و عملیات CRUD را با استفاده از JqGrid اجرا می کنیم.

معرفی JqGrid :

JqGrid یک پلاگینgrid می باشد که از قابلیت Ajax پشتیبانی میکند و در javaScript نیز قابل استفاده است و امکان نمایش داده ها در فرمت جدول را برای ما فراهم می کند. این محصول ویژگی های زیادی برای اداره کردن داده ها را دارد.زیرا این یک پلاگین jQuery می باشد و فقط در سمت کاربر کار می کند و نه در سمت سرور اما برای ثبت کردن(binding ) داده ها باید در سمت سرور باشد که با فراخوانی AJAX بتواند به صورت داینامیک laod شود. JqGrid رایگان می باشد ویک کتابخانه Open‎ Source می باشد.

ویژگی های JqGrid:

با مرورگرهای اینترنت اکسپلورر(IE) ، کروم(Chrome)، موزیلا(Mozilla) ، سافاری(Safari) و اپرا (Opera)به خوبی کار می کنند.

JqGrid قابل تنظیم با CSS با پشتیبانی کامل Themeroller می باشد.

UI آن بیشتر از 20 زبان را پشتیبانی میکند .

پشتیبانی از Paging

پشتییبانی از Sorting

پشتیبانی از Insertion, Edit, Deletion, Searching, Filtering

ویرایش به صورت InLine

فعال کردن AJAX

پذیرفتن منابع داده XML/JSON/local array

وارد کردن و خارج کردن داده

مثال: این مثال به شما کمک می کند عملیات CRUD را با استفاده ازJqGrid در MVC .مراحل زیر را دنبال کنید.

یک پروژه MVC ایجاد کنید و یک اسم به پروژه خود بدهید. برای ایجاد یک پروژه جدید MVC ، روی File قسمت New Project را کلیک کنید .یا می توانید دکمه های CTRL + SHIFT + N را بزنید.

MVC را به عنوان قالب پروژه انتخاب کنید و Authentication را Individual Authentication انتخاب کنید.

حال برای ایجاد جدول(Table) در دیتابیس به صورت Code First ، یک پوشه به اسم Entities ایجاد می کنیم.برای ایجاد پوشه ، روی پروژه راست کلیک کنید و روی Add بروید و سپس روی New Folder کلیک کنید.

حال اسم پوشه را “Entities” بگذارید.

یک کلاس در داخل پوشه “Entities” اضافه کنید و نام آن را "StudentMaster.cs" بگذارید. شما می توانید برای اضافه کردن کلاس شکل زیر را دنبال کنید.

حال یک dialog box برای شما باز می شود که اسم این کلاس را "StudentMaster.cs" بگذارید.

حال کدهای زیر را درکلاس "StudentMaster" بنویسید .

6.	using System;  
7.	using System.Collections.Generic;  
8.	using System.ComponentModel.DataAnnotations;  
9.	using System.Linq;  
10.	using System.Web;  
11.	  
12.	namespace StudentInformation.Entities  
13.	{  
14.	    public class StudentMaster  
15.	    {  
16.	        [Key]  
17.	        public string ID { get; set; }  
18.	        [Required]  
19.	        public string Name { get; set; }  
20.	        [Required]  
21.	        public string FatherName { get; set; }  
22.	        [Required]  
23.	        public string Gender { get; set; }  
24.	        [Required]  
25.	        public string ClassName { get; set; }  
26.	        [Required]  
27.	        public DateTime DateOfAdmission { get; set; }  
28.	    }  
29.	}

این entity را به entity framework خود Attach کنید.به پوشه Model بروید وپوشه "IdentityModels.cs" را باز کنید ، جدول StudentMaster را با استفاده از کدهای زیر به entity framework ،اضافه کنید.

public DbSet<StudentMaster> Students { get; set; }

کد کامل شده در IdentityModels.cs, :

1.	using Microsoft.AspNet.Identity.EntityFramework;  
2.	using StudentInformation.Entities;  
3.	using System.Data.Entity;  
4.	  
5.	namespace StudentInformation.Models  
6.	{  
7.	    // You can add profile data for the user by adding more properties to your ApplicationUser class, please visit http://go.microsoft.com/fwlink/?LinkID=317594 to learn more.  
8.	    public class ApplicationUser : IdentityUser  
9.	    {  
10.	    }  
11.	  
12.	    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>  
13.	    {  
14.	        public ApplicationDbContext()  
15.	            : base("DefaultConnection")  
16.	        {  
17.	        }  
18.	        public DbSet<StudentMaster> Students { get; set; }  
19.	    }  
20.	}

حال، Package Manager Console را باز کنید ، شما می توانید Package Manager Console را به منوی Tools بروید و سپس Library Pacckage Manager و بعد ، Package Manager Console را باز کنید.

حال Migrations را با اسفاده از کد زیر در Pacage Manager Console ، فعال کنید.

PM> Enable-Migrations

. بعد از فعال کردن migrations شما یک پوشه جدید در داخل پروژه با اسم Migrations مشاهده خواهید کرد که در آن یک فایل با نام Configuration.cs وجود دارد.

Configuration.Cs را باز کنید و AUtomaticMigrationsEnabled را True کنید.

حال پروژه خود را Build کنید و یکبار دیگر Package Manager Console را باز کنید و کد زیر را برای ایجاد جداول در دیتابیس ، داخل Package Manager Console بنویسید.

  PM> update-database

بعد از نوشتن کد بالا شما می توانید server explorer خود را باز کنید(با دکمه های CTRL + ALT + S) و شما می توانید جدول StudentMaster، به همراه فیلدهایی که در کلاس StudentMaster وارد کرده ایم را مشاهده کنید.

حال شما یک Controller با نام "StudentController" اضافه کنید. برای اضافه کردن Controller ،روی پروژه خود ،روی پوشه Controller راست کلیک کنید روی Add بروید و سپس Controller را انتخاب کنید. در شکل زیر StudentController . را اضافه کرده است.

حال یک Empty Controller را اضافه کنید.

حال یک اسم به Contorller خود بدهید.

حال jqGrid Package را از Nuget Package Manager نصب کنید.برای اضافه کردن jqGrid package از Nuget package Manager :

روی References راست کلیک کنید و سپس روی Manage Nuget Packages ،کلیک کنید.

حال jqGrid را جستجو کنید و jQuery.jqGrid را نصب کنید.

15. حال StudentController را باز کنید و روی View که در متد Index ، قرار دارد راست کلیک کنید وAdd View را انتخاب کنید..

عملیات بالا View را ایجاد می کند و کد زیر را درView خود بنویسید .



@{
    ViewBag.Title = "اطلاعات دانش آموزان";
}

<h2>اطلاعات دانش آموزان</h2>
<div>
    <table id="jqGrid"></table>
    <div id="jqControls"></div>

</div>

پوشه JavaScript را در پوشه Scripts با نام "Script.js" ، اضافه کنید.

اسم "script" را به فایل خود بدهید.

حال StudentController را باز کنید و کدهای زیر را برای گرفتن اطلاعات دانش آموزان ، بنویسید.

1.	public JsonResult GetStudents(string sidx, string sort, int page, int rows)  
2.	        {  
3.	            ApplicationDbContext db = new ApplicationDbContext();  
4.	            sort = (sort == null) ? "" : sort;  
5.	            int pageIndex = Convert.ToInt32(page) - 1;  
6.	            int pageSize = rows;  
7.	  
8.	            var StudentList = db.Students.Select(  
9.	                    t => new  
10.	                    {  
11.	                        t.ID,  
12.	                        t.Name,  
13.	                        t.FatherName,  
14.	                        t.Gender,  
15.	                        t.ClassName,  
16.	                        t.DateOfAdmission  
17.	                    });  
18.	            int totalRecords = StudentList.Count();  
19.	            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);  
20.	            if (sort.ToUpper() == "DESC")  
21.	            {  
22.	                StudentList = StudentList.OrderByDescending(t => t.Name);  
23.	                StudentList = StudentList.Skip(pageIndex * pageSize).Take(pageSize);  
24.	            }  
25.	            else  
26.	            {  
27.	                StudentList = StudentList.OrderBy(t => t.Name);  
28.	                StudentList = StudentList.Skip(pageIndex * pageSize).Take(pageSize);  
29.	            }  
30.	            var jsonData = new  
31.	            {  
32.	                total = totalPages,  
33.	                page,  
34.	                records = totalRecords,  
35.	                rows = StudentList  
36.	            };  
37.	            return Json(jsonData, JsonRequestBehavior.AllowGet);  
38.	        }

حال در داخل فایل Script.js کدهای زیر را وارد کنید.

$(function() {
    $("#jqGrid").jqGrid({
        url: "/Student/GetStudents",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['ID', 'نام دانش آموز ', 'نام پدر ', 'جنسیت', 'کلاس', 'تاریخ'],
        colModel: [
            { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'FatherName', index: 'FatherName', editable: true },
            { key: false, name: 'Gender', index: 'Gender', editable: true, edittype: 'select', editoptions: { value: { 'مرد': 'مرد', 'زن': 'زن', 'هیچکدام': 'هیچکدام' } } },
            { key: false, name: 'ClassName', index: 'ClassName', editable: true, edittype: 'select', editoptions: { value: { '1': '1st Class', '2': '2nd Class', '3': '3rd Class', '4': '4th Class', '5': '5th Class' } } },
            { key: false, name: 'DateOfAdmission', index: 'DateOfAdmission', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }
        ],
        pager: jQuery('#jqControls'),
        rowNum: 10,
        rowList: [10, 20, 30, 40, 50],
        height: '100%',
        viewrecords: true,
        caption: 'اسامی دانش آموزان',
        emptyrecords: 'هیچ دانش آموزی ثبت نشده است',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false
    }).navGrid('#jqControls', { edit: true, add: true, del: true, search: true, refresh: true },
    {

و در آخر چند Reference به index.cshtml View اضافه کنید.


@{
    ViewBag.Title = "اطلاعات دانش آموزان";
}

<h2>اطلاعات دانش آموزان</h2>
<div>
    <table id="jqGrid"></table>
    <div id="jqControls"></div>

</div>
@section scripts{
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet"/>

    <script src="~/Scripts/jquery-ui-1.10.4.js"></script>

    <script src="~/Scripts/i18n/grid.locale-en.js"></script>

    <script src="~/Scripts/jquery.jqGrid.min.js"></script>

    <script src="~/Scripts/script.js"></script>

}

بعد از ایجاد reference ها یک بار پروژه را Builed کنید. و پروژه را با دکمه F5 اجرا بگیرید.و URL زیر را تایپ کنید http://localhost:25784/Student .

حال به StudentController می رویم ودر داخل آن کدهای Create ، Update، Delete را می نویسیم .

برای Create:

1.	[HttpPost]  
2.	public string Create([Bind(Exclude = "Id")] StudentMaster Model)  
3.	{  
4.	   ApplicationDbContext db = new ApplicationDbContext();  
5.	   string msg;  
6.	   try  
7.	   {  
8.	      if (ModelState.IsValid)  
9.	      {  
10.	         Model.ID = Guid.NewGuid().ToString();  
11.	         db.Students.Add(Model);  
12.	         db.SaveChanges();  
13.	         msg = "Saved Successfully";  
14.	      }  
15.	      else  
16.	      {  
17.	            msg = "Validation data not successfully";  
18.	      }  
19.	   }  
20.	   catch (Exception ex)  
21.	   {  
22.	      msg = "Error occured:" + ex.Message;  
23.	   }  
24.	   return msg;  
25.	}

برای Update:

•  public string Edit(StudentMaster Model)  
•  {  
•      ApplicationDbContext db = new ApplicationDbContext();  
•      string msg;  
•      try  
•      {  
•          if (ModelState.IsValid)  
•          {  
•              db.Entry(Model).State = EntityState.Modified;  
•              db.SaveChanges();  
•              msg = "Saved Successfully";  
•          }  
•          else  
•          {  
•              msg = "Validation data not successfully";  
•          }  
•      }  
•      catch (Exception ex)  
•      {  
•          msg = "Error occured:" + ex.Message;  
•      }  
•      return msg;  
•  }

برای Delete :

1.	public string Delete(string Id)  
2.	{  
3.	    ApplicationDbContext db = new ApplicationDbContext();  
4.	    StudentMaster student = db.Students.Find(Id);  
5.	    db.Students.Remove(student);  
6.	    db.SaveChanges();  
7.	    return "Deleted successfully";  
8.	}

بعد از نوشتن action method های بالا ، فایل script.js را باز کنید تابع های لازم برای Create, Update, Delete را اضافه کنید.

فایل Script.js

$(function() {
    $("#jqGrid").jqGrid({
        url: "/Student/GetStudents",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['ID', 'نام دانش آموز ', 'نام پدر ', 'جنسیت', 'کلاس', 'تاریخ'],
        colModel: [
            { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'FatherName', index: 'FatherName', editable: true },
            { key: false, name: 'Gender', index: 'Gender', editable: true, edittype: 'select', editoptions: { value: { 'مرد': 'مرد', 'زن': 'زن', 'هیچکدام': 'هیچکدام' } } },
            { key: false, name: 'ClassName', index: 'ClassName', editable: true, edittype: 'select', editoptions: { value: { '1': '1st Class', '2': '2nd Class', '3': '3rd Class', '4': '4th Class', '5': '5th Class' } } },
            { key: false, name: 'DateOfAdmission', index: 'DateOfAdmission', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }
        ],
        pager: jQuery('#jqControls'),
        rowNum: 10,
        rowList: [10, 20, 30, 40, 50],
        height: '100%',
        viewrecords: true,
        caption: 'اسامی دانش آموزان',
        emptyrecords: 'هیچ دانش آموزی ثبت نشده است',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false
    }).navGrid('#jqControls', { edit: true, add: true, del: true, search: true, refresh: true },
    {
        zIndex: 100,
        url: '/Student/Edit',
        closeOnEscape: true,
        closeAfterEdit: true,
        recreateForm: true,
        afterComplete: function(response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 100,
        url: "/Student/Create",
        closeOnEscape: true,
        closeAfterAdd: true,
        afterComplete: function(response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 100,
        url: "/Student/Delete",
        closeOnEscape: true,
        closeAfterDelete: true,
        recreateForm: true,
        msg: "Are you sure you want to delete Student... ? ",
        afterComplete: function(response) {
            if (response.responseText) {
                alert(response.responseText);
            }
        }
    },
    {
        zIndex: 100,
        caption: "Search Students",
        sopt: ['cn']


    });
});

حال پروژه را اجرا بگیرید و خروجی زیر را خواهید دید.

خروجی :