سفارشی کردن صفحه بندی WebGrid در ASP.NET MVC
نویسنده: عثمان رحیمی
تاریخ: ۱۳۹۴/۰۸/۰۱ ۹:۱۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
برای اینکار، ابتدا قبل از هر چیزی به یک متد الحاقی برای انجام صفحه بندی سفارشی سازی شده، نیاز داریم که کدهای این متد به صورت زیر خواهد بود:
public static class WebGridExtensions
{
public static HelperResult PagerList(
this WebGrid webGrid,
WebGridPagerModes mode = WebGridPagerModes.NextPrevious | WebGridPagerModes.Numeric,
string firstText = null,
string previousText = null,
string nextText = null,
string lastText = null,
int numericLinksCount = 5)
{
return PagerList(webGrid, mode, firstText, previousText, nextText, lastText, numericLinksCount, explicitlyCalled: true);
}
private static HelperResult PagerList(
WebGrid webGrid,
WebGridPagerModes mode,
string firstText,
string previousText,
string nextText,
string lastText,
int numericLinksCount,
bool explicitlyCalled)
{
int currentPage = webGrid.PageIndex;
int totalPages = webGrid.PageCount;
int lastPage = totalPages - 1;
var ul = new TagBuilder("ul");
var li = new List<TagBuilder>();
if (ModeEnabled(mode, WebGridPagerModes.FirstLast)) {
if (String.IsNullOrEmpty(firstText)) {
firstText = "اولین";
}
var part = new TagBuilder("li") {
InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(0), firstText)
};
if (currentPage == 0) {
part.MergeAttribute("class", "disabled");
}
li.Add(part);
}
if (ModeEnabled(mode, WebGridPagerModes.NextPrevious)) {
if (String.IsNullOrEmpty(previousText)) {
previousText = "قبلی";
}
int page = currentPage == 0 ? 0: currentPage - 1;
var part = new TagBuilder("li") {
InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(page), previousText)
};
if (currentPage == 0) {
part.MergeAttribute("class", "disabled");
}
li.Add(part);
}
if (ModeEnabled(mode, WebGridPagerModes.Numeric) && (totalPages > 1)) {
int last = currentPage + (numericLinksCount / 2);
int first = last - numericLinksCount + 1;
if (last > lastPage) {
first -= last - lastPage;
last = lastPage;
}
if (first < 0) {
last = Math.Min(last + (0 - first), lastPage);
first = 0;
}
for (int i = first; i <= last; i++) {
var pageText = (i + 1).ToString(CultureInfo.InvariantCulture);
var part = new TagBuilder("li") {
InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(i), pageText)
};
if (i == currentPage) {
part.MergeAttribute("class", "active");
}
li.Add(part);
}
}
if (ModeEnabled(mode, WebGridPagerModes.NextPrevious)) {
if (String.IsNullOrEmpty(nextText)) {
nextText = "بعدی";
}
int page = currentPage == lastPage ? lastPage: currentPage + 1;
var part = new TagBuilder("li") {
InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(page), nextText)
};
if (currentPage == lastPage) {
part.MergeAttribute("class", "disabled");
}
li.Add(part);
}
if (ModeEnabled(mode, WebGridPagerModes.FirstLast)) {
if (String.IsNullOrEmpty(lastText)) {
lastText = "آخرین";
}
var part = new TagBuilder("li") {
InnerHtml = GridLink(webGrid, webGrid.GetPageUrl(lastPage), lastText)
};
if (currentPage == lastPage) {
part.MergeAttribute("class", "disabled");
}
li.Add(part);
}
ul.InnerHtml = string.Join("", li);
var html = "";
if (explicitlyCalled && webGrid.IsAjaxEnabled) {
var span = new TagBuilder("span");
span.MergeAttribute("data-swhgajax", "true");
span.MergeAttribute("data-swhgcontainer", webGrid.AjaxUpdateContainerId);
span.MergeAttribute("data-swhgcallback", webGrid.AjaxUpdateCallback);
span.InnerHtml = ul.ToString();
html = span.ToString();
} else {
html = ul.ToString();
}
return new HelperResult(writer => {
writer.Write(html);
});
}
private static String GridLink(WebGrid webGrid, string url, string text)
{
TagBuilder builder = new TagBuilder("a");
builder.SetInnerText(text);
builder.MergeAttribute("href", url);
if (webGrid.IsAjaxEnabled) {
builder.MergeAttribute("data-swhglnk", "true");
}
return builder.ToString(TagRenderMode.Normal);
}
private static bool ModeEnabled(WebGridPagerModes mode, WebGridPagerModes modeCheck)
{
return (mode & modeCheck) == modeCheck;
}
} <div> @grid.PagerList(mode: WebGridPagerModes.All) </div>
@{
WebGrid grid = new WebGrid(Model,
rowsPerPage: 10,
ajaxUpdateContainerId: "grid");
var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
} @grid.Table(
tableStyle: "table table-striped table-hover",
headerStyle: "webgrid-header",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(columnName: "Name", header: "نام استان", style: "myfont"),
grid.Column(columnName: "NameEn", header: "نام استان ( انگلیسی )", style: "myfont"),
grid.Column(header: "", format: item => @Html.ActionLink("مدیریت شهرها", actionName: MVC.Admin.City.ActionNames.Index, controllerName: MVC.Admin.City.Name, routeValues: new {Code=item.Code },htmlAttributes:null)),
grid.Column(header: "",
style: "text-align-center-col smallcell",
format: item => @Html.ActionLink(linkText: "ویرایش", actionName: "Edit",
controllerName: "Province", routeValues: new { area = "Admin", code = item.Code },
htmlAttributes: new { @class = "btn-sm btn-info vertical-center" }))
) )
<div>
@grid.PagerList(mode: WebGridPagerModes.All)
</div>
اگر طبق توضیحات بالا عمل کرده باشید، در نهایت صفحه بندی شما به صورت عمودی نمایش داده میشود؛ یعنی هر کدام از شماره صفحات در یک سطر. دلیل آن هم این است که تگ ul، کلاس .pagination را ندارد. در کدهای بوت استراپ تعریف شده است که تمام li هایی که به صورت مستقیم داخل کلاس .pagination هستند خصوصیات مورد نظر را بگیرند.
برای این کار دو راه حل وجود دارد :
راه حل اول: تغییر کدهای css
کدهای نوشته شده برای صفحه بندی در بوت استراپ را از حالت زیر:
.pagination > li
.pagination li
<div >
@grid.PagerList(mode: WebGridPagerModes.All)
</div> var ul = new TagBuilder("ul");
ul.AddCssClass("pagination");
grid.Bind(Model, rowCount: (int)ViewBag.PageCount);
mode: WebGridPagerModes.All,
@{
var grid = new WebGrid(
source: null,
canPage: true,
rowsPerPage: 10,
canSort: true,
defaultSort: "Title"
);
grid.Bind(Model, rowCount: (int)ViewBag.PageCount, autoSortAndPage: false);
var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
}
@grid.Table(
tableStyle: "table table-striped table-hover",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns: grid.Columns(
grid.Column(header: "#",
style: "text-align-center-col",
format: @<text>@(rowIndex++)</text>),
grid.Column(columnName: "Title", header: "عنوان", style: "myfont"),
grid.Column(columnName: "URL", header: "آدرس", style: "myfont"),
grid.Column(header: "",
style: "text-align-center-col smallcell",
format: item => @Html.ActionLink(linkText: "ویرایش", actionName: "Edit",
controllerName: "Link", routeValues: new { area = "Admin", id = item.Code },
htmlAttributes: new { @class = "btn-sm btn-info vertical-center" })),
grid.Column(header: "",
format: @<form action="Link/Delete/@item.Code" method="post">
<input type="submit" class="btn-sm btn-danger submitlink"
onclick="return confirm('آیا از حذف این آیتم مطمئن هستید ؟');"
value="حذف" />
</form>)))
<div class="text-center">
@grid.PagerList(mode: WebGridPagerModes.All)
</div> @{
var grid = new WebGrid(
source: Model,
canPage: true,
rowsPerPage: 10,
canSort: true,
defaultSort: "Title"
);
// grid.Bind(Model, rowCount: (int)ViewBag.PageCount, autoSortAndPage: false); // Delete this Line
var rowIndex = ((grid.PageIndex + 1) * grid.RowsPerPage) - (grid.RowsPerPage - 1);
} href="/AreaName/CoontrollerName/ActionName?page=2&__swhg=1516731566998"