MVC implements a progress bar about time, using the jQuery ui's progressbar

Little scum · Posted on 10/5/2015 4:05:23 PM

In e-commerce websites, the progress bar is sometimes used to visually display whether a user is due and the user's current status.

Design such a model.

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

Copy code

The above is the cooperation duration attribute CoopTime and the jointime attribute JoinTime are two attributes that are closely related to progress.

In HomeController, an action method is used to display the interface, and an action method is used to receive GET requests from the view and return json data.

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

Copy code

Above,

● Use the static method of DateTime Compare to compare 2 times, one is the current time, the other is the join time + cooperation duration, if the result is less than or equal to 0, it means that there is no expiration.
● Use the static method of DateTime, Subtract, to subtract 2 times.

Home/Index.cshtml, when the page is loaded, send an asynchronous GET request to the server to display the returned data in the progressbar.

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

Copy code

[ASP.NET] MVC implements a progress bar about time, using the jQuery ui's progressbar

Related Posts

Sections viewed