JavaScriptを使用してCSS値を部分ビューに渡す

Question

私はMVC Entity Framework Webappを使用しています。私は30秒ごとに更新される他の部分的なビューを表示するビューを持っています。問題は、使用している動的プログレスバーがまったくいっぱいでなく、私が知っているすべてを試してみたことです。私が思う問題は、部分的なビュー（ "幅"、current_progress + "％"）に渡されるCSSです。ここではPICで、バーが半分を完全に...

コントローラの方法であると考えられる。

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 + "%")は部分的なリロード後ではなく、ページの読み込み時にのみ実行されます。あなたはこれを修正するには、2つのオプション、

1. は、Ajaxのsuccess方法では、部分からでカミソリをロードした後、jQueryの機能を実行しています。

2. あなたはパーツを作成するためにカミソリを使用しているので、ちょうどそこに計算をしないのはなぜですか？そのようにして、部分集合は既に設定された幅で設定されます。これは2つのオプションの方が簡単で高速です。