通过JavaScript将CSS值传递给局部视图

我正在使用MVC实体框架Webapp。我有一个视图，显示每30秒更新一次的其他局部视图。问题是我使用的动态进度条根本没有填满，我已经尝试了我所知道的一切。我认为问题在于传递给部分视图的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
@{
ViewBag.Title=“仪表板”；
}
@节脚本{
函数loadProgressPV（）{
$.ajax({
url:“@url.Action（“Progress”）”，
键入：'GET'，//我认为您的问题是，您使用
style=“width:0%”
从片段中提取html，但随后调整css的jQuery，
$（“#dynamic”）.css（“width”，current#progress+“%”
，仅在页面加载时运行，而不是在片段重新加载后运行。您有两个选项来解决此问题

在razor从partial加载后，在ajax的
success
方法中运行jQuery函数

既然您使用razor创建部分，为什么不直接在那里进行计算呢？这样，部分就已经设置了宽度设置。这是两种方法中更简单、更快的选择

我认为您的问题是，您使用
style=“width:0%”
从部分中提取html，但随后调整css的jQuery，
$（“#动态”）.css（“width”，current#progress+“%”）只在页面加载时运行，而不是在部分重新加载后运行。您有两个选项来解决这个问题

在razor从partial加载后，在ajax的
success
方法中运行jQuery函数

既然您使用razor创建部分，为什么不直接在那里进行计算呢？这样，部分就已经设置了宽度设置。这是两种方法中更简单、更快的选择

它应该可以工作。您确定当前的进度设置正确吗？@Alex您是否尝试使用$（document）.ready（function（）{//your code}）您的部分已设置为
style=“width:0%”
而且您的ajax不会重新运行设置宽度的jQuery。因为您正在创建部分并将html从该部分映射到页面上，所以我会直接在razor中进行宽度计算。@nurdyguy Duh！效果非常好。只需将我在脚本中声明的变量移到@{}在部分视图中，然后用当前的进度替换宽度元素中的0。谢谢！应该可以。您确定当前的进度设置正确吗？@Alex是否尝试使用$（document）。ready（function（）{//your code}）您的部分有
style=“width:0%”
而且您的ajax不会重新运行设置宽度的jQuery。因为您正在创建部分并将html从该部分映射到页面上，所以我会直接在razor中进行宽度计算。@nurdyguy Duh！效果非常好。只需将我在脚本中声明的变量移到@{}在局部视图中，然后用当前进度替换宽度元素中的0。谢谢！
@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>