Metronic framework based on Bootstrap to implement page-Link favorites _javascript Skills

In a system, there are often a lot of menu items, each menu item corresponding to a page, the general user only need to use some commonly used functions, if each need to go to all levels of the menu to find the corresponding function, it is a bit cumbersome. Especially in a wide range of menus, and the customer is not familiar with the system as a whole, if there is a browser-like Favorites module, a number of commonly used menu connections to save, each time from this favorite home page to find the corresponding pages, it is really easy and labor-saving, very convenient. This essay is an introduction to the bootstrap development framework based on Metronic to realize this collection of ideas.

1, the system's Favorites interface processing effect

To implement this Favorites feature, we also need to place a Favorites module entry in the obvious position of the system page, as well as the ability to add each page to the corresponding Favorites folder.

In contrast, we put these entry features near the title of the page, which makes it easy to do favorites quickly, as shown in the following effects.

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" feature, we can show the page we joined the link, click on one of the records, you can quickly enter the corresponding page, so that we realize the rapid access to the functional modules of the requirements.

This is the most important thing is the collection of records sorted processing, up or down to move records, so that it can meet the interface processing.

2, the System favorites the realization process

Understanding the above about the System page Favorites function interface effect, we need to understand its specific implementation process, first we need to design a table to store the corresponding information, page title, page address, sorting and other information.

The database design interface is shown below.

We notice that the sort records are stored in the decimal format and we sort through a longitude value so that we can adjust the size between them.

Use the Code generation tool Database2sharp quickly generate the underlying code and the controller and view code for the Web, and then integrate it into the framework so that we can have the entire module interface and process code.

Because in general, our data display editing interface is relatively standard, for the collection of the entrance display of the requirements are not the same, we need to refer to the list interface to add a view to show a simple interface, as shown in the figure.

This interface contains the movement of records, both up and down.

As we've described earlier, our sort of records is primarily implemented by the Decimal type SEQ field.

When the entity class initializes, we give the sorted assignment the Unix timestamp of the current time.

The above Datetimetoint function code is shown below, which is also our common way of handling.

  <summary>
    ///Extended Time interface, you can return the
    ///value </summary>
    ///<param name= "Times" ></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 achieve the record movement, we need to implement a mobile logic processing in the business BLL layer, which is convenient to call in the controller.

<summary>
    ///update up or down order
    ///</summary>
    ///<param name= "id" > Record id</param >
    ///<param name= "moveUp" > upward, or downward movement, up to true</param>///<returns></returns
    > Public
    bool UpDown (string ID, bool moveUp)

The function code that is implemented is shown below

<summary>///update up or down order///</summary>///<param name= "id" > Record id</param>///-<param Nam E= "MoveUp" > Move up or down, up to true</param>///<returns></returns> public bool UpDown (string ID, bool
  MOVEUP) {//Set ordered rule bool isdescending = true;
  BOOL result = FALSE;
  Webfavoriteinfo info = FindByID (ID);
    if (info!= null) {//Build query condition 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;//is already at the top or bottom, and the order defaults to the break; Case 1://above or below there is a record 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://Intermediate area, average newseq = (list[0]. Seq + list[1].
        SEQ)/2M;
      Break Default://More than two cases 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 are in the MVC controller, the BLL layer interface for further encapsulation, convenient page front-end Ajax call processing can be, the package code as shown below.

<summary>
///Mobile Records
///</summary>
///<param name= "IDs" > Records id</param>
/// <param name= "Up" > True, otherwise 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);
}

So we can call this method in the interface view at the front of the page.

First the front-end HTML code is generated through the 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 clas s= ' Glyphicon glyphicon-arrow-down ' ></span></a> ';
  TR = "</td>";
  TR = "</tr>";
  $ ("#grid_body"). Append (tr);
});

It is then processed by the up or down function to 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 ()//Flush page Data
    }
    else {
      showtips. 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 ()//Flush page Data
    }
    else {
      showtips. errormessage);
    }
  );

In this way we need to move the order of operation, and added, we determine whether the corresponding user has added a URL, if there is no need to repeat the addition, the front-end only need to call through Ajax, and then respond to processing can be.

Through the implementation of these codes, we can realize the fast management and quick access of favorites, and provide a more friendly experience for users.

The above is a small set to introduce the bootstrap based on the Metronic framework to achieve the page link favorites function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!