通過JavaScript將CSS值傳遞給部分視圖

Question

我正在使用MVC實體框架Webapp。 我有一個視圖，該視圖顯示每30秒更新一次的其他局部視圖。 問題是我正在使用的動態進度欄根本沒有填滿，我已經嘗試了所有我知道的東西。 我認為問題是傳遞給局部視圖的CSS（“寬度”，current_progress +“％”）。 這是一張照片，酒吧應該滿了一半。

控制器方法：

    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>

任何幫助都將非常棒，在此先感謝您！

Answer 1

我認為您的問題是，您使用style="width: 0%"從局部中提取html，然后使用jQuery調整了CSS， $("#dynamic").css("width", current_progress + "%") ，僅在頁面加載時運行，而不在部分重新加載后運行。 您有兩種方法可以解決此問題，

1. 在ajax的success方法中，從部分加載剃須刀后運行jQuery函數。

2. 由於您使用剃刀創建局部，為什么不在那里直接進行計算呢？ 這樣部分就已經設置好寬度了。 這是兩者中更容易，更快捷的選擇。