HOW TO USE PAGING IN MVC USING AJAX.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
Mvc  Mvc3  Mvc2  Mvc4  Mvc5  Ajaxform 
 1068  View(s)
Ratings:
Rate this:
I want to use paging  in mvc how to do this. please help me
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to use paging in mvc using ajax.

    Layout.cshtml

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")  
        <script src="~/Scripts/jquery-2.1.4.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    </head>
    <body class="PageContainer">

        <div class="divMain">
            @RenderBody()
        </div>
        <div class="popup" style="display: none;" id="modelpopup">
        </div>
    </body>
    </html>
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '.openDialog', function (e) {
                e.preventDefault();;
                $.get($(this).attr("href"), function (response) {
                    $('#modelpopup').html(response);
                    $('#modelpopup').slideDown();
                });
            });
        });
        function onSuccess() {
            $.ajax({
                type: "POST",
                url: "/Home/Search",
                data: {},
                success: function (response) {
                    $('#divUserList').html(response);
                    $('#modelpopup').slideUp();
                },
            });

        }
        $(document).on('click', '.pagination li a', function (e) {
            e.preventDefault();
            if ($(this).attr("href") != "" && $(this).attr("href") != undefined) {
                $.post($(this).attr("href"), { SearchText: $('#SearchText').val() }, function (response) {
                    $('#divUserList').html(response);
                });
            }
        });
        function showWindow() {
            $('#modelpopup').slideDown();
        }
        function HideWindow() {
            $('#modelpopup').slideUp();
        }
        function Confirmation() {
            if (confirm("Are you sure you want to Delete ?")) {
                return true;
            } else {
                return false;
            }
        }


    </script>

    _UserList.cshtml

    @model PagedList.PagedList<TestProjectMvc.Models.UserBAL>
    @using PagedList
    @using PagedList.Mvc
    <div class="Middle1">

        @if (Model != null)
        {

            foreach (var obj in Model)
            {
            <div class="Rowbox">
                <div class="Name">@obj.UserName </div>
                <div class="Phone">@obj.PhoneNumber </div>
                <div class="Email">@obj.EmailId </div>
                <div class="Action">
                    @Html.ActionLink("Edit", "Edit", "Home", new { @id = obj.UserId }, new { @class = "openDialog" })
                    @Ajax.ActionLink("Delete", "Delete", "Home", new { @id = obj.UserId }, new AjaxOptions { OnBegin = "Confirmation", OnSuccess = "onSuccess" }, new { @class = "deleteDialog" })
                </div>
            </div>
              
            }
        }
        <div class="pagedList">
            @Html.PagedListPager(Model, page => Url.Action("Search", new { page }), PagedListRenderOptions.PageNumbersOnly)
        </div>

    </div>
    Index.cshtml

    @model TestProjectMvc.Models.UserViewModel
    @using TestProjectMvc.Models
    @{
        ViewBag.Title = "Index";
    }
    <div class="container">
        <div class="PageContainer" id="page">       
            <div id="divUserList">
                @Html.Partial("_UserList", Model.UserList )
            </div>
        </div>
    </div>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using TestProjectMvc.Models;
    using PagedList;
    using PagedList.Mvc;
    namespace TestProjectMvc.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                UserViewModel obj = new UserViewModel();
                UserBAL user = new UserBAL();
                obj.UserList = user.GetListRecord(user).ToPagedList(1, 2);
                return View(obj);
            }

        }
    }

    add reference

     

      Modified On Nov-20-2015 10:08:47 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!