I have implemented Paging in MVC but on the same page given the facility to search a record, the issue is when i search a record and that particular records matches with more than 10 records then it should be displayed as paged result, for searching i have creates Index method in the home controller, but want to know how it can be displayed as paged result. Normal paging is executed properly through Products method of the controller..
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SearchRecord.Models;
namespace SearchRecord.Controllers
{
public class HomeController : Controller
{
AdventureWorkEntities db = new AdventureWorkEntities();
const int pageSize = 10;
[HttpGet]
public ActionResult Products(int page = 1)
{
var products = db.tbl_product.OrderBy(p => p.ProductId).Skip((page - 1) * pageSize).Take(pageSize).ToList();
ViewBag.CurrentPage = page;
ViewBag.PageSize = pageSize;
ViewBag.TotalPages = Math.Ceiling((double)db.tbl_product.Count() / pageSize);
return View(products);
}
public ActionResult Index(string searchString)
{
int page = 1;
var query = db.tbl_product.Where(p => p.ProductName.Contains(searchString)).OrderBy(p => p.ProductId).Skip((page - 1) * pageSize).Take(pageSize).ToList();
ViewBag.CurrentPage = page;
ViewBag.PageSize = pageSize;
ViewBag.TotalPages = Math.Ceiling((double)db.tbl_product.Where(c => c.ProductName.Contains(searchString)).Count() / pageSize);
return PartialView("ViewSearchedProduct", query.ToList());
}
}
}
Products.cshtml
@model IEnumerable<SearchRecord.Models.tbl_product>
<html>
<head>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<link href="@Url.Content("~/bootstrap/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<title>Index</title>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home/Index',
data: "{'searchString':'" + document.getElementById('searchString').value + "'}",
async: false,
success: function (response) {
$('#showData').html(response)
},
error: function () { alert("error"); }
});
});
});
</script>
</head>
<body>
@Html.TextBox("searchString")
<input type="button" value="filter" id="Button1" />
<table id="showData">
@{Html.RenderPartial("ViewProduct");}
</table>
</body>
</html>
View Product (Partial View)
@model IEnumerable<SearchRecord.Models.tbl_product>
@{int i = 1;}
@foreach (var p in Model)
{
<tr class="@(i++ % 2 == 0 ? "highlighted" : "")">
<td>@p.ProductId
</td>
<td>@p.ProductName
</td>
</tr>
}
<div class="pagination">
@for (int p = 1; p <= ViewBag.TotalPages; p++)
{
<a class="@(p == ViewBag.CurrentPage ? "current" : "")" href="@Url.Action("products", "Home", new { page = p })">@p</a>
}
</div>
ViewSearchedProduct.csthml (Partial View) to display searched record
@model IEnumerable<SearchRecord.Models.tbl_product>
@{int i = 1;}
@foreach (var p in Model)
{
<tr class="@(i++ % 2 == 0 ? "highlighted" : "")">
<td>@p.ProductId
</td>
<td>@p.ProductName
</td>
</tr>
}
<div class="pagination">
@for (int p = 1; p <= ViewBag.TotalPages; p++)
{
<a class="@(p == ViewBag.CurrentPage ? "current" : "")" href="@Url.Action("Index", "Home", new { page = p })">@p</a>
}
</div>
