locked
Paging with EF while using AJAX(Jquery.get/post()) in a SPA RRS feed

  • Question

  • User283528319 posted

    Hi all,

    Paging in SPA sounds very difficult to me. However, I seriously need it.

    Could you help me / give an example approach for it?

    Thank you

    Friday, February 1, 2019 12:21 PM

All replies

  • User-2054057000 posted

    You are asking for paging in EF. Paging is done using .skip() and .take() methods of LINQ.

    The code is:

    var record = context.Students
                         .OrderBy(x => x.StudentID)
                         .Skip(skip)
                         .Take(pageSize)
                         .ToArray();

    You provide the skip and pageSize values like this:

    var pageSize = 10;
    var skip = pageSize * (id - 1);

    Where id is the page number.

    So for page 3 the records fetched by Entity Framework will be:

    var record = context.Students
                         .OrderBy(x => x.StudentID)
                         .Skip(20)
                         .Take(10)
                         .ToArray();

    And in this way you do paging in EF.

    Kindly check this tutorial where this is put to use: Implementing own ASP NET Web API

    Regards

    Friday, February 1, 2019 6:01 PM
  • User283528319 posted

    You are asking for paging in EF. Paging is done using .skip() and .take() methods of LINQ.

    Could you add one more thing, how can I send the skip and <g class="gr_ gr_72 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="72" data-gr-id="72">pagesize</g> vars to <g class="gr_ gr_102 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="102" data-gr-id="102">server</g> via url?

    Friday, February 1, 2019 6:50 PM
  • User-2054057000 posted

    fatihbarut

    yogyogi

    You are asking for paging in EF. Paging is done using .skip() and .take() methods of LINQ.

    Could you add one more thing, how can I send the skip and pagesize vars to server via url?

    Please check the link to the tutorial I have given. In that tutorial page number is sent using Model Binding feature. 

    Friday, February 1, 2019 7:16 PM
  • User-2054057000 posted

    It is just pure css. Check this demo here.

    The paging links are created as you want using pure css. 

    The CSS is:

    .pagingDiv {
            background: #f2f2f2;
        }
    
            .pagingDiv > a {
                display: inline-block;
                padding: 0px 9px;
                margin-right: 4px;
                border-radius: 3px;
                border: solid 1px #c0c0c0;
                background: #e9e9e9;
                box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
                font-size: .875em;
                font-weight: bold;
                text-decoration: none;
                color: #717171;
                text-shadow: 0px 1px 0px rgba(255,255,255, 1);
            }
    
                .pagingDiv > a:hover {
                    background: #fefefe;
                    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
                    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
                }
    
                .pagingDiv > a.active {
                    border: none;
                    background: #616161;
                    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
                    color: #f0f0f0;
                    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
                }
    

    And the paging are created like this HTML:

    <div class="pagingDiv">
        <a class="paging active" href="/mvc/APICall?page=1&amp;key=Key1&amp;secret=Secret1">1</a>
    <a class="paging" href="/mvc/APICall?page=2&amp;key=Key1&amp;secret=Secret1">2</a>
    <a class="paging" href="/mvc/APICall?page=3&amp;key=Key1&amp;secret=Secret1">3</a>
    <a class="paging" href="/mvc/APICall?page=4&amp;key=Key1&amp;secret=Secret1">4</a>
    <a class="paging" href="/mvc/APICall?page=5&amp;key=Key1&amp;secret=Secret1">5</a>
    <a class="paging" href="/mvc/APICall?page=6&amp;key=Key1&amp;secret=Secret1">6</a>
    <a class="paging" href="/mvc/APICall?page=7&amp;key=Key1&amp;secret=Secret1">7</a>
    <a class="paging" href="/mvc/APICall?page=8&amp;key=Key1&amp;secret=Secret1">8</a> </div>

    Regards.

    Saturday, February 2, 2019 5:07 PM
  • User475983607 posted

    fatihbarut

    How can I make paging with numbers like this?

    pagingsample

    My best guess is you're asking how to format the HTML to look like the image. 

    Bootstrap has the btn class.  The down side is it does not look like the old school button.  I would just do a Google search to find CSS that fits your style requirenet; https://www.w3schools.com/w3css/w3css_buttons.asp.

    https://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button

    The following link is an MVC example if you need help with the mechanics.  You can separate HTML (the View) from the data and use HTML in your SPA. 

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

    There are also various jQuery pagination plugins.

    http://pagination.js.org/

    Saturday, February 2, 2019 5:08 PM
  • User-893317190 posted

    Hi fatihbarut,

    To  finish jquery ajax in a SPA, you should maintain your pagination and  data in table in client.

    Below is my code.

    First , server side.

     public class Demo1Controller : Controller
        {
            CustomerDb db = new CustomerDb();
            // GET: Demo1
            public ActionResult Index()
            {
                return View();
            }
    // action to receive jquery ajax request public ActionResult PageData(int currentPage=1,int pageSize=10) { // get the data of current page List<Customer> customers = db.Customers.OrderBy(c => c.CustomerID).Skip((currentPage - 1) * pageSize).Take(pageSize).ToList(); //return tatalPage and the data of customers return Json(new {totalPage= Math.Ceiling(1.0*db.Customers.Count()/pageSize),data = customers },JsonRequestBehavior.AllowGet); }
    // action to show the spa page public ActionResult PageDataShow() { return View("PageData"); }

    My code in client side.

    <h2>PageData</h2>
    
    
    
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">CustomerID</th>
                <th scope="col">CompanyName</th>
                <th scope="col">ContactName</th>
                <th scope="col">ContactTitle</th>
                <th scope="col">Address</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>
         
    nav to show the pagination <nav > <ul class="pagination"> </ul> </nav> @section scripts{ <script> // define a function to send jquery ajax request function getPageData(currentPage, pageSize) { var currentPage = currentPage || 1; // default currentPage is 1 var pageSize = pageSize || 10; //default pageSize is 10 $.post( "@Url.Action("PageData")", { currentPage: currentPage, pageSize: pageSize }, // pass the parameter to server function (data) { var pagination = ""; // the string to represent the pagination if (currentPage != 1) { // if is the first page , not show the previous link
    pagination += '<li class="page-item "><a class="page-link" href="' + (parseInt(currentPage)-1) + '" tabindex = "-1" > Previous</a ></li >' } for (var i = 1; i <= data.totalPage; i++) { // splice pagination data of page 1,2,3,4,5... pagination += ' <li class="page-item ' + (i == currentPage ? 'active' : '') + '"><a class="page-link " href="' + (i == currentPage ? "javascript:;" : i) + '">'+i+'</a></li>'; } if (currentPage != data.totalPage) { // if is the last page, not show the next link console.log(currentPage + 1); pagination += ' <li class="page-item"><a class="page-link" href = "' + (parseInt(currentPage)+1) + '" > Next</a ></li >' } $(".pagination").html(pagination); // fill the pagination var tableHtml = ""; // define the string to represent data of customers for (var i = 0; i < data.data.length; i++) { //loop through the customer data and splice every customer tableHtml += "<tr><td>" + data.data[i].CustomerID + "</td><td>" + data.data[i].CompanyName + "</td><td>" + data.data[i].ContactName + "</td><td>" + data.data[i].ContactTitle + "</td><td>" + data.data[i].Address+"</td></tr>" } $("tbody").html(tableHtml); // fill the customer data into tbody $(".pagination li").not(".active").find("a").click(function () {
    // bind click event to every a link except the current link var currentPage = $(this).attr("href"); // get the page stored in the a link's href attribute var pageSize = 10; // default pageSize getPageData(currentPage, pageSize); // recall the function to send an ajax request return false; // return false to prevent refresh the page }) } , "json" ) } $(function () {
    // call the defined function getPageData(); }) </script> }

    The result.

    Please pay attention , I use bootstrap 's pagination and table.

    https://getbootstrap.com/docs/4.2/components/pagination/

    https://getbootstrap.com/docs/4.2/content/tables/

    Best regards,

    Ackerly Xu

    Thursday, February 7, 2019 7:17 AM