jqGrid با ASP.NET MVC 4

این مقاله توضیح کاملی در رابطه با نحوه ی پیاده سازی دستورات ساده ی CRUD (افزودن ، خواندن ، به روز رسانی و حذف) در jqGrid با ASP.NET MVC 4 میباشد.

اگر شما با مبحث Web API آشنا نیستید میتوانید از مقاله ی زیر برای ساخت یک Web API که پشتیبانی از عملیات های CRUD را انجام میدهد ، استفاده کنید.

ما از متد های GET ، POST ، PUT و DELETE HTTP به ترتیب برای Select ، Insert ، Update و Delete استفاده میکنیم. در ادامه با من همراه باشید …

jqGrid با ASP.NET MVC 4

Model :

public class Product
   {
       public int Id { get; set; }
       public string Name { get; set; }
       public string Category { get; set; }
       public decimal Price { get; set; }
   }

رابط Repository :
true interface IProductRepository
   {
       IEnumerablelt;ProductGetAll();
       Product Get(int id);
       Product Add(Product item);
       void Remove(int id);
       bool Update(Product item);
   }

Repository :
public class ProductRepository : IProductRepository
   {
       private Listlt;Productproducts = new Listlt;Product();
       private int _nextId = 1;
 
       public ProductRepository()
       {
           Add(new Product { Name = Tomato soup, Category = Groceries, Price = 1.39M });
           Add(new Product { Name = Yo-yo, Category = Toys, Price = 3.75M });
           Add(new Product { Name = Hammer, Category = Hardware, Price = 16.99M });
           Add(new Product { Name = Network Cards, Category = Electronics, Price = 6.59M });
           Add(new Product { Name = Spotting Scopes, Category = Optics, Price = 25.99M });
           Add(new Product { Name = Biometric Monitors, Category = Health Care, Price = 100.0M });
           Add(new Product { Name = Perfume, Category = Cosmetics, Price = 10.99M });
           Add(new Product { Name = Hair Coloring, Category = Personal Care, Price = 16.99M });
       }
 
       public IEnumerablelt;ProductGetAll()
       {
           return products;
       }
 
       public Product Get(int id)
       {
           return products.Find(p =p.Id == id);
       }
 
       public Product Add(Product item)
       {
           item.Id = _nextId++;
           products.Add(item);
           return item;
       }
 
       public void Remove(int id)
       {
           products.RemoveAll(p = p.Id == id);
       }
 
       public bool Update(Product item)
       {
           int index = products.FindIndex(p = p.Id == item.Id);
           if (index == -1)
           {
               return false;
           }
           products.RemoveAt(index);
           products.Add(item);
           return true;
       }
   }

کنترلر Web API :

یک کنترلر API خالی به پروژه تان بیافزایید و یک field که بتواند نمونه ی IProductionRepository را نگه دارد :

public class ProductsController : ApiController
{
    static readonly IProductRepository repository = new ProductRepository()
}
بیایید نگاهی به فرمت JSON مورد انتظار از grid بیاندازیم.
 { 
  total: xxx, 
  page: yyy, 
  records: zzz,
  rows : [
    {id:1, cell:[cell11, cell12, cell13]},
    {id:2, cell:[cell21, cell22, cell23]},
      ...
  ]
}

برای نمایش لیست محصولات ، ما فرمت بالا را اجرا میکنیم. متد زیر را ببینید :

public dynamic GetProducts(string sidx, string sord, int page, int rows)
      {
          var products = repository.GetAll() as IEnumerableProduct;
          var pageIndex = Convert.ToInt32(page) - 1;
          var pageSize = rows;
          var totalRecords = products.Count();
          var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
          products = products.Skip(pageIndex * pageSize).Take(pageSize);
          return new
          {
              total = totalPages,
              page = page,
              records = totalRecords,
              rows = (
                  from product in products
                  select new
                  {
                      i = product.Id.ToString(),
                      cell = new string[] {
                         product.Id.ToString(),
                         product.Name,
                         product.Category,
                         product.Price.ToString()  
                      }
                  }).ToArray()
          };
      }

برای افزودن یک محصول جدید ، درخواست HTTP POST باید مورد استفاده قرار بگیرد :

public HttpResponseMessage PostProduct(Product item)
       {
           item = repository.Add(item);
           var response = Request.CreateResponseProductgt;(HttpStatusCode.Created, item);
           string uri = Url.Link(DefaultApi, new { id = item.Id });
           response.Headers.Location = new Uri(uri);
           return response;
       }

برای به روز رسانی محصول موجود ، از HTTP PUT استفاده میشود :

public void PutProduct(int id, Product item)
       {
           item.Id = id;
           if (!repository.Update(item))
           {
               throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
           }
       }

برای حذف یک محصول :


public HttpResponseMessage DeleteProduct(int id)
{
    repository.Remove(id);
    return new HttpResponseMessage(HttpStatusCode.NoContent);
}

View :

برای ساده سازی قصد دارم از برنامه ای مشابه برای مصرف Web API استفاده کنیم.

۱ – ابتدا یک کتابخانه jqGrid را به پروژه اضافه میکنیم. برای نصب jQuery.jqGrid از NuGet ، دستورات زیر را در قسمت Package Manager Console اجرا میکنیم.

نصب Package jQuery.jqGrid

۲ – افزودن رابط کاربری jQuery و فایل های jqGrid css :

@Styles.Render(~/Content/themes/base/css, ~/Content/css) 
link href=~/Content/jquery.jqGrid/ui.jqgrid.css rel=stylesheet type=text/css /

یا افزودن ui.jqgrid.css در قسمت موجود.

۳ – افزودن فایل های Javascript :

script src=~/Scripts/jquery-1.6.2.js type=text/javascript/script
script src=~/Scripts/jquery-ui-1.8.23.js type=text/javascript/script
script src=~/Scripts/i18n/grid.locale-en.js type=text/javascript/script
script src=~/Scripts/jquery.jqGrid.min.js type=text/javascript/script

یا میتوانید grid.locale-en.js و jquery.jqGrid.min.js را بیافزایید و از آن استفاده کنید. مطمئن باشید که شرایط حتما باید یکسان باشد.

ساختار HTML :

۴ – احتیاج به افزودن جدول HTML برای jqGrid و یک div برای pager در قسمت بدنه داریم.

table id=gridMain
    /table
    div id=pagernav
    /div

۵ – برای ساخت یک سختار پایه ای jqGrid :


var API_URL = api/products/;
jQuery(#gridMain).jqGrid({
           url: API_URL,
           datatype: 'json',
           mtype: 'GET',
           pager: '#pagernav',
           sortable: true,
           height: 200,
           viewrecords: true,
           colNames: ['Id', 'Name', 'Category', 'Price'],
           colModel: [{ name: 'Id', index: 'Id', width: 40, sorttype: int },
            { name: 'Name', index: 'Name', editable: true, edittype: 'text', width: 70 },
            { name: 'Category', index: 'Category', editable: true, edittype: 'text', width: 70 },
            { name: 'Price', index: 'Price', editable: true, edittype: 'text', width: 50, align: right, sorttype: float, formatter: number }
           ],
           caption: CRUD With ASP.NET Web API,
           autowidth: true
            
       });

۶ – به صورت پیش فرض ، jqGrid از متد POST HTTP برای افزودن و ویرایش سوابق استفاده میکند. اما ما باید از متد های متفاوتی برای عملیات های مختلف استفاده کنیم. این مهم ترین نکته ی این مقاله است. من یک متد ساخته ام که متد های HTTP را میگیرد و پارامتر ها را برای ویرایش بازمیگرداند.





function updateDialog(action) {
            return {
                url: API_URL
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) { }
                , modal: true
                , onclickSubmit: function (params) {
                    var list = $(#gridMain);
                    var selectedRow = list.getGridParam(selrow);
                    rowData = list.getRowData(selectedRow);
                    params.url += rowData.Id;
                    params.mtype = action;
                }
                , width: 300
            };
        }
 
 
  jQuery(#gridMain).jqGrid('navGrid', '#pagernav',
        { add: true, edit: true, del: true },
        updateDialog('PUT'),
        updateDialog('POST'),
        updateDialog('DELETE')
);     

jqGrid با ASP.NET MVC 4

حال در یک نوار هدایت ، بر روی آیکون های add ، edit یا delete به ترتیب برای افزودن ، به روز رسانی یا حذف محصولات کلیک کنید.

امیدوارم از خواندن این مقاله لذت برده باشید.

نظرات و پیشنهاداتتان را با من درمیان بگذارید.

موفق باشید!

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    Reza پاسخ

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