In a system, there are often many menu items, each menu item corresponds to a page. Generally, users only need to use some commonly used functions. If you need to go to menus at each level to find corresponding functions, it is indeed a bit cumbersome. Especially when there are many menus and customers are not familiar with the system as a whole, if there is a favorites module similar to a browser, connect and save some commonly used menus, and find the corresponding page from the homepage of this favorites every time, it will be really labor-saving and very convenient. This essay introduces the idea of implementing this favorites in the Metronic-based Bootstrap development framework.
1. System favorites interface processing effect
In order to realize this favorites function, we also need to place an entrance to the favorites module in the obvious location of the system page, as well as the function that can be added to the corresponding favorites for each page.
After comparison, we placed these entry functions near the page title, so that we can easily and quickly collect them, as shown in the following effect.
When we click the [Add to Favorites] button on the page, we add the corresponding page title and connection to the favorites record.
In the [View Favorites] function, we can display the page links we have added, click one of the records to quickly enter the corresponding page, which realizes our need to quickly enter the functional module.
The most important thing here is to sort the favorites records, moving the records up or down so that they can conform to the processing of the interface.
2. The implementation process of system favorites
After understanding the above interface effect of the favorites function of the system page, we need to understand its specific implementation process. First, we need to design a table to store information corresponding to favorites, page title, page address, sorting and other information.
The database design interface is shown below.
We noticed that the sorting records are stored in Decimal format, and we sort them by a value with longitude, so that when we can adjust, we can modify the size between them.
Use the code generation tool Database2Sharp to quickly generate the underlying related code and Web controller and view code, and then integrate it into the framework, so that we can have the interface of the entire module and process the code.
Since in general, our data display and editing interface is relatively standard, and the requirements for the entrance display of favorites are different, we need to add a view to the list interface to display a simple entry interface, as shown in the figure.
This interface contains the movement processing of records, including upward or downward.
As mentioned earlier, our sorting of records is mainly achieved through the Seq field of type decimal.
When the entity class is initialized, we assign the sorted value to the Unix timestamp of the current time.
The above DateTimeToInt function code is shown below, which is also our commonly used processing method.
/// <summary> /// Extended time interface, can return the shaping value /// </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; }In order to realize record movement, we need to implement a moving logical processing at the service BLL layer to facilitate call in the controller.
/// <summary> /// Update up or down order /// </summary> /// <param name="id">Recorded ID</param> /// <param name="moveUp">Move up or move down, true on top</param> /// <returns></returns> public bool UpDown(string id, bool moveUp)
The implemented function code is as follows
/// <summary>/// Update up or down order /// </summary>/// <param name="id">Record ID</param>/// <param name="moveUp">Up or move up, true</param>/// <returns></returns>public bool UpDown(string id, bool moveUp){ //Set the ordering rules bool IsDescending = true; bool result = false; WebFavoriteInfo info = FindByID(id); if (info != null) { //Construct the query 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;//It is already at the top or bottom, the order remains unchanged by default; case 1: //There is a record above or below 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: //The middle area, take the average value newSeq = (list[0].Seq + list[1].Seq) / 2M; break; default: //The case where more than two is if (moveUp) { newSeq = (list[list.Count - 2].Seq + list[list.Count - 1].Seq) / 2M; } else { newSeq = (list[0].Seq + list[1].Seq) / 2M; } break; } //Unified modification order info.Seq = newSeq; result = Update(info, info.ID); } return result;}In this way, we further encapsulate this BLL layer interface in the MVC controller to facilitate Ajax call processing on the front end of the page. The encapsulation code is as follows.
/// <summary>//// Move record/// </summary>/// <param name="id">Record ID</param>//// <param name="up">Update is true, otherwise it is 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);}In this way, we can call this method in the interface view at the front end of the page.
First, generate front-end HTML code through JS binding, as shown below.
$("#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='move up'><span class='glyphicon glyphicon-arrow-up icon-state-danger'></span></a>"; tr += "<a href='javascript:;' class='btn btn-sm blue' onclick=/"Down('" + item.ID + "')/" title='move down'><span class='glyphicon glyphicon-arrow-down'></span></a>"; tr += "</td>"; tr += "</tr>"; $("#grid_body").append(tr);});Then process it through the Up or Down function, and move the position up or 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("Move up successfully"); Refresh();//Refresh page data} 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("Move down successfully"); Refresh();//Refresh page data} else { showTips(data.ErrorMessage); } });}This implements the movement order we need. In addition, when adding, we determine whether the corresponding user has added a URL. If it exists, there is no need to add it repeatedly. The front-end only needs to call it through Ajax and then respond to it.
Through the implementation of these codes, we can quickly manage favorites and quickly enter the user, providing a more friendly experience.
The above is the page link favorite function based on Bootstrap introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!