EF+MVC+Bootstrap 项目实践 Day11

最新推荐文章于 2025-09-06 08:01:57 发布

weixin_30663391

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 测试数据库 ViewUI

原文链接：http://www.cnblogs.com/liuyouying/p/5060249.html

本文详细阐述了如何使用JavaScript根据点击事件判断页面视图，并进行相应的提示显示和DOM操作。同时，介绍了数据展示的方法，包括手动创建数据集和从数据库获取数据，并通过分页组件展示数据。此外，提供了数据分页的实现方式，以及样式调整以提升用户体验。

继续完成首页跳转判断

一、用js根据点击判断哪个视图并显示相应提示

如果是首页，就显示首页的提示并去掉breadcrumb导航

如果是具体的页面，就根据DOM判断路径并显示，还要把这一级的折叠展开并把当前视图的a标签加上.active

左侧菜单会闪一下，因为是先载入页面，再判断展开和选中的。这样效果不怎么好，如果是iframe之类，左侧是不动的，不用人为去判断是在哪一级。

function LoadMenuTip(){
    $("#MenuDiv a[title]").each(function(){
        if(window.location.href.indexOf($(this).attr("href")) > 0){
            var $this = $(this);
            var text = $this.text();
            $(document).attr('title', text); //改变标题栏
            $this.parent().addClass("active").parents(".panel-collapse").addClass("in"); //变为选中
            $("#MenuTipDiv .page-title span").html(text);
            $("#MenuTipDiv .page-title small").html($this.attr("title"));
            $("#MenuTipDiv .breadcrumb li:eq(0) span").html("管理首页");
            if($this.parent().is("h4")) $("#MenuTipDiv .breadcrumb li:gt(0)").remove();
            else{
                $("#MenuTipDiv .breadcrumb li:eq(1) span").html($this.parents(".panel-default").find(".panel-heading a").text());
                $("#MenuTipDiv .breadcrumb li:eq(2) span").html(text);
            }
            return false;
        }
    });
}

二、展示数据

1、先手动弄一个数据，再想办法去数据库取。

源码有分页公共方法

/// <summary>
    /// 分页数据集合，用于后端返回分页好的集合及前端视图分页控件绑定
    /// </summary>
    /// <typeparam name="T"></typeparam>
    public class PagedList<T> : List<T>, IPagedList
    {
        public PagedList(IList<T> items, int pageIndex, int pageSize)
        {
            PageSize = pageSize;
            TotalItemCount = items.Count;
            CurrentPageIndex = pageIndex;
            for(int i = StartRecordIndex - 1; i < EndRecordIndex; i++){
                Add(items[i]);
            }
        }

        public PagedList(IEnumerable<T> items, int pageIndex, int pageSize, int totalItemCount)
        {
            AddRange(items);
            TotalItemCount = totalItemCount;
            CurrentPageIndex = pageIndex;
            PageSize = pageSize;
        }

        public int ExtraCount{get;set;}
        public int TotalPageCount => (int) Math.Ceiling(TotalItemCount/(double) PageSize);
        public int StartRecordIndex => (CurrentPageIndex - 1)*PageSize + 1;
        public int EndRecordIndex => TotalItemCount > CurrentPageIndex*PageSize ? CurrentPageIndex*PageSize : TotalItemCount;
        public int CurrentPageIndex{get;set;}
        public int PageSize{get;set;}
        public int TotalItemCount{get;set;}
    }
    public static class PageLinqExtensions
    {
        public static PagedList<T> ToPagedList<T>(this IQueryable<T> allItems, int pageIndex, int pageSize)
        {
            if(pageIndex < 1) pageIndex = 1;
            var itemIndex = (pageIndex - 1)*pageSize;
            var pageOfItems = allItems.Skip(itemIndex).Take(pageSize).ToList();
            var totalItemCount = allItems.Count();
            return new PagedList<T>(pageOfItems, pageIndex, pageSize, totalItemCount);
        }
    }

具体还没去看，但非常精简，很不错

2、从数据库取数据

        public ActionResult Index()
        {
            var dbContext = new CrmEntities();
            IQueryable<Customer> queryList = dbContext.Customer;
            PagedList<Customer> customerPageList=queryList.OrderByDescending(x => x.ID).ToPagedList(1, 10);
            return View(customerPageList);
        }

先手动取第1页的10条，再细化分页

3、分页

原来这份源码用的分页组件是这个很出名的MvcPager，可以好好留着，以后项目还可以用。

.MvcPagerDiv{ clear:both; color:red; font-size:16px; font-weight:bold; margin:0 ; padding:0; display:block; }
.MvcPagerDiv>div{ text-align:center;}
.MvcPagerDiv a{ background:#eee; border:1px solid #ddd; color:#333; font-weight:normal; padding:3px 10px; }
.MvcPagerDiv span{ background-color:#ddd; color:#000; margin:5px; padding:4px 10px; }