Dans un système, il existe souvent de nombreux éléments de menu, chaque élément de menu correspond à une page. Généralement, les utilisateurs n'ont qu'à utiliser certaines fonctions couramment utilisées. Si vous devez aller dans les menus à chaque niveau pour trouver des fonctions correspondantes, il est en effet un peu lourd. Surtout quand il existe de nombreux menus et que les clients ne connaissent pas le système dans son ensemble, s'il existe un module favoris similaire à un navigateur, connectez et enregistrez des menus couramment utilisés, et trouvez la page correspondante de la page d'accueil de ces favoris à chaque fois, ce sera vraiment une économie de travail et très pratique. Cet essai présente l'idée de mettre en œuvre ces favoris dans le cadre de développement bootstrap basé sur Metronic.
1. Effet de traitement d'interface des favoris du système
Afin de réaliser cette fonction favoris, nous devons également placer une entrée du module Favoris dans l'emplacement évident de la page système, ainsi que la fonction qui peut être ajoutée aux favoris correspondants pour chaque page.
Après la comparaison, nous avons placé ces fonctions d'entrée près du titre de la page, afin que nous puissions les collecter facilement et rapidement, comme indiqué dans l'effet suivant.
Lorsque nous cliquons sur le bouton [Ajouter aux favoris] de la page, nous ajoutons le titre et la connexion correspondants à l'enregistrement des favoris.
Dans la fonction [Afficher les favoris], nous pouvons afficher les liens de page que nous avons ajoutés, cliquez sur l'un des enregistrements pour entrer rapidement la page correspondante, ce qui réalise notre besoin d'entrer rapidement le module fonctionnel.
La chose la plus importante ici est de trier les enregistrements des favoris, en déplaçant les enregistrements vers le haut ou vers le bas afin qu'ils puissent se conformer au traitement de l'interface.
2. Le processus de mise en œuvre des favoris du système
Après avoir compris l'effet d'interface ci-dessus de la fonction favoris de la page système, nous devons comprendre son processus de mise en œuvre spécifique. Tout d'abord, nous devons concevoir un tableau pour stocker des informations correspondant aux favoris, le titre de la page, l'adresse de la page, le tri et d'autres informations.
L'interface de conception de la base de données est illustrée ci-dessous.
Nous avons remarqué que les enregistrements de tri sont stockés au format décimal, et nous les trierons par une valeur avec longitude, de sorte que lorsque nous pouvons nous ajuster, nous pouvons modifier la taille entre eux.
Utilisez la base de données d'outils de génération de code2Sharp pour générer rapidement le code et le contrôleur Web liés sous-jacents et afficher le code, puis l'intégrer dans le cadre, afin que nous puissions avoir l'interface de l'ensemble du module et traiter le code.
Étant donné qu'en général, notre interface d'affichage et d'édition de données est relativement standard et que les exigences pour l'affichage d'entrée des favoris sont différentes, nous devons ajouter une vue à l'interface de liste pour afficher une interface d'entrée simple, comme le montre la figure.
Cette interface contient le traitement du mouvement des enregistrements, y compris vers le haut ou vers le bas.
Comme mentionné précédemment, notre tri des enregistrements est principalement réalisé via le champ SEQ de la décimale de type.
Lorsque la classe d'entité est initialisée, nous attribuons la valeur triée à l'horodatage UNIX de l'heure actuelle.
Le code de fonction DateTimeToint ci-dessus est illustré ci-dessous, qui est également une méthode de traitement couramment utilisée.
/// <summary> /// Interface temporelle prolongée, peut renvoyer la valeur de mise en forme /// </summary> /// <param name = "Time"> </ param> /// <retourne> </peeps> public static int DatetimeToint (this datetime time) {system.datetime starttime = timezone.currenttimezone.tolocaltime (new System.DateTile (1960, 1)); return (int) (heure - starttime) .totalseconds; }Afin de réaliser un mouvement d'enregistrement, nous devons implémenter un traitement logique en mouvement à la couche BLL du service pour faciliter l'appel dans le contrôleur.
/// <summary> /// Update Up ou Down Order /// </summary> /// <param name = "ID"> ID enregistré </ param> /// <param name = "Movup"> Déplacer ou déplacer vers le bas, TRUE OUT TOP </param> /// <retourne> </ Returns> public bool updown (String id, bool moveup)
Le code de fonction implémenté est le suivant
/// <summary> /// Update Up Or Order /// </summary> /// <param name = "ID"> Record ID </ param> /// <param name = "Movup"> Up OU MOTION UP, true </ param> /// <retourne> </ Returns> public bool updown (String id, bool movup) {// set the Order Rules Bool isDesprend = true; BOOL Result = false; WebFavoriteInfo info = findById (id); if (info! = null) {// Construisez la chaîne de requête condition = ""; if (isDescending) {condition = string.format ("seq {0} {1}", moveup? ">": "<", info.seq); } else {condition = string.format ("seq {0} {1}", moveup? "<": ">", info.seq); } var list = basase.find (condition); décimal newSeq = 0m; switch (list.Count) {case 0: newSeq = info.seq; // il est déjà en haut ou en bas, l'ordre reste inchangé par défaut; Cas 1: // Il y a un enregistrement au-dessus ou ci-dessous si (isDescending) {newSeq = MovUp? (list [0] .seq + 1m): (list [0] .seq - 1m); } else {newSeq =! MovUp? (list [0] .seq + 1m): (list [0] .seq - 1m); } casser; cas 2: // la zone centrale, prenez la valeur moyenne newSeq = (list [0] .seq + list [1] .seq) / 2m; casser; par défaut: // Le cas où plus de deux est si (MovUp) {newSeq = (list [list.count - 2] .seq + list [list.count - 1] .seq) / 2m; } else {newSeq = (list [0] .seq + list [1] .seq) / 2m; } casser; } // L'ordre de modification unifié info.seq = newSeq; result = update (info, info.id); } Retour Résultat;}De cette façon, nous encapsulons en outre cette interface de couche BLL dans le contrôleur MVC pour faciliter le traitement des appels AJAX à l'extrémité avant de la page. Le code d'encapsulation est le suivant.
/// <summary> //// Move Record /// </summary> /// <param name = "ID"> ID Record </ param> //// <param name = "up"> La mise à jour est vraie, sinon il est faux </ param> /// <retourne> </peeturns> [HTTPPOST] public ActionResult (String id, bool up) {CommonResult Le résultat = new CommonResult (); if (! string.isnullorempty (id)) {try {result.success = bllfactory <boup-webfavorite> .instance.updown (id, up); } catch (exception ex) {result.errorMessage = ex.Message; }} return tojsonContent (résultat);}De cette façon, nous pouvons appeler cette méthode dans la vue d'interface à l'extrémité avant de la page.
Tout d'abord, générez du code HTML frontal via JS Binding, comme indiqué ci-dessous.
$ ("# grid_body"). html (""); $. Chaque (data.Rows, fonction (i, item) {var tr = "<tr>"; tr + = "<td> <a class = 'btn btn-sm bleu' href = '" + item.url + "'>" + item.Title + "</a> </td>"; tr + " "<a href = 'javascript:;' btn-sm bleu 'onclick = / "down ('" + item.id + "') /" title =' sew down '> <span class =' gllyphicon Glyphicon-arrow-down '> </span> </a> "; tr + =" </td> "; tr + =" </ tr> "; $ (" # grid_body ").Ensuite, traitez-le via la fonction haut ou bas et déplacez la position vers le haut ou vers le bas.
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 ("se déplacer avec succès"); refrest FAUX }; $ .post (updownUrl, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {showtips ("déménager avec succès"); refresh (); // rafraîchir les données de la page} else {showTips (data.errorMessage);}});}Cela implémente l'ordre de mouvement dont nous avons besoin. De plus, lors de l'ajout, nous déterminons si l'utilisateur correspondant a ajouté une URL. S'il existe, il n'est pas nécessaire de l'ajouter à plusieurs reprises. Le front-end doit seulement l'appeler via Ajax puis y répondre.
Grâce à la mise en œuvre de ces codes, nous pouvons rapidement gérer les favoris et entrer rapidement à l'utilisateur, offrant une expérience plus amicale.
Ce qui précède est la fonction préférée du lien de page basé sur Bootstrap introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!