通過JavaScript傳遞CSS值以部分查看

我正在使用MVC實體框架Web應用程序。我有一個視圖，顯示每30秒更新一次的其他部分視圖。問題是我使用的動態進度條根本沒有填滿，我嘗試了我所知道的一切。我認爲問題是傳遞給部分視圖的CSS（「width」，current_progress +「％」）。這裏是一個PIC和酒吧應該是超過半滿...通過JavaScript傳遞CSS值以部分查看

控制器方法：

public ActionResult Dashboard() 
    { 
     ViewBag.SumofDon = db.tblDonors.Sum(s => s.DonationAmount); 
     return View(db.tblDonors.ToList()); 
    } 

    public ActionResult Progress() 
    { 
     return PartialView("_Progress", db.tblDonors.ToList()); 
    }

Dashboard.cshtml：

@model IEnumerable<bssp.Models.tblDonor> 

@{ 
    ViewBag.Title = "Dashboard"; 
} 

@section Scripts{ 

<script> 
function loadProgressPV() { 
    $.ajax({ 
    url: "@Url.Action("Progress")", 
    type: 'GET', // <-- make a async request by GET 
    dataType: 'html', // <-- to expect an html response 
    success: function(result) { 
       $('#progress').html(result); 
      } 
    }); 
} 

$(function() { 
    loadProgressPV(); // first time 
    // re-call the functions each 10 seconds 
    window.setInterval("loadProgressPV()", 10000); 
}); 
</script> 

<script> 
$(function() { 
    var SumofDon = @ViewBag.SumofDon; 
    var current_progress = (SumofDon/20000) * 100; // 20000 is the goal that can be changed 
    $("#dynamic") 
     .css("width", current_progress + "%") //This causes the problem? 
}); 
</script> 

} 

<div class="container-fluid"> 
    <div class="row" id="progress"> 
     @Html.Partial("_Progress") 
    </div> 
</div>

局部視圖：

@model IEnumerable<bssp.Models.tblDonor> 

<div class="row"> 
<br /><br /><br /> 
<div class="col-md-12"> 
    <div class="well bs-component"> 
     <h4>@String.Format("{0:C}", @ViewBag.SumofDon) out of $20,000<br /></h4> 
     <div class="progress progress-striped active"> 
      <div class="progress-bar" id="dynamic" style="width: 0%"></div> @*The width is what gets updated because it found the id of dynamic*@ 
     </div> 
    </div> 
</div> 
</div>

任何幫助將是真棒，並提前感謝！

來源

2017-08-09 Alex

它應該工作。你確定current_progress設置正確嗎？ –

@Alex是否嘗試使用$（document）.ready（function（）{//您的代碼}） – hasan

Your partial has'style =「width：0％」'and your ajax does not rerun the jQuery set寬度。 – nurdyguy

我認爲你的問題是，你從部分拉動HTML style="width: 0%"，但然後jQuery，調整CSS，$("#dynamic").css("width", current_progress + "%")，只能在頁面加載運行，而不是部分重新加載後運行。你有兩個選擇來解決這個問題，

運行在從部分剃刀加載後jQuery的功能，在阿賈克斯的success方法。
由於您使用剃鬚刀來創建部分，爲什麼不直接在那裏做計算？這樣，部分進入已經設置寬度設置。這是兩者更容易和更快的選擇。

來源

2017-08-09 21:09:18 nurdyguy

通過JavaScript傳遞CSS值以部分查看

回答

相關問題