基为Metronic的Bootstrap开发框架的经验总结(12) – 页面链接收藏夹的贯彻

于一个体系里,往往时有发生成千上万食谱种类,每个菜单项对应一个页面,一般用户只需要以一些常用之功能,如果每次都需去挨家挨户层次之菜单中去寻觅对应之功力,那的确发生硌繁琐。特别是在菜单繁多,而客户同时针对系总体不熟识的情景下,如果发生一个近似浏览器的储藏夹模块,把有常用的菜系连接保存起来,每次从夫收藏夹主页去追寻对应之页面,那样真的是方便省力,非常有利于。本篇随笔就是介绍以依据Metronic的Bootstrap开发框架中实现这个收藏夹的笔触。

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

为了兑现这收藏夹功能,我们啊急需以系统页面的明明位置处在放一个窖藏夹模块的入口,以及可呢每个页面上加到相应收藏夹的功用。
通过比照,我们管这些进口功能在页面标题的附近,这样方便进行高效拓展收藏夹,如下效果所示。

当我们在页面及单击【添加到收藏夹】按钮,我们就是拿相应之页面标题和连接在到收藏夹记录中了。

在【查看收藏夹】功能间,我们得来得我们投入的页面链接,单击其中有记录,可以便捷进入对应之页面,这样便贯彻了咱们很快进入功能模块的急需了。

当时其间最好根本的即使是本着馆藏夹记录的排序处理,向上或朝下走记录,使的会契合界面的处理。

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

叩问了上面关于系统页面的藏夹功能界面效果后,我们得了解它们的现实贯彻过程,首先我们要统筹一个表用来囤积收藏夹对应的音讯,页面标题、页面地址、排序等消息。
数据库设计界面如下所示。

咱注意到排序记录用Decimal格式进行仓储,我们透过一个有经度的数值进行排序,这样咱们得以调的时,修改其之间的轻重缓急就好了。
采用代码生成工具Database2Sharp快速生成底层的连锁代码和Web的控制器和视图代码,然后做至框架中,这样我们便足以拥有任何模块的界面和拍卖代码了。

鉴于一般情形下,我们本着数码的展示编辑界面是对立规范的,对于藏夹的入口展示的需要不顶雷同,我们要参考列表界面增加一个视图,用来展示简单的入口界面,如图介绍所示。

斯界面里富含了对记录的移动处理,包括发展或朝下。
前方介绍了,我们针对记录的排序主要透过decimal类型的Seq字段实现之。
咱以实业类初始化的时刻,给排序的赋值为当下日子之Unix时间戳。

内部者的DateTimeToInt函数代码如下所示,也是我们经常因此之处理方式。

        /// <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调用,然后响应处理即可。
经这些代码的贯彻,我们好实现藏夹的快捷管理和高效入口,为用户之采取提供了一发协调的心得。

相关文章