Download Project  (Full Project)

Step-1

In this tutorial we work with paging. Open the project where we are working. Generally we use page load by rezor. First we need add reference from “nugget” package manager (NuGet). Package name is “PageList.Mvc”. This Library help to easy to page filtering.  Here we are going to some changes in our existing Index Method to pass parameter of search value. Given bellow the code:

using Newtonsoft.Json;
using OnlineShoppingStore.DAL;
using OnlineShoppingStore.Models;
using OnlineShoppingStore.Models.Home;
using OnlineShoppingStore.Repository;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace OnlineShoppingStore.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(string search,int? page)
        {
            HomeIndexViewModel model = new HomeIndexViewModel();
            return View(model.CreateModel(search,4, page));
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }
       
    }
}

Step-2

Here we are going to some changes in our existing HomeIndexViewModel.cs to pass parameter of search value and get list data by store procedure. Given Bellow the Code:

using OnlineShoppingStore.DAL;
using OnlineShoppingStore.Repository;
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
using PagedList.Mvc;

namespace OnlineShoppingStore.Models.Home
{
    public class HomeIndexViewModel
    {
        public GenericUnitOfWork _unitOfWork = new GenericUnitOfWork();
        dbMyOnlineShoppingEntities context = new dbMyOnlineShoppingEntities();
        public IPagedList<Tbl_Product> ListOfProducts { get; set; }
        public HomeIndexViewModel CreateModel(string search,int pageSize,int? page)
        {
            SqlParameter[] param=new SqlParameter[]{
                new SqlParameter("@search",search??(object)DBNull.Value)
            };
            IPagedList<Tbl_Product> data = context.Database.SqlQuery<Tbl_Product>("GetBySearch @search", param).ToList().ToPagedList(page ?? 1, pageSize);
            return new HomeIndexViewModel
            {
                ListOfProducts = data
            };
        }
    }
}

Step-3

Here we are going to some changes in our existing Index.cshtml to Post search value to controller. In view put the paging link tag. This link tag are pass the page id then controler receive the method and page are show in view.  View Code Given Bellow:

@model OnlineShoppingStore.Models.Home.HomeIndexViewModel
@using PagedList;
@using PagedList.Mvc;
@{
    ViewBag.Title = "Home Page";
}

<div id="themeSlider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#themeSlider" data-slide-to="0" class="active"></li>
        <li data-target="#themeSlider" data-slide-to="1"></li>
        <li data-target="#themeSlider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/4_03_21_2017_08_23_17.jpg" alt="First slide">
            <div class="carousel-caption">
                <h3>New</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/3_03_21_2017_08_19_28.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h3>My Phone</h3>
              
            </div>
        </div>
        <div class="item">
            <div class="imgOverlay"></div>
            <img style="height:320px;width:100%" src="../Images/2_03_21_2017_08_15_59.jpg" alt="Third slide">
            <div class="carousel-caption">
                <h3>Latest</h3>
                
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#themeSlider" data-slide="prev">
        <span class="fa fa-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#themeSlider" data-slide="next">
        <span class="fa fa-chevron-right"></span>
    </a>
   
</div>
<div class="olContent f1"><h2 style="color:black">Search Product/Category</h2></div>
<form method="post">
    <div class="olSearch fr">
        <input type="text" name="search" placeholder="Enter Keyword" class="inputComn form-control" />
        <div class="searchIcon">
            <button type="submit" class="searchBtn">
                <img src="~/Images/searchIcon.png" />
            </button>
        </div>
    </div>
</form>


<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h2>Our Producrs <small>trends products</small></h2>
        </div> 
    </div>
</div>

<div class="row product-container">
    @foreach (var item in Model.ListOfProducts)
    {
        <div class="col-md-3 col-sm-3 col-xs-6" style="margin-bottom:8px">
            <div class="thumbnail product-item" style="height:300px">

                <img class="img-responsive" title="Click to View Product detail"
                     style="cursor:pointer;height:160px;width:100%"
                     src="~/ProductImg/@item.ProductImage" />

                <div class="caption">
                    <h5>@item.ProductName</h5>
                    <p>@item.Price ৳.</p>
                    <p>
                        @if (item.Quantity > 0)
                        {
                            <p>Available</p>

                        }
                        else
                        {
                            <p>Not Available</p>
                        }
                    </p>
                    <div class="product-item-badge">
                        @if (item.IsFeatured==true)
                        {
                            <p>New</p>

                        }
                        else
                        {
                            <p>Old</p>
                        }
                    </div>
                </div>
            </div>
        </div>
    }
  
    
</div>
<div class="container">
    @Html.PagedListPager(Model.ListOfProducts, page => Url.Action("Index", new { page, search = Request.QueryString["search"] }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayItemSliceAndTotal = true })
</div>

Step-4

Now run the project