صفحه بندی (Pagination) با استفاده از JavaScript در MVC

در این مقاله ، ما نحوه ساخت صفحه بندی (Pagination) را با استفاده از JavaScript در mvc خواهیم آموخت.

در این مقاله ، چگونگی Pagination با بازیابی اطلاعات در MVC با استفاده از jQuery را خواهیم دید :

1. Visual Studio را باز کرده و New Project را بزنید .
2. در قسمت #ASP.Net Web Application ، Visual C را انتخاب کنید .
3. حال در پنجره باز شده ، یک پروژه Empty را انتخاب کرده و تیک MVC را بزنید .
4. حال ، روی Solution خود راست کلیک کرده و یک پروژه دیگر تحت عنوان Class library اضافه کنید . (ما از Entity Framework استفاده خواهیم کرد . )
5. یک کلاس اضافه کنید و کد های زیر را در آن قرار دهید .

public class Users  
{  
    [Key]  
    public int Id { get; set; }  
    public string Name { get; set; }  
    public string Address { get; set; }  
    public string Phone_Number { get; set; }  
}

حال ، روی Class library خود راست کلیک کرده و با استفاده از Entity Framework ، NuGet را نصب کنید .

حال ، یک فولدر در class library ایجاد کرده و نام آن را Context بگذارید و یک کلاس همانند زیر به آن اضافه کنید:

public class DBContext : DbContext  
  {  
      public DbSet<Users> ObjUser { get; set; }  
  }

در Web.Config پروژه ، Connection String زیر را قرار دهید :

توجه داشته باشید که قسمت هایی از کد زیر باید توسط خود شما تکمیل شود .

<connectionStrings>  
   <add name="DBContext" connectionString="Your Connection string" providerName="System.Data.SqlClient" />  
 </connectionStrings>

حال ، در refrence پروژه ، Class library را اضافه کنید و پروژه را build کنید .

حال ، روی پروژه کلیک راست کرده و Entity Framework را با استفاده از NuGet نصب کنید .

یک Empty Controller را به فولدر Controller اضافه کنید .

متد ActionResult زیر را به Controller خود اضافه کنید .

public ActionResult Index()  
       {  
           using (DBContext context = new DBContext())  
           {  
               var Users = context.ObjUser.Take(5).ToList();     //At first i will show only 5 data per page so i had used Take(5)  
               int UsersCount= Convert.ToInt32(Math.Ceiling((double)context.ObjUser.Count() / 5));    //Now calulating the required buttons for pagination  
               TempData["Users"] = Users;            //Passing User details to view with TempData  
               ViewBag.UsersCount = UsersCount;        //Count of button to be displayed  
           }  
           return View();  
       }

حال در View متد Index ، اطلاعات بازیابی شده کاربر را در یک جدول نمایش خواهیم داد .

@{    
    ViewBag.Title = "Index";    
    var UsersData = TempData["Users"];   //Assigning the list of users to a variable    
}    
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>    
    
<h2>Index</h2>    
    
<div>    
    <table class="tablesorter">    
        <thead>    
            <tr>    
                <th>Name</th>    
                <th>Address</th>    
                <th>Phone_Number</th>    
    
            </tr>    
        </thead>    
        <tbody id="tbldisplay">    
               
                @foreach (var p in (List<PaginationEntity.Users>)UsersData)    //PaginationEntity is my Class Library Name and Users is my model in that Libraray    
                {    
                    <tr>    
                        <td>@p.Name</td>    
                        <td>@p.Address</td>    
                        <td>@p.Phone_Number</td>    
                    </tr>    
                }    
              
        </tbody>    
    </table>    
    <form>    
//Here the number of buttons is to be displayed according the no os users shown per page    
        <div id="SHowButton">    
            @for (int i = 1; i <= ViewBag.UsersCount; i++)    
            {    
//SortData is a javascript function which is used for retrieving next or previous data according to page number    
                <input type="button" id="@i" value="@i" onclick="SortData(@i)" />      
            }    
        </div>    
//Display is another Javascript Function used for showing number of users according to the value selected from dropdown     
        <select class="pagesize" onchange="Display()" id="drpdwn">    
            <option selected="selected" value="5">5</option>    
            <option value="10">10</option>    
            <option value="20">20</option>    
            <option value="30">30</option>    
            <option value="40">40</option>    
        </select>      
        <input type="text" id="Search"/>     //Used for searching user on keypress    
    </form>       
</div>

حال ، Display Function را اضافه خواهیم کرد ، که لیست کاربران را فراهم می‌آورد ، که Count مقداری خواهد بود که از dropdown انتخاب میشود .

<script>  
    function Display() {  
//Passing the value of dropdown to method Page in my Controller  
        var data = $("#drpdwn").val();  
//Here Home is my Controller and Page is JsonResult Method  
        $.get("/Home/Page", { NumberOfData: data }, function (response) {  //NumberOfData is just an object whose value will be  - value of dropdown  
//In response i will get the values returned by Page Method in controller  
//I had returned users and Button Count  
            if (response != null) {  
                $("#tbldisplay").empty();  
                $("#SHowButton").empty();  
                var datacontent = ""  
               //appending the returned value  
                for (var i = 0; i < response.user.length; i++) {            //response.user is one of the returned value from  method       
                    datacontent += "<tr><td>" + response.user[i].Name + "</td><td>" + response.user[i].Address + "</td><td>" + response.user[i].Phone_Number + "</td></tr>";  
                }  
                 
                var ButtonContent = "";  
                alert(response.CountUser);  
                if (response.CountUser != 1) {  
                    for (var d = 1; d <= response.CountUser; d++) {   
// response.CountUser is another returned value from method  
                        ButtonContent += "<input type='button' id=" + d + " value=" + d + " onclick='SortData(" + d + ")' />";  
                    }  
                    $("#SHowButton").append(ButtonContent);  
                }  
                $("#tbldisplay").append(datacontent);  
                 
            }  
        });  
    }  
</script>

حال ، متد JsonResult با نام Page را به پروژه اضافه کنید .

//as i am retreving data so httpget  
 [HttpGet]  
        public JsonResult Page(int NumberOfData)   //the object name should be same as used in JQuerry above it will get the value of dropdown  
        {  
            using (DBContext context = new DBContext())  
            {  
                var Users = context.ObjUser.Take(NumberOfData).ToList();  //retreiving that much count of data  
                int UsersCount = Convert.ToInt32(Math.Ceiling((double)context.ObjUser.Count() / NumberOfData));  //again for required button count  
                var Result = new { user=Users,CountUser=UsersCount};  
//here i am returning multiple data to my jquerry  user and CountUser  
                return Json(Result, JsonRequestBehavior.AllowGet);  
            }  
        }

حال ، برای گرفتن داده ‌های قبلی و بعدی با کلیک بر روی دکمه ، همانند زیر Javascriptی را به پروژه اضافه می‌کنیم :

 function SortData(number)  //number will get the clicked button's number  
    {  
        var data = $("#drpdwn").val();  //passing current value of dropdwon  
//SortData is my method on home controller  
        $.get("/Home/SortData",{DrpDwnValue:data,PageNumber:number},function(response){  
            if (response != null) {  
//appending the fetched value to the table  
                $("#tbldisplay").empty();  
                var datacontent = ""  
                for (var i = 0; i < response.length; i++) {  
                    datacontent += "<tr><td>" + response[i].Name + "</td><td>" + response[i].Address + "</td><td>" + response[i].Phone_Number + "</td></tr>";  
                }  
                $("#tbldisplay").append(datacontent);  
            }  
        });  
    }

حال ، یک متد برای گرفتن لیست کاربران به پروژه اضافه می‌کنیم ، با کلیک بر روی دکمه :

 [HttpGet]    
        public JsonResult SortData(int DrpDwnValue,int PageNumber)    //match the name and order of the parameters with your javacript above    
        {    
            using (DBContext context = new DBContext())    
            {    
//here for skipping the current data displayed you have to use the OrderBy function of the IQueryable     
//This will skip the current data and move to next or previous data according to the button you have clicked    
                var Users = context.ObjUser.OrderBy(x => x.Id).Skip(DrpDwnValue * (PageNumber - 1)).Take(DrpDwnValue).ToList();    
                return Json(Users, JsonRequestBehavior.AllowGet);    
            }    
        }

برای جستجو :

از تابع KeyUp جاوا اسکریپت ، برای جستجوی متن جاری و تطابق با هر چیزی که در فیلد پر شده است از کد زیر استفاده می‌کنیم :

$("#Search").keyup(function (e) {    
       clearTimeout($.data(this, 'timer'));    
       if (e.keyCode == 13)    
           MatchData(true);    
       else    
           $(this).data('timer', setTimeout(MatchData, 50));     //sets the timer between the key press from keyboard and the search    
   })    
   function MatchData(force)    
   {    
       var event = $("#Search").val();        //fetching the value from the textbox    
    
       $.get("/Home/SearchData", function (response) {    
           //console.log(response);    
           if (response.length) {    
               $("#tbldisplay").empty();    
    
               var datacontent = "";    
               for (var i = 0; i < response.length; i++) {    
//Only the matching value will be displayed  
                   if ((response[i].Name).indexOf(event) != -1 || (response[i].Address).indexOf(event) != -1 || (response[i].Phone_Number).indexOf(event) != -1) //Name , Address and Phone_number are my attributes in User Table {    
                       datacontent += "<tr><td>" + response[i].Name + "</td><td>" + response[i].Address + "</td><td>" + response[i].Phone_Number + "</td></tr>";    
               }    
           }    
           $("#tbldisplay").append(datacontent);    
       });    
   }

Action Method :

[HttpGet]  
       public JsonResult SearchData()  
       {  
           using (DBContext context = new DBContext())  
           {  
               var Users = context.ObjUser.ToList();  
               return Json(Users, JsonRequestBehavior.AllowGet);  
           }  
       }

داده هایی را وارد کردیم ، در خروجی خواهیم داشت :