文章詳情頁
ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進(jìn)度條
瀏覽：145日期：2022-06-08 14:00:00
在電商網(wǎng)站中，有時候通過進(jìn)度條來直觀地顯示用戶是否到期以及用戶當(dāng)前的狀態(tài)。
設(shè)計這樣的一個Model。
public class User {public int Id { get; set; } public string Name { get; set; }public int CoopTime { get; set; }public DateTime JoinTime { get; set; } }以上，合作時長屬性CoopTime，和加入時間屬性JoinTime是和進(jìn)度密切相關(guān)的2個屬性。
在HomeController中，一個action方法用來顯示界面，一個用來接收來自視圖的GET請求，返回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)前時間比合作到期時間早，合作未到期 {//計算時間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)前時間比合作到期時間晚，合作已到期 {var dataFail = new { msg = false, p = 100 }; return Json(dataFail, JsonRequestBehavior.AllowGet); }} }以上，
- 使用DateTime的靜態(tài)方法Compare來比較2個時間，一個是當(dāng)前時間，另一個是加入時間 + 合作時長，如果結(jié)果小于或等于0，就表示沒有過期。
- 使用DateTime的靜態(tài)方法Subtract來給2個時間做減法。
Home/Index.cshtml中，當(dāng)頁面加載完畢后，向服務(wù)端發(fā)出一個異步GET請求，把返回的數(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>以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
標(biāo)簽：
ASP.NET
相關(guān)文章：
1. ASP.NET MVC獲取多級類別組合下的產(chǎn)品2. ASP.NET MVC限制同一個IP地址單位時間間隔內(nèi)的請求次數(shù)3. ASP.NET MVC解決上傳圖片臟數(shù)據(jù)的方法4. ASP.NET MVC使用Identity增刪改查用戶5. ASP.NET MVC實現(xiàn)登錄后跳轉(zhuǎn)到原界面6. ASP.NET MVC使用正則表達(dá)式驗證手機號碼7. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字8. ASP.NET MVC使用Session會話保持表單狀態(tài)9. ASP.NET MVC前臺動態(tài)添加文本框并在后臺使用FormCollection接收值10. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼
排行榜
網(wǎng)公網(wǎng)安備