In this article I am going to explain how to change page
size with dropdown in asp.net MVC.
Description:
I am using Pagedlist.mvc package for pagination. In previous
article I have explained . Now I want to change/set page size using
dropdown in foreach loop.
Implementation:
I want to display list of employees.
Model (Employee.cs)
public partial class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public Nullable<int> Phone { get; set; }
public Nullable<int> Salary { get; set; }
public string Department { get; set; }
public string ImagePath { get; set; }
public string EmailId { get; set; }
}
Add
controller
Now add an empty controller to project. Create action to
fetch the data.
Complete code of controller
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using mvctest2017.Models;
using PagedList;
using System.IO;
using System.Text;
namespace mvctest2017.Controllers
{
public class EmployeeController : Controller
{
private DemoEntities db = new DemoEntities();
//
//
GET: /Employee/
public ActionResult Index(int? page, int? PageSize)
{
var employee = db.Employees.OrderBy(e =>
e.Id).Count();
ViewBag.PageSize = new List<SelectListItem>()
{
new SelectListItem() { Value="5", Text= "5" },
new SelectListItem() { Value="10", Text= "10" },
new SelectListItem() { Value="15", Text= "15" },
new SelectListItem() { Value="25", Text= "25" },
new SelectListItem() { Value="50", Text= "50" },
};
int pageNumber = (page ?? 1);
int pagesize = (PageSize ?? 5);
ViewBag.psize = pagesize;
ViewBag.Count = employee;
return View(db.Employees.OrderBy(c =>
c.Id).ToList().ToPagedList(pageNumber, pagesize));
}
}
}
Add View
Now add view to index action.
Complete source of view (index.cshtml)
@*@model
IEnumerable<mvctest2017.Models.Employee>*@
@model PagedList.IPagedList<mvctest2017.Models.Employee>
@using PagedList.Mvc;
@{
ViewBag.Title = "ASP.NET MVC : If condition in Foreach loop Razor view";
}
<style>
table th {
padding: 20px;
}
table td {
text-align: center;
}
</style>
<table align="center" style="margin-top: 50px; padding: 10px;">
<tr>
<th><input id="checkAll" type="checkbox" /></th>
<th>
Name
</th>
<th>
Phone
</th>
<th>
Salary
</th>
<th>
Department
</th>
<th>
Image
</th>
<th>
Email
</th>
<th>Action</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" class="chkbox" value="@item.Id" /></td>
<td>
@if (item.Name != "")
{
@Html.DisplayFor(modelItem
=> item.Name)
}
else
{
<span style="color:red">-NA-</span>
}
</td>
<td>
@Html.DisplayFor(modelItem =>
item.Phone)
</td>
<td>
@Html.DisplayFor(modelItem =>
item.Salary)
</td>
<td>
@if(item.Department != null)
{
@Html.DisplayFor(modelItem
=> item.Department)
}
else
{
<span style="color:red">-NA-</span>
}
</td>
<td>
@if (item.ImagePath != null)
{
<img src="@Url.Content(item.ImagePath)" alt="aspmantra.com" height="100px" width="100px" />
}
else
{
<img src="@Url.Content("~/images/image.jpg")" alt="aspmantra.com" height="100px" width="100px" />
}
</td>
<td>
@if (item.EmailId != null)
{
@Html.DisplayFor(modelItem
=> item.EmailId)
}
else
{
<span style="color:red">-NA-</span>
}
</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>
@using (Html.BeginForm("Index", "Employee", FormMethod.Get, new { id = "form1" }))
{
<div class="pager">
Page @(Model.PageCount <
Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount<br/>
Showing @Model.Count @String.Format(" of {0} ", ViewBag.Count)
@Html.PagedListPager(Model,
page => Url.Action("Index",
new {page, pageSize =
ViewBag.psize }))
@Html.DropDownList("pageSize")
</div>
}
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#checkAll").click(function () {
if (this.checked) {
$(".chkbox").prop('checked', $(this).prop('checked', true));
}
else {
$('.chkbox').each(function () { this.checked = false; });
}
});
$('.chkbox').on('click', function () {
if ($('.chkbox:checked').length == $('.chkbox').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
</script>
<script type="text/javascript">
$(function () {
$("#pageSize").change(function () {
$("#form1").submit();
});
});
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
.png)
No comments:
Post a Comment