Ajax据悉Metronic的Bootstrap开发框架经验总括(12)–页面链接收藏夹作用的实现

在一个序列之中,往往有诸多食谱体系,每个菜单项对应一个页面,一般用户只需要运用一些常用的效率,如果每一回都急需去各种层次的菜系里面去找对应的功力,这真的有点繁琐。特别是在菜单繁多,而客户又对系统全部不熟练的情况下,假使有一个近似浏览器的收藏夹模块,把一部分常用的菜系连接保存起来,每便从这么些收藏夹主页去找对应的页面,这样真的是近水楼台先得月省力,非常便宜。本篇随笔就是介绍在依据Metronic的Bootstrap开发框架之中实现这么些收藏夹的思绪。

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

为了兑现这几个收藏夹功效,我们也亟需在系统页面的明显地方处停放一个收藏夹模块的输入,以及可以为各种页面添加到对应收藏夹的听从。
因此比照,我们把这一个进口功效放在页面标题的隔壁,这样有利于举办急速举办收藏夹,如下效果所示。

Ajax 1

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

Ajax 2

在【查看收藏夹】效率里面,大家能够显示我们出席的页面链接,单击其中某个记录,可以很快进入对应的页面,这样就实现了我们连忙进入效率模块的要求了。

Ajax 3

这其中最好根本的就是对收藏夹记录的排序处理,向上或者向下活动记录,使之可以适合界面的处理。

2、系统收藏夹的贯彻过程

精晓了地点关于系统页面的贮藏夹效用界面效果后,大家需要精晓它的切切实实贯彻过程,首先我们需要统筹一个表用来储存收藏夹对应的音信,页面标题、页面地址、排序等音信。
数据库设计界面如下所示。

Ajax 4

我们注意到排序记录用Decimal格式举办仓储,我们由此一个有经度的数值举行排序,那样我们得以调整的时候,修改它们中间的深浅就足以了。
采用代码生成工具Database2Sharp连忙生成底层的相关代码和Web的控制器和视图代码,然后整合到框架之中,那样大家就可以具备所有模块的界面和处理代码了。

Ajax 5

是因为一般意况下,大家对数码的彰显编辑界面是对峙规范的,对于收藏夹的进口呈现的急需不太一致,大家需要参考列表界面扩张一个视图,用来呈现简单的入口界面,如图介绍所示。

Ajax 6

以此界面里面含有了对记录的位移处理,包括提高或者向下。
面前介绍了,我们对记录的排序紧要透过decimal类型的Seq字段实现的。
大家在实业类起初化的时候,给排序的赋值为当前时间的Unix时间戳。

Ajax 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调用,然后响应处理即可。
通过这么些代码的兑现,我们可以实现收藏夹的便捷管理和迅速入口,为用户的施用提供了进一步团结的体会。

相关文章