Home > Developer > Web Develop
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 SetPublic 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 expiredint result = Datetime.compare (DateTime.Now, user. Jointime.addyears (user. Cooptime));if //Current time is earlier than co-expiry time, cooperation not due{Calculation timevar 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 falsereturn 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
