MVC可以強(qiáng)制分離應(yīng)用程序輸入、處理和輸出的設(shè)計(jì)模式,本文是錯(cuò)新技術(shù)頻道小編帶給大家的MVC生成頁(yè)碼選擇器返回HTML代碼詳解,希望對(duì)你有所幫助。
先看最終效果最終效果:






樣式為bootstrap3中的分頁(yè)“pagination”,如果不使用bootstrap單獨(dú)提出來(lái)并不大
頁(yè)碼生成代碼為:
public string GetPaginationHtml(PaginationViewModel p){ var PageNum = p.Page;//當(dāng)前頁(yè)碼(頁(yè)碼從1開(kāi)始) var PageCount = p.PageCount;//總頁(yè)數(shù) var ItemCount = p.ItemCount;//總條數(shù) var showPageNum = 6;//顯示數(shù)字的頁(yè)面數(shù)量 var html = new StringBuilder(); html.Append(string.Format("<ul class='pagination' id='{0}' data-data='{1}'>", p.ULID, p.Data));//ULID和Data是方便在前臺(tái)增加事件用的 if (PageCount > 1) { var startPage = 1; if (showPageNum > PageCount) { startPage = 1; } else { if (PageNum - (showPageNum / 2) <= 0) { startPage = 1; } else if (PageNum + (showPageNum / 2) >= PageCount) { startPage = PageCount - showPageNum; } else { startPage = PageNum - (showPageNum / 2); } } startPage = (startPage == 0 ? 1 : startPage);//第一個(gè)開(kāi)始顯示數(shù)字的頁(yè)碼 //上一頁(yè)按鈕 html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>上一頁(yè)</span></a></li>", PageNum <= 1 ? "disabled" : "", PageNum - 1)); if (startPage > 1)//生成第一頁(yè)按鈕和中間省略號(hào) { html.Append("<li><a class='js-pageSelect'' href='#' data-page='1'>1</a></li>"); if (startPage > 2) { html.Append("<li><span>...</span></li>"); } } for (int i = startPage; i <= (startPage + showPageNum); i++)//生成頁(yè)碼 { if (i > PageCount) { break; } html.Append(string.Format("<li class='{0}'><a class='js-pageSelect'' href='#' data-page='{1}'>{2}</a></li>", i == PageNum ? "active" : "", i, i)); } //生成最后一頁(yè)按鈕和中間省略號(hào) int maxShowPage = startPage + showPageNum; if (maxShowPage <= PageCount - 1) { if(maxShowPage <= PageCount - 2) { html.Append("<li><span>...</span></li>"); } html.Append(string.Format("<li><a class='js-pageSelect'' href='#' data-page='{0}'>{1}</a></li>",PageCount,PageCount)); } //顯示下一頁(yè)按鈕 html.Append(string.Format("<li class='{0}'><a href='#' class='js-pageSelect' data-page='{1}'><span>下一頁(yè)</span></a></li>", PageNum >= PageCount ? "disabled" : "", PageNum + 1)); //顯示頁(yè)碼信息 html.Append(string.Format("<li><span>第{0}頁(yè) 共{1}頁(yè){2}條內(nèi)容</span></li>", PageNum, PageCount, ItemCount)); } else { //內(nèi)容不足一頁(yè)時(shí)顯示的內(nèi)容 html.Append(string.Format("<li><span>共1頁(yè){0}條內(nèi)容</span></li>", ItemCount)); } return html.ToString();}用的時(shí)候直接放到MVC Controllers 中ActionResult 返回Content(html)。
頁(yè)面中可以直接?
@Html.Action("", new {page = 1,pageSize = 20, ... })?也可以
$.ajax({ url: '/Function/FileArchiveSelectShouWenDengJiTableMessage', type: 'post', dataType: 'html', data: { page: page, pageSize: pagesize, ... },}).done(function (data) { $('#ShouWenPageSelect').html(data); InitPageSelectEvent();});有關(guān)于MVC生成頁(yè)碼選擇器返回HTML代碼詳解錯(cuò)新技術(shù)頻道小編就先為大家介紹到這,好好的學(xué)習(xí)這些知識(shí),然后從這里吸收有用的知識(shí)。
新聞熱點(diǎn)
疑難解答
圖片精選