ورود / ثبت نام
0
0

آموزش افزودن ، ویرایش و حذف در jqGrid با ASP.NET MVC 4

442 بازدید
jqGrid با ASP.NET MVC 4

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 به ترتیب برای افزودن ، به روز رسانی یا حذف محصولات کلیک کنید.

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

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

موفق باشید!

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=15152
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

1 نظر در مورد آموزش افزودن ، ویرایش و حذف در jqGrid با ASP.NET MVC 4

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

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