c# - 获取 ASP.NET GridView 单元格值并在 JQuery 进度条中显示

Question

我有一个从 SQL Server 数据库填充的 ASP.NET GridView。这工作正常。我的代码背后使用的是 C#。

GridView 中的一列包含一个 JQuery 进度条，另一列包含一些响应。请看下图:

如何获取响应计数列的每个值并在对应的 JQuery 进度条的每一行中显示该值？

我的 JQuery 进度条目前是静态的，它是这样生成的:

<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>

使用 JQuery UI 网站上提供的以下脚本:

 $(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'); }
        );

   });

我不确定该去哪里，所以我们将不胜感激。

Answer 1

在包含进度条的 div 中，添加一个隐藏字段，如下所示:

<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 中，您可以将数据列表中的所有进度条设置为等于它们各自的值。示例:

编辑:(修改了以下 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) });
});

所有这些都只是我的想法，没有任何真正的代码验证.. 但这将是想法:

1. 从 ASP.NET 获取值到每行进度条附近的隐藏字段中
2. 使用 HTML 隐藏字段中的值更新 jQuery 中的每个进度条。

希望对你有帮助