آموزش صفحه بندی با استفاده از PagedList MVC در MVC
1 0

آموزش صفحه بندی با استفاده از PagedList MVC در MVC


آموزش صفحه بندی با استفاده از PagedList MVC در MVC

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

نصب پکیج MVC PagedList

برای نصب پکیج روی نام پروژه راست کلیک کنید و سپس به صورت زیر روی Manage Nuget Packages کلیک کنید.

صفحه بندی با استفاده از PagedList MVC در MVC

در قسمت جستجو Browse را انتخاب کنید و سپسMVC .PagedList را جستجو کنید و سپس آن را نصب کنید

نکته: برای نصب پکیج حتما باید به اینترنت متصل باشید

صفحه بندی با استفاده از PagedList MVC در MVC

ایجاد صفحه بندی در صفحه اصلی

برای این کار، ابتدا در کنترولر Home اکشن Index را به صورت زیر کد نویسی کنید

        public ActionResult Index(int page = 1)
        {
            // واکشی اطلاعات از دیتابیس و سپس تبدیل آن به توپیجدلیست
            // متد پیجدلیست دو ورودی به صورت شماره صفحه و تعداد قابل نمایش را مشخص می کنیم 
            var post = db.Posts.OrderByDescending(c => c.Id).ToPagedList(page, Convert.ToInt32(10));

            // بررسی اینکه درخواست به صورت ایجکس باشد            
            if (Request.IsAjaxRequest())
            {
                // در صورتی که درخواست به صورت ایجکس بود یک پارشال ویو به صورت ایجکس ارسال می کنیم
                return PartialView("_IndexPartial", post);
            }

            return View(post);
        }

سپس وارد View اکشن Index شوید

کدهای Html

@model IEnumerable<SourceCodeMVC5.Models.Post>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="row">
        <div class="container text-center">
            <div id="postList">
                @* فراخوانی پارشال ویو با مدل دریافت شده *@
                @Html.Partial("_IndexPartial", Model)
            </div>
        </div>
    </div>
</body>
</html>

کدهای جی کئوری آن به صورت زیر است

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        // بررسی اینکه ایجکس به پایان رسیده یا نه
        var active = false;
        $(document).ajaxStart(function () {
            active = true;
        }).ajaxStop(function () {
            active = false;
        });

        $(document).on("click", "#contentPager a[href]", function () {

            // بررسی  می کنیم که ایجکس درخواست شده به پایان رسیده تا ایجکس بعدی را ارسال کنیم
            if (!active) {
                $.ajax({
                    url: $(this).attr("href"),
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        // نمایش اطلاعات دریافت شده
                        $('#postList').html(result);
                    }
                });
                return false;
            }
        });
    });
</script>

پارشال ویو Index

کار این پارشال ویو، نمایش اطلاعات دریافت شده از مدل ارسال شده

@using PagedList.Mvc
@model PagedList.IPagedList<SourceCodeMVC5.Models.Post>


@* نمایش اطلاعات با استفاده از فوریچ *@
@foreach (var item in Model)
{
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div>@item.PostName</div>
    </div>
}
<div class="clearfix"></div>
<div class="col-sm-12 hidden-sm hidden-xs">
    <div class="text-left " id="contentPager">
        @* نمایش شماره صفحات و نوع نمایش آنها *@
        @* در اینجا باید کنترولر و اکشن مورد نظر را مشخص می کنیم  *@
        @Html.PagedListPager(Model, page => Url.Action("Index", "Home", new {page}),
            PagedListRenderOptions.ClassicPlusFirstAndLast)
    </div>
</div>
<div class="clearfix"></div>

ایجاد صفحه بندی با امکان جستجو و مشخص کردن تعداد نمایش آنها

ابتدا یک اکشن به نام Search در کنترولر Home ایجاد کنید و کدهای آن به صورت زیر می باشد

        public ActionResult Search(string str, int page = 1, int count = 10)
        {
            // بررسی اینکه هیچ چیزی جستجو نشده
            if (String.IsNullOrEmpty(str))
            {
                // واکشی اطلاعات از دیتابیس و سپس تبدیل آن به توپیجدلیست
                // متد پیجدلیست دو ورودی به صورت شماره صفحه و تعداد قابل نمایش را مشخص می کنیم 
                var post = db.Posts.OrderByDescending(c => c.Id).ToPagedList(page, count);

                // بررسی اینکه درخواست به صورت ایجکس باشد
                if (Request.IsAjaxRequest())
                {
                    // در صورتی که درخواست به صورت ایجکس بود یک پارشال ویو به صورت ایجکس ارسال می کنیم
                    return PartialView("_SearchPartial", post);
                }

                return View(post);
            }
            else
            {
                // واکشی اطلاعات از دیتابیس به صورت رشته جستجو شده و سپس تبدیل آن به توپیجدلیست
                // متد پیجدلیست دو ورودی به صورت شماره صفحه و تعداد قابل نمایش را مشخص می کنیم                 
                var post = db.Posts.Where(c => c.PostName.ToLower().Contains(str.Trim())).OrderByDescending(c => c.Id).ToPagedList(page, count);

                // بررسی اینکه درخواست به صورت ایجکس باشد
                if (Request.IsAjaxRequest())
                {
                    // در صورتی که درخواست به صورت ایجکس بود یک پارشال ویو به صورت ایجکس ارسال می کنیم
                    return PartialView("_SearchPartial", post);
                }

                return View(post);
            }
        }

سپس یک ویو به نام Search برای آن ایجاد کنید و کدهای آن را به شکل زیر تغییر دهید

در کدهای زیر توضیحات مورد نیاز در بین کدها نوشته شده است.

@model IEnumerable<SourceCodeMVC5.Models.Post>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>
</head>
<body>
    <div class="row">
        <div class="container thumbnail">
            <div class="col-lg-12">
                <div class="col-lg-10">
                    <div class="col-lg-1"><label for="search">جستجو:</label></div>
                    <div class="col-lg-9"><input type="text" id="search" class="form-control" placeholder="جستجو..." /></div>
                </div>
                <div class="col-lg-2">
                    @* نمایش درآپ دادن لیست تعداد نمایش در هر صفحه *@
                    <select id="count-row" class="form-control">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <div class="table-responsive">
        <div id="postList">
            @* فراخوانی پارشال ویوی مورد نظر *@
            @Html.Partial("_SearchPartial", Model)
        </div>
    </div>
</body>
</html>

کدهای جی کئوری

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        // بررسی اینکه ایجکس به پایان رسیده یا نه
        var active = false;
        $(document).ajaxStart(function () {
            active = true;
        }).ajaxStop(function () {
            active = false;
        });

        // برای شماره صفحات
        $(document).on("click", "#contentPager a[href]", function () {

            // دریافت تعداد نمایش در هر صفحه
            var count = $('#count-row').val();
            // شماره صفحه
            var page = $(this).prop('search');
            // مقدار وارد شده برای جستجو 
            var str = $('#search').val();
            // یوآرال اکشن مورد نظر
            var url = "/Home/Search?str=" + str + "&" + page.replace("?", "") + "&count=" + count;

            // بررسی  می کنیم که ایجکس درخواست شده به پایان رسیده تا ایجکس بعدی را ارسال کنیم
            if (!active) {
                $.ajax({
                    url: url,
                    type: 'GET',
                    cache: false,
                    success: function (result) {
                        // نمایش اطلاعات دریافت شده به صورت ایجکس
                        $('#postList').html(result);
                    }
                });
                return false;
            }
        });

        // جستجوی خودکار
        $("#search").on("input", function () {

            // دریافت تعداد نمایش در هر صفحه
            var count = $('#count-row').val();
            // مقدار وارد شده برای جستجو 
            var str = $('#search').val();
            // یوآرال اکشن مورد نظر
            var url = "/Home/Search?str=" + str + "&page=1" + "&count=" + count;

            // بررسی خالی نبودن مقدار جستجو شده
            if ($.trim(this.value).length) {

                // بررسی  می کنیم که ایجکس درخواست شده به پایان رسیده تا ایجکس بعدی را ارسال کنیم
                if (!active) {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        cache: false,
                        success: function (result) {
                            $('#postList').html(result);
                        },
                        beforeSend: function () {
                        },
                        complete: function () {
                        },
                        error: function (jqXhr, textStatus, errorThrown) {
                            alert(jqXhr + textStatus + errorThrown);
                        }
                    });
                    return false;
                }
            }

        });

        // متد تغییر تعداد نمایش در هر صفحه
        $('#count-row').change(function () {

            // مقدار وارد شده برای جستجو 
            var str = $('#search').val();
            // دریافت تعداد نمایش در هر صفحه
            var count = $('#count-row').val();
            // یوآرال اکشن مورد نظر
            var url = "/Home/Search?str=" + str + "&page=1" + "&count=" + count;

            // بررسی  می کنیم که ایجکس درخواست شده به پایان رسیده تا ایجکس بعدی را ارسال کنیم
            if (!active) {
                $.ajax({
                    type: 'GET',
                    url: url,
                    cache: false,
                    success: function (result) {
                        // نمایش اطلاعات دریافت شده به صورت ایجکس
                        $('#postList').html(result);
                    },
                    beforeSend: function () {
                    },
                    complete: function () {
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert(jqXhr + textStatus + errorThrown);
                    }
                });
                return false;
            }

        });

    });
</script>

ایجاد یک پارشال ویو برای اکشن search

کدهای SearchPartial_ به صورت زیر می باشد.

@* یوزینگ پیج لیست *@
@using PagedList.Mvc 
@model PagedList.IPagedList<SourceCodeMVC5.Models.Post>

<table class="table table-condensed table-hover table-bordered table-striped text-center">
    <thead class="text-center">
        <tr>
            <td>
                عنوان مطلب
            </td>
            <td>
                توضیح
            </td>
        </tr>
    </thead>
    <tbody class="text-center">
        @* بررسی اینکه اطلاعاتی وجود دارد یا نه *@
        @if (!Model.Any())
        {
            <tr>
                <td colspan="13">هیچ اطلاعاتی برای نمایش وجود ندارد</td>
            </tr>
        }
        else
        {
            // نمایش اطلاعات با استفاده از فوریچ
            foreach (var item in Model)
            {
                <tr>
                    <td>@item.PostName</td>
                    <td>@item.PostDescription</td>
                </tr>
            }
        }
    </tbody>
</table>

<div class="clearfix"></div>
<div class="col-sm-12">
    <div class="pagedList text-left " id="contentPager">
        @* نمایش شماره صفحات و نوع نمایش آنها *@
        @* در اینجا باید کنترولر و اکشن مورد نظر را مشخص می کنیم  *@
        @Html.PagedListPager(Model, page => Url.Action("Search", "Home", new { page }),
            PagedListRenderOptions.ClassicPlusFirstAndLast)
    </div>
</div>

در کدهای بالا فقط از مدلی که اطلاعات را دریافت کردیم نمایش می دهیم و همچنین شماره صفحات را نمایش می دهیم.

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۹ آذر ۱۳۹۵
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
خرید VIP
امکان خرید از درگاه های بانک و حساب مجازی

برای دانلود بعد از خرید به همین صفحه برگردید تا لینک های دانلود نمایش داده شود

نظر / سوال

Captcha

این صفحه را می‌پسندم