基于Metronic的Bootstrap开发框架经验总括(12)–页面链接收藏夹功用的落实

在一个系统内部,往往有成百上千菜单系列,每个菜单项对应一个页面,一般用户只需要选取一些常用的遵守,假设老是都亟需去挨家挨户层次的菜单里面去找对应的效能,这的确有点繁琐。特别是在菜单繁多,而客户又对系统全体不熟谙的景色下,假如有一个看似浏览器的贮藏夹模块,把有些常用的菜谱连接保存起来,每一趟从那多少个收藏夹主页去找对应的页面,这样真的是方便省力,分外便利。本篇随笔就是介绍在依照Metronic的Bootstrap开发框架之中实现这么些收藏夹的思路。

1、系统的收藏夹界面处理效果

为了促成这多少个收藏夹效用,咱们也需要在系统页面的明确地方处停放一个窖藏夹模块的入口,以及可以为各种页面添加到对应收藏夹的效应。
透过相比较,我们把那么些进口功用放在页面标题的邻座,这样便于开展快捷展开收藏夹,如下效果所示。

图片 1

当我们在页面上单击【添加到收藏夹】按钮,我们就把相应的页面标题和连接出席到收藏夹记录里面了。

图片 2

在【查看收藏夹】效率里面,我们得以显得我们投入的页面链接,单击其中某个记录,可以急迅进入对应的页面,这样就落实了大家很快进入功能模块的需要了。

图片 3

这之中最好关键的就是对储藏夹记录的排序处理,向上或者向下活动记录,使之力所能及适合界面的拍卖。

2、系统收藏夹的实现过程

问询了地点关于系统页面的收藏夹功效界面效果后,我们需要了解它的求实实现过程,首先我们需要规划一个表用来存储收藏夹对应的音信,页面标题、页面地址、排序等音信。
数据库设计界面如下所示。

图片 4

我们注意到排序记录用Decimal格式举办仓储,我们经过一个有经度的数值举办排序,这样大家可以调整的时候,修改它们之间的轻重就可以了。
动用代码生成工具Database2Sharp急忙生成底层的有关代码和Web的控制器和视图代码,然后整合到框架之中,这样大家就足以有所任何模块的界面和拍卖代码了。

图片 5

鉴于一般景观下,大家对数码的来得编辑界面是对立规范的,对于收藏夹的进口显示的需要不太相同,大家需要参考列表界面扩大一个视图,用来显示简单的入口界面,如图介绍所示。

图片 6

这多少个界面里面含有了对记录的运动处理,包括发展或者向下。
面前介绍了,我们对记录的排序首要通过decimal类型的Seq字段实现的。
咱俩在实业类起首化的时候,给排序的赋值为最近日子的Unix时间戳。

图片 7

里头地点的Date提姆(Tim)eToInt函数代码如下所示,也是我们常用的处理情势。

        /// <summary>
        /// 扩展时间接口,可以返回整形数值
        /// </summary>
        /// <param name="time"></param>
        /// <returns></returns>
        public static int DateTimeToInt(this DateTime time)
        {
            System.DateTime startTime = TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1));
            return (int)(time - startTime).TotalSeconds;
        }

为了落实记录的位移,大家需要在业务BLL层实现一个活动的逻辑处理,方便在控制器里面调用。

        /// <summary>
        /// 更新向上或者向下的顺序
        /// </summary>
        /// <param name="id">记录的ID</param>
        /// <param name="moveUp">往上,还是往下移动,往上则为true</param>
        /// <returns></returns>
        public bool UpDown(string id, bool moveUp)

贯彻的函数代码如下所示

/// <summary>
/// 更新向上或者向下的顺序
/// </summary>
/// <param name="id">记录的ID</param>
/// <param name="moveUp">往上,还是往下移动,往上则为true</param>
/// <returns></returns>
public bool UpDown(string id, bool moveUp)
{
    //设置排序的规则
    bool IsDescending = true;

    bool result = false;
    WebFavoriteInfo info = FindByID(id);
    if (info != null)
    {
        //构建查询的条件
        string condition = "";
        if (IsDescending)
        {
            condition = string.Format("Seq {0} {1}", moveUp ? ">" : "<", info.Seq);
        }
        else
        {
            condition = string.Format("Seq {0} {1}", moveUp ? "<" : ">", info.Seq);
        }

        var list = baseDal.Find(condition);
        decimal newSeq = 0M;
        switch (list.Count)
        {
            case 0:
                newSeq = info.Seq;//已在顶部或者底部,顺序默认不变
                break;

            case 1:
                //上面或者下面有一个记录
                if (IsDescending)
                {
                    newSeq = moveUp ? (list[0].Seq + 1M) : (list[0].Seq - 1M);
                }
                else
                {
                    newSeq = !moveUp ? (list[0].Seq + 1M) : (list[0].Seq - 1M);
                }
                break;

            case 2:
                //中间区域,取平均值
                newSeq = (list[0].Seq + list[1].Seq) / 2M;
                break;

            default:
                //多于两个的情况
                if (moveUp)
                {
                    newSeq = (list[list.Count - 2].Seq + list[list.Count - 1].Seq) / 2M;
                }
                else
                {
                    newSeq = (list[0].Seq + list[1].Seq) / 2M;
                }
                break;
        }

        //统一修改顺序
        info.Seq = newSeq;
        result = Update(info, info.ID);
    }

    return result;
}

这么我们在MVC的控制器里面,对那一个BLL层接口实行更加封装,方便页面前端举办Ajax调用处理即可,封装代码如下所示。

/// <summary>
/// 移动记录
/// </summary>
/// <param name="id">记录ID</param>
/// <param name="up">向上为true,否则为false</param>
/// <returns></returns>
[HttpPost]
public ActionResult UpDown(string id, bool up)
{
    CommonResult result = new CommonResult();
    if(!string.IsNullOrEmpty(id))
    {
        try
        {
            result.Success = BLLFactory<WebFavorite>.Instance.UpDown(id, up);
        }
        catch(Exception ex)
        {
            result.ErrorMessage = ex.Message;
        }
    }
    return ToJsonContent(result);
}

 

这样大家在页面前端的界面视图里面,就足以对那一个措施开展调用了。
先是在经过JS绑定生成前端HTML代码,如下所示。

$("#grid_body").html("");

$.each(data.rows, function (i, item) {
    var tr = "<tr>";
    tr += "<td><a class='btn btn-sm blue' href='" + item.Url + "'>" + item.Title + "</a></td>";

    tr += "<td>";
    tr += "<a href='javascript:;' class='btn btn-sm green' onclick=\"Up('" + item.ID + "')\" title='向上移动'></a>";
    tr += "<a href='javascript:;' class='btn btn-sm blue' onclick=\"Down('" + item.ID + "')\" title='向下移动'></a>";
    tr += "</td>";

    tr += "</tr>";
    $("#grid_body").append(tr);
});

 

然后通过Up或者Down函数举办拍卖,向上或者向下活动地点。

var UpDownUrl = "/WebFavorite/UpDown"
function Up(id) {
    var postData = { id: id, up: true };
    $.post(UpDownUrl, postData, function (json) {
        var data = $.parseJSON(json);
        if (data.Success) {
            showTips("向上移动成功");
            Refresh();//刷新页面数据
        }
        else {
            showTips(data.ErrorMessage);
        }
    });
}
function Down(id) {
    var postData = { id: id, up: false };
    $.post(UpDownUrl, postData, function (json) {
        var data = $.parseJSON(json);
        if (data.Success) {
            showTips("向下移动成功");
            Refresh();//刷新页面数据
        }
        else {
            showTips(data.ErrorMessage);
        }
    });
}

 

诸如此类就贯彻了我们所急需的移动顺序的操作了,另外加上的时候,我们判断对应用户是否有添加URL了,假若存在则不需要重新添加即可,前端只需要通过Ajax调用,然后响应处理即可。
经过那么些代码的贯彻,我们可以实现收藏夹的迅速管理和高速入口,为用户的采取提供了更加和睦的感受。

相关文章