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

صفحه بندی GridView با استفاده از Bootstrap

514 بازدید
صفحه بندی ASP.Net GridView

صفحه بندی ASP.Net GridView

در این مقاله به سراغ صفحه بندی GridView رفتیم.Bootstrap یک کامپوننت pagination (صفحه بندی) ارائه داده که بسیار ساده به نظر می رسد و قابلیت مقیاس پذیری خوبی دارد و همچنین نواحی کلیک گسترده ای را فراهم می کند. این کامپوننت به صورت استاتیک می باشد و چند افزونه جی کوئری داینامیک وجود دارد که اجرای Bootstrap pagination را ساده تر می کند. در این مقاله، ما از پلاگین BootPag jQuery plugin استفاده کرده و صفحه بندی ASP.Net Gridview را در سمت سرور پیاده سازی می کنیم.

[divider style=”normal” top=”20″ bottom=”20″]

پیشنها میکنم : صفحه بندی دیتاگرید در ASP.NET و سی شارپ + فیلم آموزشی

[divider style=”normal” top=”20″ bottom=”20″]

jQuery Bootpag یکی از پلاگین های بهینه Bootstrap pagination می باشد. تنظیمات آن بسیار ساده است – ما فقط باید یک تابع فراخوانی را ارسال کرده و پاسخ آن را از page event بگیریم. در این تابع، ما می توانیم محتوای GridView را با ایجاد فراخوانی های Ajax به سمت سرور، به روز رسانی کنیم.

  1. یک Net Web Application ایجاد کرده و اسکریپت های موردنیاز را دانلود می کنیم:
  1. برای پر کردن GridView از فایل CSV استفاده می کنیم. در اینجا ما یک فایل csv ایجاد کرده و آن را در فولدر Project/App_Data ذخیره می کنیم.

برای نمایش ستون های این فایل (country، revenue، salemanager، year) به یک کلاس model نیاز داریم. در این آموزش می خواهیم صفحه بندی سمت سرور را پیاده سازی کنیم و در هر زمان فقط ۵ رکورد از جدول را در صفحه نمایش دهیم.

Revenue.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Web;
 
namespace GridViewBootstrapPagination
{
    public class Revenue
    {
 
        public Revenue(string country, string revenue, string salesmanager, string year)
        {
            this.country = country;
            this.revenue = revenue;
            this.salesmanager = salesmanager;
            this.year = year;
        }
 
        public Revenue() { }
          
        public string country { get; set; }
        public string revenue { get; set; }
        public string salesmanager { get; set; }
        public string year { get; set; }
 
        public List<Revenue> GetRevenueDetails(int pagenumber,int maxrecords)
        {
            List<Revenue> lstRevenue = new List<Revenue>();
            string filename = HttpContext.Current.Server.MapPath("~/App_Data/country_revenue.csv");
            int startrecord = (pagenumber * maxrecords) - maxrecords;
            if (File.Exists(filename))
            {
                IEnumerable<int> range = Enumerable.Range(startrecord, maxrecords);
                IEnumerable<String> lines = getFileLines(filename, range);
                foreach (String line in lines)
                {
                    string[] row = line.Split(',');
                    lstRevenue.Add(new Revenue(row[0], row[1], row[2], row[3]));
                }
                    
            }
            return lstRevenue;
        }
 
        public static IEnumerable<String> getFileLines(String path, IEnumerable<int> lineIndices)
        {
            return File.ReadLines(path).Where((l, i) => lineIndices.Contains(i));
        }
 
        public int GetTotalRecordCount()
        {          
            string filename = HttpContext.Current.Server.MapPath("~/App_Data/country_revenue.csv");
            int count = 0;
            if (File.Exists(filename))
            {
                string[] data = File.ReadAllLines(filename);
                count= data.Length;
            }
            return count;
        }        
    }
}
  1. حال یک Web Form با یک gridview ایجاد می کنیم و از bootpag plugin برای تولید کامپوننت صفحه بندی استفاده می کنیم.

Default.aspx:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bootstrap Pagination for GridView</title>
    <link href="Styles/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/jquery.bootpag.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // init bootpag
            var count = GetTotalPageCount();
            $('#page-selection').bootpag(
                {
                    total:count
                }).on("page", function (event, num) {
                    GetGridData(num);
            });
        });
 
        function GetGridData(num) {        
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetRevenueDetail",
                data: "{ \"pagenumber\":" + num + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    bindGrid(data.d);
                },
                error: function (xhr, status, err) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
 
                }
            });
        }
 
        function bindGrid(data) {
            $("[id*=gvBSPagination] tr").not(":first").not(":last").remove();
            var table1 = $('[id*=gvBSPagination]');
            var firstRow = "$('[id*=gvBSPagination] tr:first-child')";
            for (var i = 0; i < data.length; i++) {
                var rowNew = $("<tr><td></td><td></td><td></td><td></td></tr>");
                rowNew.children().eq(0).text(data[i].country);
                rowNew.children().eq(1).text(data[i].revenue);
                rowNew.children().eq(2).text(data[i].salesmanager);
                rowNew.children().eq(3).text(data[i].year);
                rowNew.insertBefore($("[id*=gvBSPagination] tr:last-child"));
            }
        }
 
        function GetTotalPageCount() {
            var mytempvar = 0;
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetTotalPageCount",
                data: "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async:false,
                success: function (data) {
                    mytempvar=data.d;
                     
                },
                error: function (xhr, status, err) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
 
                }
            });
            return mytempvar;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:670px;margin-left:auto;margin-right:auto;">
        <asp:GridView ID="gvBSPagination" runat="server" CssClass="table table-striped table-bordered table-condensed" Width="660px" AllowPaging="true" PageSize="5" OnPreRender="gvBSPagination_PreRender">
            <PagerTemplate>
                <div id="page-selection" class="pagination-centered"></div>
            </PagerTemplate>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

اجازه بدهید که نگاه دقیق تری به اسکریپت جی کوئری داشته باشیم. ابتدا زمانی که صفحه بارگزاری می شود، یک فراخوانی Ajax سمت سرور داریم، GetTotalPageCount- این متد در زمان بارگزاری صفحه تعداد تمام رکوردهای موجود در فایل csv را واکشی می کند. این کار لازم است چرا که ما باید تعداد کل رکوردها را به عنوان ورودی برای bootpag plugin ارسال کنیم تا لیستی از کنترل های صفحه بندی براساس آن تولید شوند. Gridview با ۵ رکورد اول بارگزاری می شود و با هر کلیک روی شمارنده صفحه، یک فراخوانی Ajax به سمت سرور ارسال می شود، متد GetGridData فراخوانی می شود و شماره صفحه جاری به عنوان پارامتر برای آن ارسال می شود. این متد وظیفه واکشی رکوردها از فایل csv براساس شماره صفحه جاری را دارد.

توجه داشته باشید که GridView یک قالب شمارنده صفحه دارد که در یک div با  آی دی “page-selection” قرار گرفته است. Bootpag plugin در زمان بارگزاری صفحه، لیستی از کنترل های صفحه بندی را در این div تولید می کند.

  1. مرحله آخر بارگزاری gridview در Page_Load و تعریف Web Method سمت سرور برای اجرای فراخوانی های jQuery Ajax در Code Behind می باشد.

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
 	
 
namespace GridViewBootstrapPagination
{
    public partial class Default : System.Web.UI.Page
    {
        private const int MAX_RECORDS = 5;
         
        protected void Page_Load(object sender, EventArgs e)
        {
            string filename = Server.MapPath("~/App_Data/country_revenue.csv");
            if (!IsPostBack)
            {
                List<Revenue> revenue = GetRevenueDetail(1);
                gvBSPagination.DataSource = revenue;
                gvBSPagination.DataBind();
 
            }
            
        }
 
        [WebMethod]
     [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]        
        public static List<Revenue> GetRevenueDetail(int pagenumber)
           {
               Revenue rv = new Revenue();
               List<Revenue> lstrevenue = rv.GetRevenueDetails(pagenumber,MAX_RECORDS);            
               return lstrevenue;
        }
 
        [WebMethod]
        [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
        public static int GetTotalPageCount()
        {
            int count=0;
            Revenue rv=new Revenue();
            count = rv.GetTotalRecordCount();
            count = count / MAX_RECORDS;
            return count;
        }
 
        protected void gvBSPagination_PreRender(object sender, EventArgs e)
        {
            GridView gv = (GridView)sender;
            GridViewRow pagerRow = (GridViewRow)gv.BottomPagerRow;
 
            if (pagerRow != null && pagerRow.Visible == false)
                pagerRow.Visible = true;
        }
    }
}

کار ما تمام شد :). حالا می توانید برنامه را اجرا کرده و gridView با BootStrp pagination را مشاهده نمایید.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=18146
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد صفحه بندی GridView با استفاده از Bootstrap

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

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

هیچ دیدگاهی نوشته نشده است.