Question

我正在使用MVC实体框架Webapp。我有一个视图，显示每30秒更新的其他部分视图。问题是我使用的动态进度条根本没有填满，我已经尝试了所有我知道的东西。我认为问题是传递给局部视图的css（“width”，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但是调整css的jQuery $("#dynamic").css("width", current_progress + "%")仅在页面加载时运行，而不是在部分重新加载后运行。您有两种方法可以解决此问题，

在剃刀从部分加载后，在ajax的success方法中运行jQuery函数。
由于您使用剃刀创建部分，为什么不在那里进行计算？这样部分就已经设置了宽度设置。这是两者中更容易，更快捷的选择。

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

1 个答案: