ASP.NET GridViewセルの値を取得してJQueryプログレスバーに表示

Question

SQL Serverデータベースからデータを取り込んだASP.NET GridViewがあります。これはうまくいきます。私のコードの背後にはC＃を使用しています。

GridViewの列の1つにJQuery Progressバーがあり、別の列には多数の応答が含まれています。どのように私は応答列をカウントし、jQueryのプログレスバーを対応する各列にこの値を表示するために、それぞれの値を得ることについて行くことができる

：下の画像を参照してください？

私のjQueryのプログレスバーは、現在、静的であり、それはそうのように生成された：私はどこここにいることがわからない

$(function() { 

     // Progressbar 
     $(".progressbar").progressbar({ 
      value: 40 
     }); 
     //hover states on the static widgets 
     $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); }, 
      function() { $(this).removeClass('ui-state-hover'); } 
     ); 

    }); 

：jQueryのUIのウェブサイト上で提供される次のスクリプトを使用して

<asp:DataList runat="server" id="listResponses" DataKeyField="QuestionID" OnItemDataBound="listResponses_ItemDataBound" Width="100%"> 
    <ItemTemplate> 
     <div class="question_header"> 
      <p><strong><asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label>. <%# DataBinder.Eval(Container.DataItem, "QuestionText") %></strong></p> 
     </div> <!-- end question_header --> 
     <asp:GridView runat="server" ID="gridResponses" DataKeyNames="AnswerID" AutoGenerateColumns="False" CssClass="responses" AlternatingRowStyle-BackColor="#f3f4f8"> 
      <Columns> 
       <asp:BoundField DataField="AnswerTitle" ItemStyle-Width="250px"></asp:BoundField> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <div class="pbcontainer"> 
          <div class="progressbar"></div> 
         </div> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:BoundField DataField="Responses" HeaderText="Response Count" HeaderStyle-Width="100px" /> 
      </Columns> 
     </asp:GridView> 
    </ItemTemplate> 
</asp:DataList> 

だから助けてくれれば幸いです。プログレスバーを保持しているあなたのdivに

Answer 1

、そのように隠しフィールドを追加します。

<div class="pbcontainer"> 
    <!-- This is the new line in markup. Replace NumOfResponses with your value field --> 
    <asp:HiddenField ID="hiddenValue" runat="server" Value='<%# Eval("NumOfResponses") %>' /> 

    <div class="progressbar"></div> 
</div 

今プログレスバーを含む各div要素はまた、あなたがプログレスバーを更新する必要がある値で隠しフィールドが含まれていますと。

jQueryでは、データリスト内のすべての進行状況バーをそれぞれの値に設定できます。例：

EDIT：（次のjQueryコードが変更された）

$('.pbcontainer').each(function() { 
    // We assume that there is only 1 hidden field under 'pbcontainer' 
    var valueFromHiddenField = $('input[type=hidden]', this).val(); 

    $('.progressbar', this).progressbar({ value: parseInt(valueFromHiddenField) }); 
}); 

ALLこれらは ..任意の実際のコード検証せずにちょうど私の頭の上からであった。しかし、これはIDEAになります。

1. ASP.NETの値を各行の進行状況バーの近くの非表示フィールドに取得します。
2. jQueryの各プログレスバーをHTMLの非表示フィールドの値で更新します。

希望これは

Answer 2

に役立ちますが、これを試してみてください：

<script> 
    var maxBarVal = 0; 
    $(function() { 
     $('.row').each(function() { 
      var val = parseInt($(".value", this).text()); 
      maxBarVal += val; 
     }); 
     $('.row').each(function() { 
      var val = parseInt($(".value", this).text()); 
      $('.bar', this).progressbar({ value: val/maxBarVal * 100 }); 
     }); 
    }); 
</script> 

これは、GridViewコントロールのシミュレートされた出力です：私はこのコードを使用する場合

<table border="1" cellpadding="3" cellspacing="0" style="border-collapse: collapse;" width="100%"> 
    <tr> 
     <td colspan="3">4. Have you used an iPad before?</td> 
    </tr> 
    <tr> 
     <td width="250">Answer</td> 
     <td>Percentage</td> 
     <td width="100">Response Count</td> 
    </tr> 
    <tr class="row"> 
     <td>Yes</td> 
     <td><div class="bar"></div></td> 
     <td class="value">4</td> 
    </tr> 
    <tr class="row"> 
     <td>No</td> 
     <td><div class="bar"></div></td> 
     <td class="value">2</td> 
    </tr> 
</table>