MVC, jQuery arayüzünün ilerleme çubuğunu kullanarak zaman hakkında ilerleme çubuğu uygular

Küçük · Yayınlandı 5.10.2015 16:05:23

E-ticaret sitelerinde, ilerleme çubuğu bazen kullanıcının doğum tarihinin olup olmadığını ve mevcut durumunu görsel olarak göstermek için kullanılır.

Böyle bir model tasarla.

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

Kopya kodu

Yukarıdakiler, işbirliği süresi niteliği CoopTime ve katılım zamanı niteliği JoinTime, ilerlemeyle yakından ilişkili iki özniteliktir.

HomeController'da, arayüzü görüntülemek için bir eylem yöntemi kullanılır ve bir eylem yöntemi görünümden GET taleplerini almak ve json verilerini geri getirmek için kullanılır.

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);
}
}
}

Kopya kodu

Yukarıda,

● DateTime Compare statik yöntemini kullanarak 2 kez karşılaştırın; biri mevcut zaman, diğeri ise birleştirme süresi + işbirliği süresi; sonuç 0'dan az veya eşitse, bu sona ermemiş demektir.
● DateTime, Çıkar statik yöntemini kullanarak 2 kez çıkar.

Home/Index.cshtml, sayfa yüklendiğinde, geri dönen verilerin ilerleme çubuğunda görüntülenmesi için sunucuya asenkron bir GET talebi gönderin.

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

Kopya kodu

[ASP.NET] MVC, jQuery arayüzünün ilerleme çubuğunu kullanarak zaman hakkında ilerleme çubuğu uygular

İlgili Yazılar

Görüntülenen bölümler