توضیحات و دانلود

صفحه بندی Html Table در ASP.NET MVC
1 0
صفحه بندی Html Table در ASP.NET MVC

در این مقاله توضیح میدهیم که ، چگونه صفحه بندی (paging) را در ASP.Net MVC 5 اجرا کنیم.

صفحه بندی (paging) با استفاده از Entity Framework در ASP.Net MVC اجرا می شود.

بانک اطلاعاتی

در اینجا من از پایگاه Northwind مایکروسافت استفاده می کنم.

ایجاد یک مدل با Entity Framework

اولین گام این است که یک برنامه ASP.NET MVC ایجاد کنید و آن را با پایگاه داده Northwind با استفاده از Entity Framework متصل کنید.

Model
کلاس Model زیر به نام CustomerModel شامل سه ویژگی است.

1. Customer- مجموعه ای از model داده های مشتری که سوابق مشتری را نگه می دارد.

2.  CurrentPageIndex - دارای مقدار شاخص صفحه کنونی است.

3. PageCount -  این مقدار با استفاده از حداکثر ردیف نمایش داده می شود و مجموع رکوردها موجود در جدول مشخص میکند.

public class CustomerModel
    {
        /// <summary>
        /// Gets or sets Customers.
        /// </summary>
        public List<Customer> Customers { getset; }
 
        /// <summary>
        /// Gets or sets CurrentPageIndex.
        /// </summary>
        public int CurrentPageIndex { getset; }
 
        /// <summary>
        /// Gets or sets PageCount.
        /// </summary>
        public int PageCount { getset; }
    }

Controller

دو روش با نام Index وجود دارد، یکی عملیات GET عملیات و دیگری عملیات POST

روش GetCustomers

روش GetCustomers پارامتر currentPage را می پذیرد. این متغیر ثابت با نام maxRows تعیین می کند که حداکثر سوابق نمایش داده شده در هر صفحه تعیین می شود.

توجه : شما می توانید مقدار متغیر maxRows را به عنوان مورد نیاز خود تغییر دهید و همچنین ارزش آن را از AppSettings بدست آورید تا مجبور نباشید هر بار کد را تغییر دهید.

ابتدا یک شی از کلاس CustomerModel ایجاد می شود و پس از آن رکوردها از جدول  Customer با استفاده از Entity Framework گرفته می شوند و به ویژگی Customers از شیء CustomerModel اختصاص داده می شوند.

مقدار PageCount با تقسیم تعداد سوابق با حداکثر ردیف نمایش داده می شود.

مقدار پارامتر currentPage به property CurrentPageIndex اختصاص دارد.

پیکربندی بر روی سوابق با استفاده از تابع Skip و Take انجام می شود.

تابع Skip از فهرست مجموعه ای از فهرست شروع را دریافت می کند یعنی اگر صفحه Index 1 باشد، شروع فهرست (1- 1) * 10 = 0 خواهد بود.

مثلا : اگر صفحه کنونی صفحه 1 است و حداکثر ردیف 10 باشد، شروع فهرست (1- 1) * 10 = 0

تابع Take بر اساس مقدار متغیر maxRows ردیف را بر می گرداند .

عملیات Get

در داخل روش GET Action، روش GetCustomers با مقدار پارامتر currentPage به عنوان 1 ارسال می شود زمانی که View برای اولین بار قابل دسترسی است، سوابق صفحه اول نمایش داده می شود.

عملیات POST

در داخل روش POST Action، مقدار CurrentPageIndex از مجموعه Request.Form استخراج شده و به روش GetCustomers منتقل می شود.

public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View(this.GetCustomers(1));
        }
 
        [HttpPost]
        public ActionResult Index(int currentPageIndex)
        {
            return View(this.GetCustomers(currentPageIndex));
        }
 
        private CustomerModel GetCustomers(int currentPage)
        {
            int maxRows = 10;
            using (NorthwindEntities entities = new NorthwindEntities())
            {
                CustomerModel customerModel = new CustomerModel();
 
                customerModel.Customers = (from customer in entities.Customers
                                           select customer)
                            .OrderBy(customer => customer.CustomerID)
                            .Skip((currentPage - 1) * maxRows)
                            .Take(maxRows).ToList();
 
                double pageCount = (double)((decimal)entities.Customers.Count() / Convert.ToDecimal(maxRows));
                customerModel.PageCount = (int)Math.Ceiling(pageCount);
 
                customerModel.CurrentPageIndex = currentPage;
 
                return customerModel;
            }
        }
    }

View

در داخل View، در خط اول، کلاس CustomerModel به عنوان Model برای نمایش اعلام شده است.

View شامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.

ActionName - نام اکشن در این مورد نام Index است.

ControllerName - نام Controller در این مورد نام Home است.

FormMethod - روش فرم را یعنی GET یا POST مشخص می کند. در این مورد به POST تنظیم خواهد شد.

برای نمایش سوابق، یک جدول HTML استفاده می شود. یک حلقه بر روی ملک Customers کلاس CustomerModel اجرا می شود که ردیف جدول HTML را با سوابق مشتری تولید می کند.

برای ساخت صفحه بندی، یک حلقه FOR از مقدار 1 به  مقدار Property PageCount از کلاس CustomerModel برای تولید یک جدول HTML برای Pager اجرا می شود.

هنگامی که Anchor HTML در داخل Pager کلیک می شود، یک تابع جاوا اسکریپت PagerClick اجرا می شود که Index از دکمه Pager کلیک شده را به HiddenField تنظیم می کند و سپس فرم را  نمایش  می دهد.

@model Grid_Paging_MVC.Models.CustomerModel
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body
        {
            font-familyArial;
            font-size10pt;
        }
 
        table
        {
            border1px solid #ccc;
            border-collapsecollapse;
            background-color#fff;
        }
 
        table th
        {
            background-color#B8DBFD;
            color#333;
            font-weightbold;
        }
 
        table thtable td
        {
            padding5px;
            border1px solid #ccc;
        }
 
        tabletable table td
        {
            border0px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        @using (Html.BeginForm("Index""Home"FormMethod.Post))
        {
            <h4>Customers</h4>
            <hr />
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>عنوان مشتری</th>
                    <th>نام مشتری</th>
                    <th>شهر</th>
                    <th>کشور</th>
                </tr>
                @foreach (Customer customer in Model.Customers)
                {
                    <tr>
                        <td>@customer.CustomerID</td>
                        <td>@customer.ContactName</td>
                        <td>@customer.City</td>
                        <td>@customer.Country</td>
                    </tr>
                }
            </table>
            <br />
            <table cellpadding="0" cellspacing="0">
                <tr>
                    @for (int i = 1; i <= Model.PageCount; i++)
                    {
                        <td>
                            @if (i != Model.CurrentPageIndex)
                            {
                                <a href="javascript:PagerClick(@i);">@i</a>
                            }
                            else
                            {
                                <span>@i</span>
                            }
                        </td>
                    }
                </tr>
            </table>
            <input type="hidden" id="hfCurrentPageIndex" name="currentPageIndex" />
        }
        <script type="text/javascript">
            function PagerClick(index) {
                document.getElementById("hfCurrentPageIndex").value = index;
                document.forms[0].submit();
            }
        </script>
    </div>
</body>
</html>


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :