通过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. 由于您使用剃刀创建局部，为什么不在那里直接进行计算呢？ 这样部分就已经设置好宽度了。 这是两者中更容易，更快捷的选择。