How to use paging in mvc using ajax.

I want to use paging  in mvc how to do this. please help me
Last updated:11/20/2015 10:06:26 PM

1 Answers

Anonymous User
Anonymous User

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

 

Answer