建站
咨詢
售后
建站咨詢
新聞中心
Asp.Net MVC怎么實(shí)現(xiàn)分頁、檢索、排序的功能？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比陽泉網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式陽泉網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋陽泉地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。
很多時候需要這樣的功能，對表格進(jìn)行分頁、排序和檢索。這個有很多實(shí)現(xiàn)的方式，有現(xiàn)成的表格控件、用前端的mvvm，用戶控件。但很多時候看著很漂亮的東西你想進(jìn)一步控制的時候卻不那么如意。這里自己實(shí)現(xiàn)一次，功能不是高大全，但求一個清楚明白，也歡迎園友拍磚。前端是bootstrap3+jPaginate，后臺基于membership。沒什么難點(diǎn)。
先上效果圖。
分頁其實(shí)就是處理好 每頁項(xiàng)目數(shù)、總項(xiàng)目數(shù)、總頁數(shù)、當(dāng)前頁。為了方便復(fù)用，就先從倉庫開始說起。
一、建立倉庫
1.定義Ipager接口，需要分頁的模型倉庫繼承這個接口
namespace Protal.Model.Abstract
{
///
/// 分頁處理
///
public interface IPager
{
///
/// 每頁項(xiàng)目數(shù)
///
/// The page item count.
int PageItemCount { get; set; }
///
/// 總頁數(shù)
///
/// The totoal page.
int TotoalPage { get; }
///
/// 顯示的頁數(shù)
///
/// The display page.
int DisplayPage { get; set; }
///
/// 滿足條件的總數(shù)目
///
int TotalItem { get; set; }
}
}2.定義IUsersRepository，主要處理User 相關(guān)的業(yè)務(wù)邏輯。Find函數(shù)是主要的查詢方法，order表示順反排序。
public interface IUsersRepository : IPager
{
///
/// Post list
///
/// Order expression
/// Filter expression
/// Records to skip
/// Records to take
/// List of users
IEnumerable Find(int order=0,string filter="", int skip = 0, int take = 10);
///
/// Get single post
///
/// User id
/// User object
User FindByName(string name);
///
/// Add new user
///
/// Blog user
/// Saved user
User Add(User user);
///
/// Update user
///
/// User to update
/// True on success
bool Update(User user);
///
/// Save user profile
///
/// Blog user
/// True on success
bool SaveProfile(User user);
///
/// Delete user
///
/// User ID
/// True on success
bool Remove(string userName);
} 二、倉庫的實(shí)現(xiàn)和綁定
主要方法：Membership的中的User和我們自定義的不一樣，所以存在一個轉(zhuǎn)換
public class UsersRepository : IUsersRepository
{
///
/// The _user list
///
private List _userList = new List();
///
/// The _page item count
///
private int _pageItemCount;
///
/// The _display page
///
private int _displayPage;
///
/// The _usercount
///
private int _usercount;
///
/// The _total item
///
private int _totalItem;
///
/// 標(biāo)記是否有查詢條件 沒有的話則返回全部數(shù)目
///
private Func _func;
///
/// Gets or sets the users.
///
/// The users.
public List Users
{
get
{
int count;
var usercollection = Membership.GetAllUsers(0, 999, out count);
if (count == _usercount) return _userList;
_usercount = count;
var members = usercollection.Cast().ToList();
foreach (var membershipUser in members)//這里存在一個轉(zhuǎn)換
{
_userList.Add(new User
{
Email = membershipUser.Email,
UserName = membershipUser.UserName,
//roles password
});
}
return _userList;
}
set { _userList = value; }
}
//查詢
public IEnumerable Find(int order = 0, string filter = "", int skip = 0, int take = 10)
{
if (take == 0) take = Users.Count;
//過濾
_func = string.IsNullOrEmpty(filter) ? (Func) (n => n.UserName != "") : (n => n.UserName.Contains(filter));
var users = Users.Where(_func).ToList();
//更新總數(shù)目
_totalItem = users.Count;
users = order == 0 ? users.OrderBy(n => n.UserName).ToList() : users.OrderByDescending(n => n.UserName).ToList();
return users.Skip(skip).Take(take);
}
///
/// 每頁項(xiàng)目數(shù)
///
/// The page item count.
public int PageItemCount
{
get
{
if (_pageItemCount == 0)
{
_pageItemCount = ProtalConfig.UserPageItemCount;
}
return _pageItemCount;
}
set { _pageItemCount = value; }
}
///
/// 總頁數(shù)
///
/// The totoal page.
public int TotoalPage
{
get
{
var page = (int) Math.Ceiling((double) TotalItem/PageItemCount);
return page==0?1:page;
}
}
///
/// 顯示的頁數(shù)
///
/// The display page.
public int DisplayPage
{
get
{
if (_displayPage == 0)
{
_displayPage = ProtalConfig.UserDisplayPage;
}
return _displayPage;
}
set { _displayPage = value; }
}
///
/// 滿足條件的總數(shù)目 保持更新
///
/// The total item.
public int TotalItem
{
get
{
if (_func == null)
_totalItem = Users.Count;
return _totalItem;
}
set { _totalItem = value; }
}
} ProtalConfig.UserDisplayPage 這里是通過配置實(shí)現(xiàn)一個默認(rèn)頁數(shù)，讓用戶可以再webconfig中更改行列的數(shù)目。
public static int UserPageItemCount
{
get
{
if (_userPageItemCount == 0)
{
_userPageItemCount = WebConfigurationManager.AppSettings["UserPageItemCount"] != null ?
Convert.ToInt16(WebConfigurationManager.AppSettings["UserPageItemCount"]) : 5;
}
return _userPageItemCount;
}
set
{
_userPageItemCount = value;
}
}再進(jìn)行綁定：
_kernel.Bind().To ();
三、控制器部分
我們需要兩個頁面，一個主頁面Index，一個負(fù)責(zé)局部刷新的部分視圖 UserTable
下面是主要的方法，主要邏輯都在在倉庫中處理了。
[Authorize]
public class UserManagerController : Controller
{
///
/// The _repository
///
private readonly IUsersRepository _repository;
///
/// Initializes a new instance of the
/// The i repository.
public UserManagerController(IUsersRepository iRepository)
{
_repository = iRepository;
}
///
/// Indexes the specified page index.
///
/// Index of the page.
/// ActionResult.
public ActionResult Index(int pageIndex=1)
{
ViewBag.DisplayPage = _repository.DisplayPage;
pageIndex = HandlePageindex(pageIndex);
//支持地址欄直接分頁
ViewBag.CurrentPage = pageIndex;
return View();
}
///
/// Users table. 分頁模塊
///
/// Index of the page.
/// The order.
/// The filter str.
/// ActionResult.
public ActionResult UserTable(int pageIndex = 1, int order = 0, string filter = "")
{
pageIndex = HandlePageindex(pageIndex);
var skip = (pageIndex - 1) * _repository.PageItemCount;
var users = _repository.Find(order,filter, skip, _repository.PageItemCount);
//總用戶數(shù)
ViewBag.TotalUser = _repository.TotalItem;
//總頁數(shù)
ViewBag.TotalPageCount = _repository.TotoalPage; ;
return PartialView(users);
}
///
/// 處理頁數(shù) 防止過大或過小
///
///
/// 四、視圖部分Html jquery
1.Index.cshtml
管理用戶
@Html.Action("UserTable",new{pageIndex=ViewBag.CurrentPage})
Add new User
@{ Html.RenderAction("Create","UserManager"); }
@section Scripts { @Scripts.Render("~/bundles/jqueryval") }
2.UserTable.cshtml,角色部分還未處理，這個表格更新之后，也會更新滿足條件的用戶數(shù)和新的總頁數(shù)，觸發(fā)Jpaginate重新分頁一次。
@model IEnumerable
@foreach (var item in Model) { 名稱 角色 } @item.UserName @Html.Raw(item.Role) @item.Email @Html.Raw("共"+ViewBag.TotalUser+"人") @*@ViewBag.TotalPageCount*@
3.腳本
其中用到的像checkall，infoShow 都是自己擴(kuò)展的一些簡單的方法，用于全選和提示。
$(function () {
var options = {
dataType: 'json',
success: processJson
};
pageagin($("#totoalpage").val());
//分頁
function pageagin(totalcount) {
$("#userpager").paginate({
count: totalcount,
start: $("#page").val(),
dispaly: $("#dispalypage").val(),
boder: false,
border_color: '#fff',//自己調(diào)整樣式。
text_color: 'black',
background_color: 'none',
border_hover_color: '#ccc',
text_hover_color: '#000',
background_hover_color: '#fff',
images: false,
mouse: 'press',
onChange: function (page) { //翻頁
paging(page);
$("#currentpage").val(page);
}
});
}
//分頁更新
function paging(page) {
$.post("/Users/UserTable", { pageIndex: page, order: $("#userpart").attr("data-order"), filter: $.trim($("#usersearch").val()) }, function (data) {
$("#userpart").html(data);
});
}
//排序
$("#usersort").live("click",function () {
$("#userpart").triggerdataOrder();
paging( $("#currentpage").val());
});
//搜索
$("#usersearch").keyup(function() {
paging($("#currentpage").val());
pageagin($("#totoalpage").val());
});
//處理form
$("#userForm").submit(function () {
$(this).ajaxSubmit(options);
return false;
});
function processJson(data) {
if (data == 1) {
location.reload();
} else {
alert("添加失敗");
}
}
//高亮
$("#unav li:eq(0)").addClass("active");
$("#adnav li:eq(2)").addClass("active");
//全選/全不選
$("#allcheck").checkall($("#usertable tbody input[type='checkbox']"));
//刪除用戶
$("#deluser").click(function () {
var checks = $("#usertable tbody input[type='checkbox']:checked");
var lens = checks.length;
if (lens == 0) {
$.infoShow("未選擇刪除對象",0);
return false;
}
if (confirm("確定要刪除所選中用戶？")) {
for (var i = 0; i < lens; i++) {
var $chek = checks.eq(i);
var id = $chek.attr("data-id");
var tr = $chek.parent().parent();
$.post("Users/DeleteUser", { id: id }, function (data) {
if (data == 1) {
tr.fadeOut();
$.infoShow("刪除成功", 1);
} else {
$.infoShow("刪除失敗", 0);
}
});
}
}
return true;
});
// 增加用戶
$("#adduserbt").click(function() {
$(".modal-header").show();
});
})到這里就是全部的代碼,供大家和自己參考。
再給大家看兩個效果圖，一個是kendoui的grid，一個是Angular做的分頁。后面有機(jī)會給大家介紹。
Kendo- Grid
Kendo和MVC框架融合度比較高，它的核心代碼如下：
@model IEnumerable@(Html.Kendo().Grid(Model) .Name("Grid") .Columns(columns => { columns.Bound(p => p.ProductID).Groupable(false); columns.Bound(p => p.ProductName); columns.Bound(p => p.UnitPrice); columns.Bound(p => p.UnitsInStock); }) .Pageable() .Sortable() .Scrollable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) ) )
AngularJs 核心還是調(diào)用封裝好的API函數(shù)，相當(dāng)于上面的倉庫中的方法，然后通過模型綁定。
總結(jié)一下：自己實(shí)現(xiàn)代碼量比較多，功能不全，有重復(fù)造輪子的感覺，但可以較好的控制，基本夠用；kendo的方式感覺高大全，用熟了開發(fā)速度快。就是多一些引用，且需要擔(dān)心kendoui和其他的ui框架會有沖突。前端MVVM的方式我了解還不夠深，感覺前端腳本的代碼量也蠻多，效果不錯。但生成的html代碼很少。上面這個表格。chrome F12或者右鍵查看源碼都是下面這樣子的：
主要的就一個p
自我保護(hù)倒是蠻好，也就是SEO可能有問題。應(yīng)該還有更好的方式，猿友們指點(diǎn)指點(diǎn)。
Name of the blog (Admin)
PS：這個東西沒什么難度，邏輯都在倉庫中，要源碼的同學(xué)我后續(xù)分離出來了再貼出來。當(dāng)然這個又很多方式，我也不是要秀什么框架，但我目前項(xiàng)目的需求是要這么分開的。一個控制器是可用解決所有問題，但我其他模型也要分頁又要便于測試難道我都寫在控制器中嗎？
感謝各位的閱讀！看完上述內(nèi)容，你們對Asp.Net MVC怎么實(shí)現(xiàn)分頁、檢索、排序的功能大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞標(biāo)題：Asp.NetMVC怎么實(shí)現(xiàn)分頁、檢索、排序的功能
URL標(biāo)題：http://www.ef60e0e.cn/article/gsepci.html
