一个指示合同到期的进度条（mvc+jquery）

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="width:200px; height:10px;">
    </div>
    <div>
        <span id="msg"></span>
    </div>
</body>
</html>

 

4.效果图：

　　

posted @ 2014-09-24 17:00  骑着上帝Coding  阅读(472)  评论(1)  编辑  收藏  举报