Ajax paging in ASP.NET MVC with Entity Framework

Question

After a lot of help from stack overflow I was able to create CRUD operations and used partial view to render my index page for searching, but now I'm lost how to begin for paging.

For searching I created a searching.cshtml partial view:

@model IEnumerable<SearchingMvcCrud.Models.Customer>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Department)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}

</table>

Then in my index.cshtml, I created a div with id searching and inside it I called RenderPartial("_searching", Model) and I used Ajax jQuery script to update my partial view:

@using System.Web.Mvc;
@using SearchingMvcCrud.Models;

@model IEnumerable<SearchingMvcCrud.Models.Customer>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<p>
    @using (Html.BeginForm("Index", "Customer", FormMethod.Get))
    {
        <b>Search By:</b> @Html.RadioButton("searchBy", "Name",true) <text> Name </text>
        @Html.RadioButton("searchBy", "Department") <text>Department</text><br />
        @Html.TextBox("search") <input type="button" value="Search" id="Search" />
    }
</p>

<div id="searching">
    @{Html.RenderPartial("_searching", Model); }
</div>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script>
    $(document).ready(function () {
        $("#Search").click(function (e) {
            var searchBy = $("input[name='searchBy']:checked").val();
            var search = $("#search").val();

            alert(searchBy);
            debugger
            $.ajax({
                url: '/Customer/Searching',
                type: "post",
                data: { "searchBy": searchBy, "search": search },
                async: true,
                success: function (data) {
                    $("#searching").html(data);
                }
            })
        })
    })
</script>

My controller code

using SearchingMvcCrud.Models;
using PagedList;

namespace SearchingMvcCrud.Controllers
{
    public class CustomerController : Controller
    {
        // GET: Search
        public PartialViewResult Searching(string searchBy, string search,)
        {
            DbModels dbModel = new DbModels();
            {

                if (searchBy == "Department")
                {
                    return PartialView("_searching",dbModel.Customers.Where(x => x.Department == search).ToList());
                }
                else if (searchBy == "Name")
                {
                    return PartialView("_searching",dbModel.Customers.Where(x => x.Name.StartsWith(search)).ToList());
                }
                else
                {
                    return PartialView("_searching",dbModel.Customers.ToList());
                }
            }
        }

        // GET: Customer
        public ActionResult Index()
        {
            DbModels dbModel = new DbModels();
            {
                return View(dbModel.Customers.ToList());
            }
        }
    }
}

How do I achieve ajax paging?

Someone told me to use the same method for paging also but how?

If you are looking for pagination then send the page number also as a parameter to searching method. Based on page number you can filter a range from list and pass it to view. — Rajesh G
– Rajesh G, Commented Dec 21, 2019 at 18:46

Rajesh G · Accepted Answer · 2019-12-24 02:04:56Z

You can rewrite Searching method like below.

public PartialViewResult Searching(string searchBy, string search, int pageNumber = 1)
    {

     int limit = 10;// your can set this value in AppSettings and fetch from there. You can set any limit you want like 10, 15 or 20 etc.
     int seed = limit * pageNumber;
        DbModels dbModel = new DbModels();
        {
            var result = null;
            if (searchBy == "Department")
            {
                result = dbModel.Customers.Where(x => x.Department == search).ToList();
            }
            else if (searchBy == "Name")
            {
                result = dbModel.Customers.Where(x => x.Name.StartsWith(search)).ToList();
            }
          else
          {
            result = dbModel.Customers.ToList();
           }

          return PartialView("_searching", result.GetRange(seed-limit, seed-1));

        }
    }

And while making the AJAX call you can pass the page number in the url like below. For e.g to get the second page.

'/Customer/Searching/2'

Then you need to replace the html inside #searching container using replaceWith().

Collectives™ on Stack Overflow

Ajax paging in ASP.NET MVC with Entity Framework

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related