forum

home / developersection / forums / how to use paging in mvc using ajax.

Ask Question
Anonymous User

Other

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

20-Nov-2015 
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 
How to use paging in mvc using ajax.
How to use paging in mvc using ajax.

 

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy