In the e-commerce website, sometimes the progress bar is shown to visually show whether the user is due and the user's current status.
Design a model like this.
Public class User
{
Public int Get Set
Public string Get set; }
Public int Get set; }
Public Get set; }
}
Above, the Co-operative time attribute Cooptime, and the join time attribute Jointime are 2 attributes that are closely related to progress.
In HomeController, an action method is used to display the interface, one to receive a GET request from the view, and to return the JSON data.
Public ActionResult Index ()
{
return View ();
}
Public ActionResult GetStatus ()
{
New User ()
{
Id = 1,
Name = " xxx user ",
Cooptime = 1,
New DateTime (2014, 3, 20)
};
Determine if the partnership has expired
int result = Datetime.compare (DateTime.Now, user. Jointime.addyears (user. Cooptime));
if //Current time is earlier than co-expiry time, cooperation not due
{
Calculation time
var pastdays = (DateTime.Now.Subtract (user. Jointime)). Totaldays;
var oneyeardays = (user. Jointime.addyears (user. Cooptime). Subtract (user. Jointime)). Totaldays;
var pastpercentage = (pastdays/oneyeardays) * 100;
New true, p = pastpercentage};
return Json (datasuccess, jsonrequestbehavior.allowget);
}
Else //Current time is later than cooperation expiry time, cooperation has expired
{
New false
return Json (Datafail, jsonrequestbehavior.allowget);
}
}
}
Above
Using the static method of DateTime compare to compare 2 time, one is the current time, the other is join time + cooperation duration, if the result is less than or equal to 0, it means that there is no expiration.
Use a datetime static method subtract to subtract 2 times.
home/index.cshtml, when the page is loaded, an asynchronous get request is sent to the server to display the returned data to ProgressBar.
<meta name= "viewport" content= "width=device-width"/>
<title>Index</title>
<link href= "~/content/themes/base/jquery-ui.css" rel= "stylesheet"/>
<script src= "~/scripts/jquery-1.8.2.min.js" ></script>
<script src= "~/scripts/jquery-ui-1.8.24.min.js" ></script>
<script type= "text/javascript" >
$ (function () {
$.getjson (' @Url. Action ("GetStatus", "Home") ', function (data) {
if true) {
var temp = parseint (DATA.P);
$ (' #p '). ProgressBar ({
Value: Temp
});
Else {
$ (' #message '). Text (' Expired ');
$ (' #p '). ProgressBar ({
value: parseint (DATA.P)
});
}
});
});
</script>
<body>
<div id= "p" >
</div>
<div>
<span id= "message" ></span>
</div>
</BODY>