MVC ievieš progresa joslu par laiku, izmantojot jQuery lietotāja interfeisa progresa joslu

Maz putas · Publicēts 05.10.2015 16:05:23

E-komercijas vietnēs norises josla dažkārt tiek izmantota, lai vizuāli parādītu, vai lietotājam ir jāmaksā un lietotāja pašreizējais statuss.

Izstrādājiet šādu modeli.

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

Kopēt kodu

Iepriekš minētais ir sadarbības ilguma atribūts CoopTime un jointime atribūts JoinTime ir divi atribūti, kas ir cieši saistīti ar progresu.

Programmā HomeController interfeisa parādīšanai tiek izmantota darbības metode, un darbības metode tiek izmantota, lai saņemtu GET pieprasījumus no skata un atgrieztu json datus.

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

Kopēt kodu

Iepriekš,

● Izmantojiet statisko DateTime Compare metodi, lai salīdzinātu 2 reizes, viena ir pašreizējais laiks, otra ir pievienošanās laiks + sadarbības ilgums, ja rezultāts ir mazāks vai vienāds ar 0, tas nozīmē, ka nav derīguma termiņa.
● Izmantojiet statisko metodi DateTime, Atņemt, lai atņemtu 2 reizes.

Home/Index.cshtml, kad lapa ir ielādēta, nosūtiet serverim asinhronu GET pieprasījumu, lai parādītu atgrieztos datus progresa joslā.

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

Kopēt kodu

[ASP.NET] MVC ievieš progresa joslu par laiku, izmantojot jQuery lietotāja interfeisa progresa joslu

Saistītās ziņas

Skatītās sadaļas