صفحه بندی اطلاعات در ASP.NET MVC به روش HashChange
نویسنده: سید امید موسوی
تاریخ: ۱۳۹۵/۱۲/۱۵ ۱۸:۵۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروه‌های مطالب | ۱۰۲۴ |
| نقشه‌های راه | ۱۱۹ |
| دوره‌ها | ۱۴ |
| اشتراک‌ها | ۱۷۹۱۴ |
Install-Package MvcAjaxPager
public class Topic
{
public int Id;
public string Title;
public string Text;
} public class TopicService
{
public static IEnumerable<Topic> Topics = new List<Topic>() {
new Topic{Id=1,Title="Title 1",Text= "Text 1"},
new Topic{Id=2,Title="Title 2",Text="Text 2"},
new Topic{Id=3,Title="Title 3",Text="Text 3"},
new Topic{Id=4,Title="Title 4",Text="Text 4"},
new Topic{Id=5,Title="Title 5",Text="Text 5"},
new Topic{Id=6,Title="Title 6",Text="Text 6"},
new Topic{Id=7,Title="Title 7",Text="Text 7"},
new Topic{Id=8,Title="Title 8",Text="Text 8"},
new Topic{Id=9,Title="Title 9",Text="Text 9"},
new Topic{Id=10,Title="Title 10",Text="Text 10"},
new Topic{Id=11,Title="Title 11",Text="Text 11"},
new Topic{Id=12,Title="Title 12",Text="Text 12"},
new Topic{Id=13,Title="Title 13",Text="Text 13"},
new Topic{Id=14,Title="Title 14",Text="Text 14"},
new Topic{Id=15,Title="Title 15",Text="Text 15"},
new Topic{Id=16,Title="Title 16",Text="Text 16"},
new Topic{Id=17,Title="Title 17",Text="Text 17"},
new Topic{Id=18,Title="Title 18",Text="Text 18"},
new Topic{Id=19,Title="Title 19",Text="Text 19"},
new Topic{Id=20,Title="Title 20",Text="Text 20"},
new Topic{Id=21,Title="Title 21",Text="Text 21"},
new Topic{Id=22,Title="Title 22",Text="Text 22"},
};
public static IEnumerable<Topic> GetAll()
{
return Topics.OrderBy(row => row.Id);
}
} public class ListViewModel
{
public IEnumerable<Topic> Topics { get; set; }
public int PageIndex { get; set; }
public int TotalItemCount { get; set; }
} public ActionResult Index(int page = 1)
{
var topics = TopicService.GetAll ();
int totalItemCount = topics.Count();
var model = new ListViewModel()
{
PageIndex = page,
Topics = topics.OrderBy(p => p.Id).Skip((page - 1) * 10).Take(10).ToList(),
TotalItemCount = totalItemCount
};
if (!Request.IsAjaxRequest())
{
return View(model);
}
return PartialView("_TopicList", model);
} @using MvcAjaxPager
@model ListViewModel
@Html.AjaxPager(Model.TotalItemCount, 10, Model.PageIndex, "Index", "Home", null, new PagerOptions
{
ShowDisabledPagerItems = true,
AlwaysShowFirstLastPageNumber = true,
HorizontalAlign = "center",
ShowFirstLast = false,
CssClass = "NavigationBox",
AjaxUpdateTargetId = "dvTopics",
AjaxOnBegin = "AjaxStart",
AjaxOnComplete = "AjaxStop"
}, null, null)
<table>
<tr>
<th>
@Html.DisplayName("ID")
</th>
<th>
@Html.DisplayName("Title")
</th>
<th>
@Html.DisplayName("Text")
</th>
</tr>
@foreach (var topic in Model.Topics)
{
<tr>
<td>
@topic.Id
</td>
<td>
@topic.Title
</td>
<td>
@topic.Text
</td>
</tr>
}
</table>
@Html.AjaxPager(Model.TotalItemCount, 10, Model.PageIndex, "Index", "Home", null, new PagerOptions
{
ShowDisabledPagerItems = true,
AlwaysShowFirstLastPageNumber = true,
HorizontalAlign = "center",
ShowFirstLast = true,
FirstPageText = "اولین",
LastPageText = "آخرین",
MorePageText = "...",
PrevPageText = "قبلی",
NextPageText = "بعدی",
CssClass = "NavigationBox",
AjaxUpdateTargetId = "dvTopics",
AjaxOnBegin = "AjaxStart",
AjaxOnComplete = "AjaxStop"
}, null, null) @using MvcAjaxPager
@model ListViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="dvTopics">
@{
@Html.Partial("_TopicList", Model);
}
</div>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/path.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.pager-1.0.1.min.js")"></script>
<script type="text/javascript">
$('.NavigationBox').pager();
//pagination before start
function AjaxStart() {
console.log('Start AJAX call. Loading message can be shown');
}
// pagination - after request
function AjaxStop() {
console.log('Stop AJAX call. Loading message can be hidden');
};
</script>
</body>
</html> ASP.NET Core TagHelper for Pagination هست که حالت Ajax را هم پشتیبانی میکند. البته HashChange را ندارد که بهتر است به عنوان یک ایده‌ی جدید در قسمت issues آن درخواست بدید تا اضافه کنند.