ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Paging Bottom ASP NET MVC

4/28/2020

Artikel ini mencoba memperlihatkan bagaimana cara menerapkan fungsi paging yang cukup menarik dalam aplikasi Halaman Razor. Pertama-tama Agung Panduan akan menjelaskan mengapa penggunaan paging ini sangat penting. Pada semua aplikasi yang menggunakan database dengan jumlah data yang cukup besar. Lalu ditampilkan ke dalam sebuah table pada halaman aplikasi yang kita buat maka akan ada perubahan tampilan yang memanjang ke bawah sehingga tampilan menjadi terlihat kurang menarik. Untuk mengatasi hal tersebut maka digunakanlah sebuah Paging. Dimana Paging akan membatasi jumlah data yang ditampilkan sesuai kebutuhan pengguna aplikasi.

PaginatorBottom ASP NET MVC

5 informasi diperlukan untuk mengimplementasikan paging;

  1. Current Page (halaman posisi page) (PositionPage)
  2. Baris pertama data dimulai ditampilkan (Start)
  3. Baris terakhir data yang ditampilkan (End)
  4. Total jumlah data yang diperoleh dari database (CountData)
  5. Jumlah data yang ditampilkan pada setiap page (RecordPerPage)

Langkah 1

Dari kelima informasi tersebut akan di buatkan sebuah Model seperti di bawah ini dan diletakkan di folder models.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace UploadExcel.Models.Commons
{
    public class PagingModel
    {
        public const int DEFAULT_RECORD_PER_PAGE = 10;
        public static readonly int[] RECORD_PER_PAGES = new int[] { 5, 10, 25, 50, 100 };

        public long CountData { get; set; }
        public long Start { get; set; }
        public long End { get; set; }
        public int PositionPage { get; set; }
        public int RecordPerPage { get; set; }
        public IList<int> IndexList { get; set; }
        public string IdSuffix { get; set; }

        public PagingModel()
        {
            CountData = 0;
            PositionPage = 0;
            RecordPerPage = DEFAULT_RECORD_PER_PAGE;
            IndexList = new List<int>();
        }

        public PagingModel(long countData, int positionPage)
            : this(countData, positionPage, DEFAULT_RECORD_PER_PAGE, null)
        {

        }

        public PagingModel(long countData, int positionPage, string idSuffix)
            : this(countData, positionPage, DEFAULT_RECORD_PER_PAGE, idSuffix)
        {

        }

        public PagingModel(long countData, int positionPage, int recordPerPage)
            : this(countData, positionPage, recordPerPage, null)
        {

        }

        public PagingModel(long countData, int positionPage, int recordPerPage, string idSuffix)
        {
            List<int> list = new List<int>();
            CountData = countData;
            PositionPage = positionPage;
            RecordPerPage = recordPerPage;
            if (countData == 0)
            {
                Start = 0;
            }
            else
            {
                Start = (positionPage - 1) * recordPerPage + 1;
            }
            //berapa yg ditampilkan di gridnya
            End = positionPage * recordPerPage;
            //brp yg ditampilkan
            Double totalPage = (Math.Floor((Double)countData / (Double)recordPerPage));
            //Double total = 3;
            //Jika jumlah data / 10 > 0
            if (((Double)countData % (Double)recordPerPage > 0))
            {
                totalPage = totalPage + 1;
            }

            for (int i = 1; i <= totalPage; i++)
            {
                list.Add(i);
            }
            IndexList = list;

            //handle case when current page (Start) over then max data (CountData) [start]
            if (Start > CountData)
            {
                if (countData == 0)
                {
                    Start = 0;
                }
                else
                {
                    Start = ((int)totalPage - 1) * recordPerPage + 1;
                }
                End = Start + recordPerPage - 1;
                PositionPage = (int)totalPage;
            }
            //handle case when current page (Start) over then max data (CountData) [end]

            IdSuffix = idSuffix;
        }
    }
}

Langkah 2

Tambahkan PartialView Paging yang akan tampil di bawah GridView yaitu (_PaginatorBottom.cshtml) dan simpanlah pada folder UploadExcel2.


@using UploadExcel.Models;

@model PagingModel
@{
    PagingModel pm = Model;
    if (pm == null)
    {
        pm= new PagingModel();
    }
}

<div class="row" style="margin-top:10px;">
 <div class="col-sm-6 col-md-8">
    <div class="form-inline"> 
        <div class="form-group page-ori">
            <nav>
              <ul class="pagination pagination-sm">
                 <input type="hidden" id="txtCurrentPage@(pm.IdSuffix)" value="@pm.PositionPage" />
                <li>
                    <span>Display @pm.Start to @if (pm.CountData >= pm.End){ @pm.End } else { @pm.CountData } from @pm.CountData rows</span>            
                </li>
                 @if (pm.IndexList.Count > 0)
                    {
                            <li>
                                <a class='pagination-theme' href="javascript:btnSearch_onClick@(pm.IdSuffix)(@pm.IndexList[0])">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        foreach (int i in pm.IndexList)
                        {
                            if (i < pm.PositionPage - 2 || i > pm.PositionPage + 2)
                            {
                            }
                            else
                            {
                             <li>
                                <a  @if(i == pm.PositionPage)
                                    { 
                                       <text>style='background-color: #428bca; color:#FFFFFF;' class='pagination-active-theme text-muted'")</text> 
                                    }
                                    else
                                    { 
                                        <text>class='pagination-theme'")</text> 
                                    } href="javascript:btnSearch_onClick@(pm.IdSuffix)(@i)">@i</a>
                             </li>
                            }
                        }
                         
                        <li>
                            <a class='pagination-theme text-muted' href="javascript:btnSearch_onClick@(pm.IdSuffix)(@pm.IndexList[pm.IndexList.Count - 1])">            
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    }         
              </ul>
            </nav>
        </div>
        <div class="form-group" style="padding-bottom:6px;">                                             
             <input class="form-control" style="width: 50px;height:34px;margin-left:10px;margin-right:0;" type="text" id="txtPagingGo@(pm.IdSuffix)" name="txtPagingGo@(pm.IdSuffix)" @if (@pm.IndexList.Count == 0) { WriteLiteral("readonly"); } />
               
             <button type="button" id="btnPagingGo@(pm.IdSuffix)" class="btn btn-xs btn-primary" style="margin-left:-3px;" onclick="javascript:pagingGo@(pm.IdSuffix)()" @if (@pm.IndexList.Count == 0) { WriteLiteral("disabled"); }>Next</button>               
         </div>  
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
        <div class="form-group text-right">
            <label class="control-label text-muted" style="margin:5px 5px 0 0;">
                Display per page
            </label>
            <div class="pull-right">            
                <select class="form-control" id="recordPerPage@(pm.IdSuffix)">
               
                @for (int a = 0; a < PagingModel.RECORD_PER_PAGES.Length; a++)
                {
                    <option>@PagingModel.RECORD_PER_PAGES[a]</option>
                }
                </select>
            </div>
        </div>
   </div> 
   
    <script type="text/javascript">
        function pagingGo@(pm.IdSuffix)() {
            if($("#txtPagingGo@(pm.IdSuffix)").val() == "") {
                showErrMesg("Please input the page number");

                return;
            }

            btnSearch_onClick@(pm.IdSuffix)($("#txtPagingGo@(pm.IdSuffix)").val());
        }

        $(document).ready(function () {
            $('#txtPagingGo@(pm.IdSuffix)').numeric({ decimal : false, negative : false });

            $("#txtPagingGo@(pm.IdSuffix)").keyup(function(event){
                if(event.keyCode == 13){
                    $("#btnPagingGo@(pm.IdSuffix)").click();
                }
            });

            $("#recordPerPage@(pm.IdSuffix)").val("@pm.RecordPerPage");

            $("#recordPerPage@(pm.IdSuffix)").on('change', function () {
                btnSearch_onClick@(pm.IdSuffix)($("#txtCurrentPage@(pm.IdSuffix)").val());
            });
        });
    </script>
</div>

Langkah 3

Tambahkan script di bawah ini tepat di bawah <table> pada file _GridView.cshtml,

<div id="divPaging">
       @Html.Partial("_PaginatorBottom", (PagingModel)ViewData["Paging"])
</div>

Langkah 4

Karena project yang dibuat pada artikel ini sama dengan project pada artikel sebelumnya jadi kita hanya memodifikasi beberapa function di controller dan repositories. Perhatikan query yang ada di UploadExcel2Repo dimana query menggunakan SELECT ROW_NUMBER() dan di urutkan secara Ascending untuk memberikan penomoran setiap baris data sehingga dapat di atur baris mana saja yang akan ditampilkan di GridView.

private UploadExcel2Repo con = new UploadExcel2Repo();
        // GET: /UploadExcel2/
        public ActionResult Index()
        {
            int currentPage = 1;
            int recordPerpage = PagingModel.DEFAULT_RECORD_PER_PAGE;

            UploadExcel2 paging = new UploadExcel2();

            Search(paging, currentPage, recordPerpage);

            return View();
        }

        #region Search
        public ActionResult Search(UploadExcel2 data, int currentPage, int recordPerpage)//IList<UploadExcel2> listData
        {
            AjaxResult ajaxResult = new AjaxResult();
            try
            {
                //currentPage = 1;
                PagingModel pmodel = new PagingModel(con.getCount(data), currentPage, recordPerpage);
                ViewData["Paging"] = pmodel;

                IList<UploadExcel2> listData = con.getAllData(data, pmodel.Start, pmodel.End);
                ViewData["ListData"] = listData;
            }
            catch (Exception ex)
            {
                return Json("Error : " + ex.Message, JsonRequestBehavior.AllowGet);
            }
            return PartialView("_GridView", data);
        }
        #endregion

string connectionString = ConfigurationManager.ConnectionStrings["SqlConnectionString"].ConnectionString;
        SqlConnection connection;
        SqlCommand command;
        SqlDataReader reader;

        public long getCount(UploadExcel2 data)
        {
            Int32 count;
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                connection.Open();
                string query = "SELECT COUNT(1) FROM [dbo].[CLASS] Where 1=1" +
                               " AND (NULLIF('" + data.Name + "','') IS NULL OR [Name] like '%" + data.Name + "%')" +
                               " AND (NULLIF('" + data.Gender + "','') IS NULL OR [Gender] like '%" + data.Gender + "%')";
                SqlCommand command = new SqlCommand(query, connection);
                count = (Int32)command.ExecuteScalar();
                //count = 
                connection.Close();
            }

            return count;
        }

        public List<UploadExcel2> getAllData(UploadExcel2 data, long rowStart, long rowEnd)
        {
            List<UploadExcel2> UploadClass = new List<UploadExcel2>();

            connection = new SqlConnection(connectionString);
            connection.Open();
            var query = " SELECT * FROM (SELECT ROW_NUMBER() over (order by [Name] asc) row," +
                        " [Name],[Email],[Gender],[ClassM] FROM [dbo].[CLASS] Where 1=1" +
                        " AND (NULLIF('" + data.Name + "','') IS NULL OR [Name] like '%" + data.Name + "%')" +
                        " AND (NULLIF('" + data.Gender + "','') IS NULL OR [Gender] like '%" + data.Gender + "%')"+
                        ") x WHERE x.row between cast(" + rowStart + " AS varchar) AND cast (" + rowEnd + " as varchar) ";
            command = new SqlCommand(query, connection);
            reader = command.ExecuteReader();

            while (reader.Read())
            {
                UploadExcel2 classm = new UploadExcel2()
                {
                    Name = Convert.ToString(reader["Name"]), //Convert.ToInt32(reader["id"]),
                    Gender = Convert.ToString(reader["Gender"]),
                    Email = Convert.ToString(reader["Email"]),
                    ClassM = Convert.ToString(reader["ClassM"]),
                };

                UploadClass.Add(classm);
            }

            reader.Close();
            connection.Close();

            return UploadClass;
        }

Langkah 5

Tambahkan atau modikasi kode javasript berikut ini, kode di bawah ini berguna untuk mengirim permintaan AJAX. Disini kita akan memanggil ActionResult Search dengan mengirimkan parameter Name, Gender, recordPerPage, dan currentPage.

function myFunction(){
 function btnSearch_onClick(page) {
        //var page = 1;
        popUpProgressShow();
        $.ajax({
            type: "POST",
            url: "@Url.Content("~/UploadExcel2/Search")",
            data: {
                Name: $("#inputName").val(),
                Gender: $("#cmbGender").val(),
                recordPerPage: $("#recordPerPage").val(),
                currentPage: page
            },
            success: function (data) {
                $("#divGrid").html(data);
                //$("#divPaging").html(data);
                popUpProgressHide();
            },
            error: function (data) {
                popUpProgressHide();
            }
        });

Demikianlah cara membuat Paging Bottom di ASP NET MVC di bawah GridView, apabila beberapa tampilan error mungkin anda belum menambahkan References ke Aplikasi ASP NET MVC yang anda buat atau hal lainnya,

Share This :

0 Comments