Αυτό το άρθρο είναι ένα άρθρο καθρέφτη της αυτόματης μετάφρασης, κάντε κλικ εδώ για να μεταβείτε στο αρχικό άρθρο.

Architect_Programmer_Code Δίκτυο Γεωργίας»Αρχιτέκτονας › Προγραμματισμός › .Net/Γ # › Το MVC εφαρμόζει μια γραμμή προόδου σχετικά με το χρόνο, χρησιμοποιεί τη γραμμή προόδου του jQuery ui...
Άποψη: 14302|Απάντηση: 0

[ASP.NET] Το MVC υλοποιεί μια γραμμή προόδου σχετικά με το χρόνο, χρησιμοποιώντας τη γραμμή προόδου του jQuery ui

[Αντιγραφή συνδέσμου]
Δημοσιεύτηκε στις 5/10/2015 4:05:23 μ.μ. | | | |
Σε ιστότοπους ηλεκτρονικού εμπορίου, η γραμμή προόδου χρησιμοποιείται μερικές φορές για να εμφανίσει οπτικά εάν ένας χρήστης είναι ληξιπρόθεσμος και την τρέχουσα κατάστασή του.

Σχεδιάστε ένα τέτοιο μοντέλο.

  1. public class User
  2.     {
  3.         public int Id { get; set; }
  4.         public string Name { get; set; }
  5.         public int CoopTime { get; set; }
  6.         public DateTime JoinTime { get; set; }
  7.     }
Αντιγραφή κώδικα
Τα παραπάνω είναι το χαρακτηριστικό διάρκειας συνεργασίας CoopTime και το χαρακτηριστικό jointime JoinTime είναι δύο χαρακτηριστικά που σχετίζονται στενά με την πρόοδο.

Στο HomeController, χρησιμοποιείται μια μέθοδος ενέργειας για την εμφάνιση της διεπαφής και μια μέθοδος ενέργειας χρησιμοποιείται για τη λήψη αιτημάτων GET από την προβολή και την επιστροφή δεδομένων json.
  1. public ActionResult Index()
  2.         {
  3.             return View();
  4.         }
  5.         public ActionResult GetStatus()
  6.         {
  7.             User user = new User()
  8.             {
  9.                 Id = 1,
  10.                 Name = "某某用户",
  11.                 CoopTime = 1,
  12.                 JoinTime = new DateTime(2014, 3, 20)
  13.             };
  14.             //判断合作是否已经到期
  15.             int result = DateTime.Compare(DateTime.Now, user.JoinTime.AddYears(user.CoopTime));
  16.             if (result <= 0) //当前时间比合作到期时间早，合作未到期
  17.             {
  18.                 //计算时间
  19.                 var pastDays = (DateTime.Now.Subtract(user.JoinTime)).TotalDays;
  20.                 var oneYearDays = (user.JoinTime.AddYears(user.CoopTime).Subtract(user.JoinTime)).TotalDays;
  21.                 var pastPercentage = (pastDays / oneYearDays) * 100;
  22.                 var dataSuccess = new { msg = true, p = pastPercentage };
  23.                 return Json(dataSuccess, JsonRequestBehavior.AllowGet);
  24.             }
  25.             else //当前时间比合作到期时间晚，合作已到期
  26.             {
  27.                 var dataFail = new { msg = false, p = 100 };
  28.                 return Json(dataFail, JsonRequestBehavior.AllowGet);
  29.             }
  30.         }
  31.     }
Αντιγραφή κώδικα
Πάνω,
● Χρησιμοποιήστε τη στατική μέθοδο του DateTime Compare για σύγκριση 2 φορές, η μία είναι η τρέχουσα ώρα, η άλλη είναι ο χρόνος σύνδεσης + η διάρκεια συνεργασίας, εάν το αποτέλεσμα είναι μικρότερο ή ίσο με 0, σημαίνει ότι δεν υπάρχει λήξη.
● Χρησιμοποιήστε τη στατική μέθοδο DateTime, Αφαίρεση, για να αφαιρέσετε 2 φορές.

Home/Index.cshtml, όταν φορτωθεί η σελίδα, στείλτε ένα ασύγχρονο αίτημα GET στον διακομιστή για να εμφανίσετε τα δεδομένα που επιστρέφονται στη γραμμή προόδου.
  1. <head>
  2.     <meta name="viewport" content="width=device-width" />
  3.     <title>Index</title>
  4.     <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  5.     <scrip{过滤}t src="~/scrip{过滤}ts/jquery-1.8.2.min.js"></scrip{过滤}t>
  6.     <scrip{过滤}t src="~/scrip{过滤}ts/jquery-ui-1.8.24.min.js"></scrip{过滤}t>
  7.     <scrip{过滤}t type="text/javascrip{过滤}t">
  8.         $(function () {
  9.             
  10.             $.getJSON('@Url.Action("GetStatus","Home")', function(data) {
  11.                 if (data.msg == true) {
  12.                     var temp = parseInt(data.p);
  13.                     $('#p').progressbar({
  14.                         value: temp
  15.                     });
  16.                 } else {
  17.                     $('#message').text('已到期');
  18.                     $('#p').progressbar({
  19.                         value: parseInt(data.p)
  20.                     });
  21.                 }
  22.             });
  23.         });
  24.     </scrip{过滤}t>
  25. </head>
  26. <body>
  27.     <div id="p">      
  28.     </div>
  29.     <div>
  30.         <span id="message"></span>
  31.     </div>
  32. </body>
Αντιγραφή κώδικα






Προηγούμενος:Χρησιμοποιήστε τη νέα έκδοση του Baidu Cloud για να επιταχύνετε την προστασία των ιστότοπων και να αποκλείσετε την πρόσβαση διευθύνσεων IP που δεν είναι CDN σε ιστότοπους
Επόμενος:Το SoftEther VPN Client είναι ένα πραγματικά δωρεάν λογισμικό VPN

σχετικές αναρτήσεις
Αποκήρυξη:
Όλο το λογισμικό, το υλικό προγραμματισμού ή τα άρθρα που δημοσιεύονται από το Code Farmer Network προορίζονται μόνο για μαθησιακούς και ερευνητικούς σκοπούς. Το παραπάνω περιεχόμενο δεν θα χρησιμοποιηθεί για εμπορικούς ή παράνομους σκοπούς, άλλως οι χρήστες θα υποστούν όλες τις συνέπειες. Οι πληροφορίες σε αυτόν τον ιστότοπο προέρχονται από το Διαδίκτυο και οι διαφορές πνευματικών δικαιωμάτων δεν έχουν καμία σχέση με αυτόν τον ιστότοπο. Πρέπει να διαγράψετε εντελώς το παραπάνω περιεχόμενο από τον υπολογιστή σας εντός 24 ωρών από τη λήψη. Εάν σας αρέσει το πρόγραμμα, υποστηρίξτε γνήσιο λογισμικό, αγοράστε εγγραφή και λάβετε καλύτερες γνήσιες υπηρεσίες. Εάν υπάρχει οποιαδήποτε παραβίαση, επικοινωνήστε μαζί μας μέσω email.
Mail To:help@itsvse.com