مشخصات مقاله

تعداد دانلود:
1639
امتیاز :
0.0
تعداد بازدید:
6323
تعداد نظرات:
0
لایک ها :
0

آموزش نحوه استفاده از جدول های jQuery با ASP.NET CORE MVC

نحوه استفاده از جدول های jQuery با ASP.NET CORE MVC

در این مقاله، ما قصد داریم نحوه استفاده از Client Side Grid (DataTables Grid) را با ASP.NET Core MVC گام به گام یاد بگیریم. اکثر برنامه نویس ها از "DataTables Grid" استفاده می کنند و اگر دلیل استفاده شان را بپرسید ، می گویند: "چون استفاده از آن آسان و open source است".

در حال حاضر، در این دوران مستمر توسعه وب، بیشتر کارها در سمت Client انجام می شود و کار کمتر در سمت سرور انجام می شود.

همانطور که می دانید، Grids های داخلی در ASP.NET Core وجود ندارد.یا باید خودتان ایجاد کنید و یا از Grids هایی که در NuGet package موجود است استفاده کنید. بهترین گزینه این است که از Grid سمت client استفاده کنید. من میخواهم از DataTables Grid جی کوئری استفاده کنم.

ابتدا با بخش پایگاه داده شروع کنید.

بخش پایگاه داده

من یک پایگاه داده با نام "CustomerDB" و در آن، جدول "CustomerTB" ایجاد کرده ام.

بعد، ما می خواهیم یک ASP.NET Core MVC Web application ایجاد کنیم.

ایجاد ASP.NET Core MVC Web Application

برنامه Visual Studio 2017 باز کنید:

پس از باز کردن IDE، ما می خواهیم پروژه ASP.NET Core MVC ایجاد کنیم. برای انجام این کار، فقط روی File >> New >> Project کلیک کنید.

پس از انتخاب project ، یک پنجره جدید با نام « New Project » ظاهر خواهد شد. در آن، ما میخواهیم Visual C # Project Templates >> Web >> ASP.NET Core Web Application را انتخاب کنیم. سپس، نام پروژه را ExampleGrid خواهیم گذاشت.

پس از نامگذاری پروژه، ما می خواهیم روی دکمه OK برای ایجاد یک پروژه کلیک کنیم.یک پنجره برای انتخاب قالب برای ایجاد ASP.NET Core Web Application باز می شود در اینجا ما میخواهیم برنامه MVC ایجاد کنیم.به همین دلیل ما Web Application (Model View Controller) انتخاب می کنیم و سپس برای انتخاب (.Net core) و (.Net Framework) اقدام می کنیم.برای این پروژه از .Net Framework و ASP.NET Core 1.1 استفاده می کنیم و بعد از آن برای ایجاد پروژه روی دکمه OK کلیک می کنیم.

پس از کلیک روی OK، شروع به ایجاد یک پروژه خواهید کرد.

ساختار پروژه

پس از ایجاد برنامه، ما باید منابع مورد نیاز برای Entity Framework Core را اضافه کنیم.

نصب بسته برای Entity framework core از NuGet

برای نصب بسته، فقط روی پروژه کلیک راست کنید (ExampleGrid) و سپس Manage NuGet package را انتخاب کنید. تصویر زیر پنجره NuGet Package Manager نشان میدهد.

در قسمت مرورگر، "Microsoft.EntityFrameworkCore.SqlServer" را در کادر جستجو تایپ کنید و فقط روی دکمه Install کلیک کنید.

Microsoft.EntityFrameworkCore.SqlServer

اضافه کردن Connection string و تنظیم DbContext

پس از اضافه کردن reference ، حال یک connection string در فایل appsetting.json اضافه کنید.

پس از اضافه کردن یک connection string ، مرحله بعدی اضافه کردن یک کلاس است که کلاس DbContext را به ارث برده باشد. قبل از انجام این کار، ابتدا یک پوشه به نام models ایجاد می کنیم و درون آن، ما قصد داریم این کلاس را اضافه کنیم.

برای اضافه کردن یک پوشه، فقط روی پروژه کلیک راست کنید (ExampleGrid)، سپس از منویی که ظاهر می شود، Add را اضافه کنید و New Folder را انتخاب کنید.

Add - New Folder.

حالا، اجازه دهید یک کلاس با نام DatabaseContext در پوشه Models بگذاریم.

برای اضافه کردن یک مدل، فقط کافیست بر روی پوشه Models راست کلیک کنید. سپس، Add >> Class را انتخاب کنید. یک پنجره " Add New Item " باز می شود که در آن کلاس پیش فرض انتخاب شده است. کلاس را به نام DatabaseContext نامگذاری کنید و روی دکمه Add کلیک کنید.

بعد از اضافه کردن یک کلاس DatabaseContext، می خواهیم از کلاس DbContext ارث ببریم.

پس از ارث بردن از DbContext، یک constructor ایجاد می کنیم که DbContextOptions را به عنوان پارامتر ورودی می گیرد و همچنین constructor کلاس پایه (: base (options)) [DbContext] را به ارث می برد.

بعد، ما می خواهیم یک Service جدید در کلاس Startup.cs برای تزریق وابستگی(injecting dependency) اضافه کنیم.

حالا، هر زمان که از کلاس DatabaseContext استفاده می کنید، نمونه DbContext در آنجا تزریق می شود.

افزودن مدل CustomerTB

پس از افزودن Model CustomerTB، در مرحله بعدی ما قصد داریم DbSet تمام مدل ها را در کلاس DatabaseContext اضافه کنیم.

اضافه کردن DbSet برای Model CustomerTB در کلاس DatabaseContext

حالا، اجازه دهید DbSet را برای Model CustomerTB در کلاس DatabaseContext اضافه کنیم، همانطور که در زیر نشان داده شده است.

پس از اضافه کردن Model CustomerTB در کلاس DatabaseContext، در قدم بعدی ما قصد داریم یک کنترلر ایجاد کنیم.

پس از کلیک کردن بر روی دکمه Add ، DemoGridController را در پوشه Controller ایجاد کرده همانطور که تصویر زیر نشان می دهد:

پس از اضافه کردن DemoGridController ما قصد داریم DataTables Scripts را دانلود کنیم و آن را به پروژه اضافه کنیم.

گرفتن DataTables Scripts

در این مثال، فایل های Javascript library زیر استفاده می شود.

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js

فایل های CSS زیر در این مثال استفاده می شود:

Bootstrap v3.3.7

https://getbootstrap.com/docs/3.3/getting-started/

DataTables CSS files

https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css
https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css

افزودن متد ShowGrid در کنترلر DemoGrid

پس از اضافه کردن اکشن حال میخواهیم یک View با نام ShowGrid اضافه کنیم:

اضافه کردن ShowGrid View در پوشه DemoGrid

اضافه کردن Grid DataTables به ShowGrid View

در ابتدا قصد داریم مرجع اسکریپت و سی اس اس را اضافه کنیم.

< script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >< /script >  
< link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" / >
< link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" / >
< link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" / >  
< script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" >< /script >  
< script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js " >< /script >

بعد از اضافه کردن مرجع اسکریپت و CSS، ما می خواهیم افزونه DataTables Markup اضافه کنیم.

اضافه کردن افزومه DataTables

Html Table ساده ای است که در آن می خواهیم هدرهای ستون اضافه کنیم ("< th >") تمام ستون هایی که می خواهیم نمایش داده شود.

  < div class="container" >  
    < br / >
    < div style="width:90%; margin:0 auto;" >  
        < table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0" >  
            < thead >  
                < tr >  
                    < th >CustomerID< /th >  
                    < th >Name< /th >  
                    < th >Address< /th >  
                    < th >Country< /th >  
                    < th >City< /th >  
                    < th >Phoneno< /th >  
                    < th >Edit< /th >  
                    < th >Delete< /th >  
                < /tr >  
            < /thead >  
        < /table >  
    < /div >  
< /div >

بعد از اضافه کردن Markup بعد ما قصد داریم تابع(function) datatables را برای ایجاد datatables اضافه کنیم.

اضافه کردن تابع DataTables برای ایجاد DataTables

Basic syntax

$('#example').dataTable( {  
} );

گزینه های DataTables

تمام تعاریف از وب سایت https://datatables.net گرفته شده است.

Processing : Enable یا disable نمایش processing هنگام پردازش جدول (به عنوان مثال مرتب سازی)
serverSide : پردازش سمت سرور - جایی که filtering ، paging و sorting محاسبات توسط سرور انجام می شود.
Filter : این گزینه برای فعال و غیرفعال کردن search box استفاده می شود.
orderMulti : هنگامی که (ordering) فعال می شود، به طور پیش فرض DataTables به کاربران امکان می دهد ستون های چندگانه را با تغییر دکمه روی سلول هدر برای هر ستون مرتب کنند. اگرچه این می تواند برای کاربران بسیار مفید باشد، همچنین می تواند پیچیدگی سفارش را افزایش دهد،و همچنین افزایش ظرفیت پردازش داده ها را افزایش می دهد. بنابراین، این option برای اجازه دادن به این قابلیت shift-click چند ستون ارائه شده است.
Ajax : Ajax request برای گرفتن اطلاعات به DataTables ساخته شده است.
columnDefs : خواص(properties) اولیه برای تعریف ستون را تنظیم کنید.
Columns : خواص(properties) اولیه اولیه ستون را تنظیم کنید.

پس از اتمام درک options ها یا properties ها ما قصد داریم آن را تنظیم کنیم.

ما قصد داریم گزینه " processing " را برای نمایش نوار processing درست کنیم ، پس از آن ما قصد داریم گزینه "serverSide" را به درستی تنظیم کنیم، زیرا ما می خواهیم paging و فیلتر کردن در serverSide انجام دهیم.

بعد از گزینه "serverSide" گزینه " filter " است. ما قصد داریم از جعبه جستجو استفاده کنیم. به همین دلیل ما این property را به true تنظیم کردیم ، "orderMulti" نیز false تنظیم شده است زیرا ما نمی خواهیم ستون های چندگانه را یک بار مرتب کنیم.

DataTables Options snapshot

Ajax Option

و گزینه اصلی Ajax است که ما برای فراخوانی یک Action Method برای گرفتن داده ها برای اتصال به DataTables Grid استفاده می کنیم که داده ها در فرمت Json هستند.برای اینکه ما میخواهیم URL: -"/DemoGrid/LoadData” منتقل کنیم ، این درخواست Post request است و نوع داده ای که قرار است تنظیم شود Json است.

ما می خواهیم اکشن متد LoadData که در کنترلر DemoGrid است را فراخوانی کنیم که در مراحل بعدی توضیح خواهیم داد.

به عنوان مثال:

columnDefs Option

پس از تنظیم Ajax ما یک گزینه columnDefs می خواهیم که برای پنهان کردن کلید اولیه(Primary key) جدول (CustomerID) استفاده کنیم و همچنین قابل جستجو نباشد.

به عنوان مثال:

columns Option

در نهایت، آخرین option دوم، ستون هایی است که برای راه اندازی DataTables grid استفاده می شوند.اضافه کردن property برای render کردن grid که که باید در این گزینه option تعریف شده است.

به عنوان مثال:

کلید Render در Columns ها

در نهایت، ما باید یک دکمه در grid برای edit کردن داده ها و حذف داده ها داشته باشیم.

درنهایت با کلیک کردن بر روی دکمه delete ما می تونیم یک function سفارشی شده را برای حذف داده ها فراخوانی کنیم

قطعه کد کامل ShowGrid View

@{  
    Layout = null;  
}  
  
< script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >< /script >  
< link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" / >
< link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" / >
< link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" / >  
< script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" >< /script >  
< script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js " >< /script >    
< div class="container" >  
< br / >
    < div style="width:90%; margin:0 auto;" >  
        < table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0" >  
            < thead >  
                < tr >  
                    < th >CustomerID< /th >  
                    < th >Name< /th >  
                    < th >Address< /th >  
                    < th >Country< /th >  
                    < th >City< /th >  
                    < th >Phoneno< /th >  
                    < th >Edit< /th >  
                    < th >Delete< /th >  
                < /tr >  
            < /thead >  
        < /table >  
    < /div >  
< /div >  
  
< script >


        $(document).ready(function ()
        {
            $("#example").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/DemoGrid/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columnDefs":
                [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],
                "columns": [
                    { "data": "CustomerID", "name": "CustomerID", "autoWidth": true },
                    { "data": "Name", "name": "Name", "autoWidth": true },
                    { "data": "Address", "name": "Address", "autoWidth": true },
                    { "data": "Country", "name": "Country", "autoWidth": true },
                    { "data": "City", "name": "City", "autoWidth": true },
                    { "data": "Phoneno", "name": "Phoneno", "autoWidth": true },
                    {
                        "render": function (data, type, full, meta)
                        { return '< a class="btn btn-info" href="/DemoGrid/Edit/' + full.CustomerID + '" >Edit< /a >'; }
                    },
                    {
                        data: null, render: function (data, type, row)
                        {
                            return "< a href='#' class='btn btn-danger' onclick=DeleteData('" + row.CustomerID + "');  >Delete< /a >";
                        }
                    },
                ]

            });
        });


    function DeleteData(CustomerID)
        {
            if (confirm("Are you sure you want to delete ...?"))
            {
                Delete(CustomerID);
            }
            else
            {
                return false;
            }
        }


        function Delete(CustomerID)
    {
        var url = '@Url.Content("~/")' + "DemoGrid/Delete";

            $.post(url, { ID: CustomerID }, function (data)
                {
                    if (data)
                    {
                        oTable = $('#example').DataTable();
                        oTable.draw();
                    }
                    else
                    {
                        alert("Something Went Wrong!");
                    }
                });
    }

< /script >

با مقدار دهی اولیه DataTables grid، ما قصد داریم متد LoadData Action را ایجاد کنیم.

افزودن متد LoadData به کنترلر DemoGrid

در اینجا ما قصد داریم متد Action با نام LoadData را اضافه کنیم. در این متد همه پرونده های مشتری را از پایگاه داده برای نمایش و بر اساس پارامتری که ما می خواهیم مرتب سازی می کنیم ، و عملیات paging را انجام می دهیم.

ما paging و filtering داده ها را در سمت سرور انجام می دهیم؛ به همین دلیل از IQueryable استفاده می کنیم که queries ها را با filters ها در سمت سرور اجرا کنیم.

برای استفاده از OrderBy در query ما باید بسته System.Linq.Dynamic را از NuGet packages نصب کنیم.

بعد از اضافه کردن package ، ما قطعه کد کامل شده را مشاهده می کنیم و اینکه چگونه می توان داده ها را به دست آورد و صفحه بندی و فیلتر کردن آن را انجام داد می بینیم.

قطعه کد کامل اکشن LoadData

همه فرآیندهای این مقاله گام به گام هستند؛ بنابراین آسان است که موضوغات را درک کنید.

تمام پارامترهای Request.Form وقتی که AJAX post method بر روی load خوانده می شود، جمع می شود.

public IActionResult LoadData()  
       {  
           try  
           {  
               var draw = HttpContext.Request.Form["draw"].FirstOrDefault();  
               // Skip number of Rows count  
               var start = Request.Form["start"].FirstOrDefault();  
               // Paging Length 10,20  
               var length = Request.Form["length"].FirstOrDefault();  
               // Sort Column Name  
               var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();  
               // Sort Column Direction (asc, desc)  
               var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();  
               // Search Value from (Search box)  
               var searchValue = Request.Form["search[value]"].FirstOrDefault();  
               //Paging Size (10, 20, 50,100)  
               int pageSize = length != null ? Convert.ToInt32(length) : 0;  
               int skip = start != null ? Convert.ToInt32(start) : 0;  
               int recordsTotal = 0;  
               // getting all Customer data  
               var customerData = (from tempcustomer in _context.CustomerTB  
                                   select tempcustomer);  
               //Sorting  
               if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))  
               {  
                   customerData = customerData.OrderBy(sortColumn + " " + sortColumnDirection);  
               }  
               //Search  
               if (!string.IsNullOrEmpty(searchValue))  
               {  
                   customerData = customerData.Where(m => m.Name == searchValue);  
               }  
               //total number of rows counts   
               recordsTotal = customerData.Count();  
               //Paging   
               var data = customerData.Skip(skip).Take(pageSize).ToList();  
               //Returning Json Data  
               return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });  
           }  
           catch (Exception)  
           {  
               throw;  
           }  
       }

قطعه کد کامل DemoGridController

در این بخش، ما از تزریق constructor برای تزریق وابستگی های DBContext استفاده می کنیم. و با استفاده از DBContext، ما تمام داده های مشتری را از پایگاه داده می گیریم.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Mvc;  
using ExampleGrid.Models;  
using System.Linq.Dynamic;  
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  
  
namespace ExampleGrid.Controllers  
{  
    public class DemoGridController : Controller  
    {  
        private DatabaseContext _context;  
  
        public DemoGridController(DatabaseContext context)  
        {  
            _context = context;  
        }  
        // GET: /< controller >/  
        public IActionResult ShowGrid()  
        {  
            return View();  
        }  
  
        public IActionResult LoadData()  
        {  
            try  
            {  
                var draw = HttpContext.Request.Form["draw"].FirstOrDefault();  
                // Skiping number of Rows count  
                var start = Request.Form["start"].FirstOrDefault();  
                // Paging Length 10,20  
                var length = Request.Form["length"].FirstOrDefault();  
                // Sort Column Name  
                var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();  
                // Sort Column Direction ( asc ,desc)  
                var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();  
                // Search Value from (Search box)  
                var searchValue = Request.Form["search[value]"].FirstOrDefault();  
  
                //Paging Size (10,20,50,100)  
                int pageSize = length != null ? Convert.ToInt32(length) : 0;  
                int skip = start != null ? Convert.ToInt32(start) : 0;  
                int recordsTotal = 0;  
  
                // Getting all Customer data  
                var customerData = (from tempcustomer in _context.CustomerTB  
                                    select tempcustomer);  
  
                //Sorting  
                if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))  
                {  
                    customerData = customerData.OrderBy(sortColumn + " " + sortColumnDirection);  
                }  
                //Search  
                if (!string.IsNullOrEmpty(searchValue))  
                {  
                    customerData = customerData.Where(m => m.Name == searchValue);  
                }  
  
                //total number of rows count   
                recordsTotal = customerData.Count();  
                //Paging   
                var data = customerData.Skip(skip).Take(pageSize).ToList();  
                //Returning Json Data  
                return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });  
  
            }  
            catch (Exception)  
            {  
                throw;  
            }  
  
        }  
    }  
}

تمام کد ها را ذخیره کنید و برنامه را اجرا کنید.

اجرای برنامه

برای دسترسی به برنامه URL زیر را وارد کنید:

http://localhost:#####/demogrid/showgrid

"#####" شماره پورت localhost است.

Real time Debugging Snapshot

در این بخش می توانید ببینید که مقادیر به چه صورت نوشته شده است.

جستجو با DataTables grid

در این بخش ما فقط جستجوی ستون نام را انجام می دهیم.اگر میخواهید ستون دیگری اضافه کنید می توانید به شرط (“||”) اضافه کنید.

اضافه کردن ستون های بیشتری برای جستجو

نسخه ی نمایشی جستجو

ویرایش و حذف با تأییده(Confirmation) در DataTables grid

در این بخش ما بر روی دکمه 2 ویرایش و حذف تمرکز می کنیم. edit برای ویرایش سوابق استفاده می شود. در این قسمت شما فقط باید آدرس URL ویرایش را با پارامتر آن ارائه دهید.

در زیر syntax برای رندر کردن دکمه ویرایش است

برای دکمه حذف ، ما فقط می توانیم همان کاری که با Edit انجام دادیم انجام دهیم اما برای انجام این کار نیاز به یک صفحه دیگر داریم اما اگر ما می خواهیم line را حذف کنیم، باید از دستور زیر برای رندر کردن استفاده کنیم.

در زیر syntax برای رندر کردن دکمه حذف است

< script >

   function DeleteData(CustomerID)
        {
            if (confirm("Are you sure you want to delete ...?"))
            {
                Delete(CustomerID);
            }
            else
            {
                return false;
            }
        }


    function Delete(CustomerID)
    {
      var url = '@Url.Content("~/")' + "DemoGrid/Delete";
      $.post(url, { ID: CustomerID }, function (data)
      {
          if (data)
          {
              oTable = $('#example').DataTable();
              oTable.draw();
          }
          else
          {
              alert("Something Went Wrong!");
          }
      });
    }
< /script >

در نهایت ما در این مقاله نحوه استفاده از Client Side Grid (DataTables Grid) را با ASP.NET Core MVC یاد گرفتیم. امیدوارم از مقاله لذت ببرید.

آموزش راه اندازی ASP.NET MVC Core 2.0 و SignalR Core

1396/08/15 6323 1639

دانلود PDF

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما