MVC implémente une barre de progression sur le temps, en utilisant la barre de progression de l’interface jQuery

Petite ordure · Publié sur 05/10/2015 16:05:23

Dans les sites de commerce électronique, la barre de progression est parfois utilisée pour afficher visuellement si un utilisateur a une date et son statut actuel.

Concevez un tel modèle.

public class User
{
public int Id { get; set; }
public string Name { get; set; }
public int CoopTime { get; set; }
public DateTime JoinTime { get; set; }
}

Code de copie

Ce qui précède est l’attribut de durée de coopération CoopTime et l’attribut jointime JoinTime sont deux attributs étroitement liés à la progression.

Dans HomeController, une méthode d’action est utilisée pour afficher l’interface, et une méthode d’action est utilisée pour recevoir les requêtes GET de la vue et renvoyer les données json.

public ActionResult Index()
{
return View();
}
public ActionResult GetStatus()
{
User user = new User()
{
Id = 1,
Name = "某某用户",
CoopTime = 1,
JoinTime = new DateTime(2014, 3, 20)
};
//判断合作是否已经到期
int result = DateTime.Compare(DateTime.Now, user.JoinTime.AddYears(user.CoopTime));
if (result <= 0) //当前时间比合作到期时间早，合作未到期
{
//计算时间
var pastDays = (DateTime.Now.Subtract(user.JoinTime)).TotalDays;
var oneYearDays = (user.JoinTime.AddYears(user.CoopTime).Subtract(user.JoinTime)).TotalDays;
var pastPercentage = (pastDays / oneYearDays) * 100;
var dataSuccess = new { msg = true, p = pastPercentage };
return Json(dataSuccess, JsonRequestBehavior.AllowGet);
}
else //当前时间比合作到期时间晚，合作已到期
{
var dataFail = new { msg = false, p = 100 };
return Json(dataFail, JsonRequestBehavior.AllowGet);
}
}
}

Code de copie

Ci-dessus,

● Utiliser la méthode statique de la Comparaison DateTime pour comparer 2 fois, l’une est le temps courant, l’autre le temps de jonction + la durée de coopération, si le résultat est inférieur ou égal à 0, cela signifie qu’il n’y a pas d’expiration.
● Utiliser la méthode statique de DateTime, Soustraire pour soustraire 2 fois.

Home/Index.cshtml, lorsque la page est chargée, envoie une requête GET asynchrone au serveur pour afficher les données retournées dans la barre de progression.

<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<scrip{过滤}t src="~/scrip{过滤}ts/jquery-1.8.2.min.js"></scrip{过滤}t>
<scrip{过滤}t src="~/scrip{过滤}ts/jquery-ui-1.8.24.min.js"></scrip{过滤}t>
<scrip{过滤}t type="text/javascrip{过滤}t">
$(function () {
$.getJSON('@Url.Action("GetStatus","Home")', function(data) {
if (data.msg == true) {
var temp = parseInt(data.p);
$('#p').progressbar({
value: temp
});
} else {
$('#message').text('已到期');
$('#p').progressbar({
value: parseInt(data.p)
});
}
});
});
</scrip{过滤}t>
</head>
<body>
<div id="p">
</div>
<div>
<span id="message"></span>
</div>
</body>

Code de copie

[ASP.NET] MVC implémente une barre de progression sur le temps, en utilisant la barre de progression de l’interface jQuery

Articles connexes

Sections vues