Searching And Paging In MVC

Database structure

Create a table in the database with the name Employee.

The following is my table design.

Create MVC Application 

Step 1: Go to File, New, then Project.

Step 2: Go to File, New, Project. Choose "ASP.NET MVC 4 Web Application" from the list, then provide the application name as you wish and set the path in the location input where you want to create the application.

Step 3: Now choose the Project Template "Basic".

Adding a ADO.Net Entity Data Model

Step 1: Right-click on the project and select "Add new item", then select Data from the templates.

Step 2: Choose "ADO.Net Entity Data Model" from the list and provide a name. Now, after clicking on Add, you can see the .edmx file in the project.

Step 3:

Create Homecontroller

Right click on controller Folder and select template Empty MVC controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
using PagedList.Mvc;

namespace searchingdata.Controllers
{
    public class HomeController : Controller
    {
        Dbcontext db = new Dbcontext();
        public ActionResult Index(string Searchby, string search)
        {
            if (Searchby == "Gender")
            {
                var model = db.Employees.Where(emp => emp.Gender == search || search == null).ToList();
                return View(model);

            }
            else
            {
                var model = db.Employees.Where(emp => emp.Name.StartsWith(search) || search == null).ToList();
                return View(model);
            }
        }
}
}

Create Index View

Right click on Index method and select Strong -typed view as shown in the following figure.



Index View

@model IEnumerable<searchingdata.Employee>

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/PagedList.css" rel="stylesheet" />
<div style="font-family:Arial">
    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <p>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <b> Search by</b> @Html.RadioButton("searchby", "Name", true)<b> Name</b>
            @Html.RadioButton("searchby", "Gender") <b> Gender</b><br />
            @Html.TextBox("search") <input type="submit" value=" Search" />
        }
    </p>

    <table border="1">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.First().Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().EmailId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().City)
            </th>
            <th> Action</th>
        </tr>

        @if (Model.Count() == 0)
        {

            <tr>
                <td colspan="5">
                    No record found
                </td>
            </tr>

        }
        else
        {
            foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Gender)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EmailId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.City)
                    </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>
</div>

In above code I have two html radiobutton and one html text box and simple submit Button.

Press F5 and run you application.

Here I have checked the name Radiobutton and searched name starting from S alphabet. The output is shown in the following figure.

Here I have checked Gender RadioButton and searched gender male. The output is shown in the following figure.

Now I am adding paging concept in this project. First we need to add PagedList.mvc package in our project. The process is shown in the following figure.

 

Now see your project we have library in our project PagedList and PagedList.mvc and we have also got one Css file inside content folder with the name PagedList.css.

Add new parameter in Index Method: inside Home controller, add int? page is a nullable parameter. Let's see the updated Index.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
using PagedList.Mvc;

namespace searchingdata.Controllers
{
    public class HomeController : Controller
    {
        Dbcontext db = new Dbcontext();


        public ActionResult Index(string Searchby, string search, int? page)
        {
            if (Searchby == "Gender")
            {
                var model = db.Employees.Where(emp => emp.Gender == search || search == null).ToList().ToPagedList(page??1 ,3);
                return View(model);

            }
            else
            {
                var model = db.Employees.Where(emp => emp.Name.StartsWith(search) || search == null).ToList().ToPagedList(page ?? 1, 3);
                return View(model);
            }
        }


    }
}

In the above code to return PagedList(), and page list contains two parameters int pagenumber and int pagesize.

If you want to show the number of rows displayed of the total number of rows available,

 

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, searchBy = Request.QueryString["searchBy"], search = Request.QueryString["search"] }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayItemSliceAndTotal = true })

 

@using PagedList;
@using PagedList.Mvc;

@model IPagedList<searchingdata.Employee>

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/PagedList.css" rel="stylesheet" />
<div style="font-family:Arial">
    <h2>Index</h2>

    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <p>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <b> Search by</b> @Html.RadioButton("searchby", "Name", true)<b> Name</b>
            @Html.RadioButton("searchby", "Gender") <b> Gender</b><br />
            @Html.TextBox("search") <input type="submit" value=" Search" />
        }
    </p>

    <table border="1">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.First().Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().EmailId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.First().City)
            </th>
            <th> Action</th>
        </tr>

        @if (Model.Count() == 0)
        {

            <tr>
                <td colspan="5">
                    No record found
                </td>
            </tr>

        }
        else
        {
            foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Gender)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EmailId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.City)
                    </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>
</div>
<div id='Paging'>

    @Html.PagedListPager(Model, page => Url.Action( "Index", new { page, searchby = Request.QueryString["searchby"], search = Request.QueryString["search"] }), new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded, DisplayPageCountAndCurrentLocation = true, DisplayItemSliceAndTotal = true })
</div>

Run your application - Press F5.

Summary

In this article we learned about searching and paging in MVC using Entity Framework.