成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁技術(shù)文章
文章詳情頁

ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條

瀏覽：146日期：2022-06-08 14:00:00

在電商網(wǎng)站中，有時(shí)候通過進(jìn)度條來直觀地顯示用戶是否到期以及用戶當(dāng)前的狀態(tài)。

設(shè)計(jì)這樣的一個(gè)Model。

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

以上，合作時(shí)長(zhǎng)屬性CoopTime，和加入時(shí)間屬性JoinTime是和進(jìn)度密切相關(guān)的2個(gè)屬性。

在HomeController中，一個(gè)action方法用來顯示界面，一個(gè)用來接收來自視圖的GET請(qǐng)求，返回json數(shù)據(jù)。

public ActionResult Index(){    return View();}public ActionResult GetStatus(){    User user = new User()    {Id = 1,Name = "某某用戶",CoopTime = 1,JoinTime = new DateTime(2014, 3, 20)    };    //判斷合作是否已經(jīng)到期    int result = DateTime.Compare(DateTime.Now, user.JoinTime.AddYears(user.CoopTime));    if (result <= 0) //當(dāng)前時(shí)間比合作到期時(shí)間早，合作未到期    {//計(jì)算時(shí)間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 //當(dāng)前時(shí)間比合作到期時(shí)間晚，合作已到期    {var dataFail = new { msg = false, p = 100 }; return Json(dataFail, JsonRequestBehavior.AllowGet);    }}    }

以上，

  • 使用DateTime的靜態(tài)方法Compare來比較2個(gè)時(shí)間，一個(gè)是當(dāng)前時(shí)間，另一個(gè)是加入時(shí)間 + 合作時(shí)長(zhǎng)，如果結(jié)果小于或等于0，就表示沒有過期。
  • 使用DateTime的靜態(tài)方法Subtract來給2個(gè)時(shí)間做減法。

Home/Index.cshtml中，當(dāng)頁面加載完畢后，向服務(wù)端發(fā)出一個(gè)異步GET請(qǐng)求，把返回的數(shù)據(jù)顯示到progressbar中。

<head>    <meta name="viewport" content="width=device-width" />    <title>Index</title>    <link href="~/Content/themes/base/jquery-ui.css" rel="external nofollow"  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 (data.msg == true) {    var temp = parseInt(data.p);    $("#p").progressbar({value: temp    });} else {    $("#message").text("已到期");    $("#p").progressbar({value: parseInt(data.p)    });}    });});    </script></head><body>    <div id="p">           </div>    <div><span id="message"></span>    </div></body>

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

標(biāo)簽： ASP.NET
相關(guān)文章：