MVC mengimplementasikan bilah kemajuan tentang waktu, menggunakan bilah kemajuan ui jQuery

Sampah kecil · Diposting pada 05/10/2015 16.05.23

Di situs web e-commerce, bilah kemajuan terkadang digunakan untuk menampilkan secara visual apakah pengguna jatuh tempo dan status pengguna saat ini.

Rancang model seperti itu.

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

Salin kode

Di atas adalah atribut durasi kerja sama CoopTime dan atribut jointime JoinTime adalah dua atribut yang erat kaitannya dengan kemajuan.

Di HomeController, metode tindakan digunakan untuk menampilkan antarmuka, dan metode tindakan digunakan untuk menerima permintaan GET dari tampilan dan mengembalikan data 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);
}
}
}

Salin kode

Di atas,

● Gunakan metode statis DateTime Compare untuk membandingkan 2 kali, satu adalah waktu saat ini, yang lainnya adalah waktu bergabung + durasi kerja sama, jika hasilnya kurang dari atau sama dengan 0, itu berarti tidak ada kedaluwarsa.
● Gunakan metode statis DateTime, Subtract, untuk mengurangi 2 kali.

Home/Index.cshtml, saat halaman dimuat, kirim permintaan GET asinkron ke server untuk menampilkan data yang dikembalikan di bilah kemajuan.

<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>

Salin kode

[ASP.NET] MVC mengimplementasikan bilah kemajuan tentang waktu, menggunakan bilah kemajuan ui jQuery

Pos terkait

Bagian yang dilihat