استفاده از JQueryTableیا همان dataTable در Razor Pages

برای این کار لازم است ابتدا این رفرنسها رو به پروژه اضافه کنید 

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" />

  
...

 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>

Model  اصلی ما 

 public class Client
    {
        public int Id { get; set; }
        [Display(Name = "نام")]
        [Required]
        public string FirstName { get; set; }
        [Display(Name = "نام خانوادگی")]
        [Required]

        public string LastName { get; set; }
        [Display(Name = "کد ملی")]
        [Required]
        public string NCode { get; set; }
}

 برای مدیریت درخواستها یک Model  د رپروژه myProject.Model اضافه میکنم 

 public class DataTablesRequestModels
    {
        public class DataTablesRequest
        {
            public int Draw { get; set; }

            public List<Column> Columns { get; set; }

            public List<Order> Order { get; set; }

            public int Start { get; set; }

            public int Length { get; set; }

            public Search Search { get; set; }
        }

        public class Column
        {
            public string Data { get; set; }

            public string Name { get; set; }

            public bool Searchable { get; set; }

            public bool Orderable { get; set; }

            public Search Search { get; set; }
        }

        public class Order
        {
            public int Column { get; set; }

            public string Dir { get; set; }
        }

        public class Search
        {
            public string Value { get; set; }

            public bool IsRegex { get; set; }
        }
    }

خوب حالا لازم است جدول رو در صفحه ای که میخواهیم اطلاعات نمایش داده شود اضافه کنیم

سپس با استفاده از Ajax  اطلاعات را فراخوانی کنیم،  قسمت جالبش اینه که نیازی نیست فراخوانی اطلاعات در قسمت Get  نوشته بشه 

کدهای قسمت get را به این صورت میمنویسیم 

  BIMContext _context;
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger,BIMContext context)
        {
            _context = context;
            _logger = logger;
        }
        public  IList<Client> Clients { get; set; }

        [BindProperty]
        public DataTablesRequest DataTablesRequest { get; set; }
    
        public void OnGet()
        {

        }
        public async Task<JsonResult> OnPostAsync()
        {
            var recordsTotal = _context.Clients.Count();

            var customersQuery = _context.Clients.AsQueryable();

            var searchText = DataTablesRequest.Search.Value?.ToUpper();
            if (!string.IsNullOrWhiteSpace(searchText))
            {
                customersQuery = customersQuery.Where(s =>
                    s.FirstName.ToUpper().Contains(searchText) ||
                    s.LastName.ToUpper().Contains(searchText) ||
                    s.NCode.ToUpper().Contains(searchText) ||
                    s.FatherName.ToUpper().Contains(searchText)
                );
            }

            var recordsFiltered = customersQuery.Count();

            var sortColumnName = DataTablesRequest.Columns.ElementAt(DataTablesRequest.Order.ElementAt(0).Column).Name;
            var sortDirection = DataTablesRequest.Order.ElementAt(0).Dir.ToLower();

            // using System.Linq.Dynamic.Core
            customersQuery = customersQuery.OrderBy($"{sortColumnName} {sortDirection}");

            var skip = DataTablesRequest.Start;
            var take = DataTablesRequest.Length;
            var data = await customersQuery
                .Skip(skip)
                .Take(take)
                .ToListAsync();

            return new JsonResult(new
            {
                Draw = DataTablesRequest.Draw,
                RecordsTotal = recordsTotal,
                RecordsFiltered = recordsFiltered,
                Data = data
            });
        }

سعی میکنم توضیح کدهای بالا رو تکمیل کنم ، (ساعت 3 نصف شب زیاد حوصله نوشتن ندارم)

 کدهای مربط به قسمت Index.cshtml (توجه داشته باشید این پروژه razor page است پس در این مرحله خبری از Controller  نیست )

  <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>
                            @Html.DisplayNameFor(model => model.Clients[0].Id)
                        </th>  
                        <th>
                            @Html.DisplayNameFor(model => model.Clients[0].FirstName)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Clients[0].LastName)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Clients[0].NCode)
                        </th>
                  
                        <th></th>
                    </tr>
            </table>
        </div>
    </div>
@section Scripts {
    <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: "/Index",
                type: 'POST',
                headers: { 'RequestVerificationToken': $('@Html.AntiForgeryToken()').val() }
            },
            "columnDefs": [
                {
                    "targets": -1,
                    "data": null,
                    "render": function (data, type, row, meta) {
                        return '<a href="/ReferredPage/edit/' + row.id + '">Edit</a> | <a href="/ReferredPage/details/' + row.id + '">Details</a> | <a href="/ReferredPage/delete/' + row.id + '">Delete</a>';
                    },
                   
                    "sortable": false
                },
                
                { "name": "Id", "data": "id", "targets": 0, "visible": false },
                { "name": "FirstName", "data": "firstName", "targets": 1 },
                { "name": "LastName", "data": "lastName", "targets": 2 },
                { "name": "NCode", "data": "nCode", "targets": 3 },
         
            ],
            "order": [[0, "desc"]]
        });
        });
    </script>
}

 متد OnPostAsync() هست که اطلاعات رو از بانک اطلاعاتی بازخونی میکنه

در کد بالا با استفاده از ajax در خواست رو به بانک اطلاعات ی ارسال میکنیم 

چند تا مطلب که برا من مهم بود 

1- در قسمت url  میتوانید رفرنس بدهید به همین صفحه ای که کد ها در داخل آن است و یا ارسال کنید درخواست رو به پوشه دیگه و یک صفحه دیگه ، که البته بهتر است کار دوم انجام دهید چرا که د رخواستهای تغییر و حذف هم به همان پوشه هدایت خواهد شد و هم در خواستها را یک جا مدیریت میکنید.

2- ایتمهای Delete and Edit هم درخواستها و ادرسها رو دقت کنید 

3- در قسمت تعریف نام جدول ها حتما به نام اطلاعات درخواستی از متد post  دقت کنید چیزی که بیشتر از چند ساعت از وقت منو گرفته بود اطلاعات بازگشتی درdata  بود 

{ "name": "FirstName", "data": "firstName", "targets": 1 },

دقت کنید اطلاعات در Model با حرف بزرگ شروع میشود مثلا FirstName  ولی در data به صورت firstName واکشی میشود  یا NCode  در واکشی به صورت nCode باید نوشته شود تا اطلاعات خوانده شود .

اطلاعات بیشتر رو میتوانید از اینجا ببینید