Razorビューのhtmlテーブルセルにプログレスバーを追加する

Question

HTMLテーブルがあり、プログレスバーを追加しようとしています：ここにチャンクの進行バーのようなものがありますhttp://www.telerik.com/aspnet-mvc/progressbar 保存されたprocからデータを取得しています現在のところ、番号は進捗バーとして表示する必要があります。

誰かが私を正しい方向に向けることができますか？私はかなりの時間この仕事に立ち往生しています。これまでのところ私のコードです。

コード：HTMLテーブル内

<script> 
    $(document).ready(function() { 

     var pb = $("#profileCompleteness").kendoProgressBar({ 
      type: "chunk", 
      chunkCount: 36, 
      min: 0, 
      max: 36, 
      value: 4 
     }) 
      $(function() { 
      var pb = $("#profileCompleteness").data("kendoProgressBar"); 
      $(this).find(".progress").kendoProgressBar({value: item.percentage}) 

     }); 
    }) 
</script> 

：

@foreach (var item in Model) 
     { 
      <td align="center"> 
        <div id="profileCompleteness"></div> 

       @Html.DisplayFor(modelItem => item.Percentage) 
       @Html.DisplayFor(modelItem => item.ProfileCompleteness) 

       </td> 
} 

私は現在、私はハード上記4にパーセント値をコード化している、データベースからの出力割合相当を取得したいです。事前に助けていただきありがとうございます。

おかげで、あなたがこれまで持っていますどのようなコード

Answer 1

setInterval(function() { 
 
    var randomWidth = 200*Math.random() + "px"; 
 
    document.getElementById("progress").style.width = randomWidth;}, 1000);

#progress-bar { 
 
    width: 200px; 
 
    height: 10px; 
 
    background-color: black; 
 
    position: absolute; 
 
    
 
    top: 0px; 
 
    left: 0px; 
 
    z-index -1; 
 
    } 
 

 
#progress { 
 
    width: 40px; 
 
    height: 10px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top:0px; 
 
    left:0px; 
 
    z-index:7; 
 
}

<div> 
 
    <div id="progress-bar"> </div> 
 
    <div id="progress"> </div> 
 
</div>