1. Mode.csl:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ProgressBar.Models { public class User { public int Id { get; set; } public string Name { get; set; } public DateTime JoinDate { get; set; } public int ContractYears { get; set; } } }
2. HomeController.cs:
public class HomeController : Controller { // public ActionResult Index() { return View(); } public ActionResult GetNowProgressBarShow() { User user = new User() { Id = 1, Name = "tianqy", JoinDate = new DateTime(2014, 1, 1), ContractYears = 1 }; //判断合同是否到期 int expire = DateTime.Compare(DateTime.Now, user.JoinDate.AddYears(user.ContractYears)); if (expire <= 0) //未到期 { //计算已过时间占得百分比 var pastDays = (DateTime.Now.Subtract(user.JoinDate)).TotalDays; var totalDays = (user.JoinDate.AddYears(user.ContractYears).Subtract(user.JoinDate)).TotalDays; var pastPercentage = (pastDays / totalDays) * 100; //装载、返回Json数据 var data = new { IsExpire = false, PastPercentage = pastPercentage }; return Json(data,JsonRequestBehavior.AllowGet); } else //已过期 { var data = new { IsExpire = true, PastPercentage = 100 }; return Json(data, JsonRequestBehavior.AllowGet); } } }
3. Index.cshtml:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>合同到期进度条</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("GetNowProgressBarShow", "Home")', function (data) { if (data.IsExpire == true) { $("#msg").text("已到期！"); $("#pastContractDays").progressbar({ value: parseInt(data.PastPercentage) }); } else { $("#msg").text(""); $("#pastContractDays").progressbar({ value: parseInt(data.PastPercentage) }); } }) }) </script> </head> <body> <div id="pastContractDays" style="200px; height:10px;"> </div> <div> <span id="msg"></span> </div> </body> </html>
4.效果图：
