Question

我有一个Gridview，其中一个列需要显示一组任务的进度。我在其中一个gridview单元格中使用bootstrap进度条。

当它位于asp：TemplateField中的ItemTemplate内时，如何更改div style="width: __%"？

<asp:GridView ID="gvExample" runat="server" CssClass="table table-bordered table-striped table-hover" />
    <Columns>
        <asp:BoundField />
        <asp:BoundField />
        <asp:BoundField />                    
        <asp:TemplateField ItemStyle-Width="200">
            <ItemTemplate>
                <div class="progress">
                    <div style="width: 50%" class="progress-bar progress-bar-striped" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                    <div id="ApprovedTherm" runat="server" class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                    <div id="TotalTherm" runat="server" class="progress-bar progress-bar-striped progress-bar-warning" role="progressbar" height: 20px;" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>            
</asp:GridView>

TLDR：如何从后面的代码中设置div style="width: __%"？

Answer 1

您可以通过在代码后面设置属性来实现。但您需要先向div添加ID和runat=server。

<ItemTemplate>
    <div id="ProgressBar" runat="server" style="width: 50%" class="progress-bar progress-bar-striped"></div>
</ItemTemplate>

然后在代码后面使用FindControl来定位DIV并设置属性。

foreach (GridViewRow row in GridView1.Rows)
{
    HtmlGenericControl hgc = row.FindControl("ProgressBar") as HtmlGenericControl;
    hgc.Attributes.Add("style", "width: 100%");
}

或按索引

HtmlGenericControl hgc = GridView1.Rows[i].FindControl("ProgressBar") as HtmlGenericControl

Answer 2

将ID提供给DIV并在服务器上运行

<div id="temp" runat="server" ... > ... </div>

从RowDataBound事件中获取：

protected void gvExample_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // access the div here
        HtmlGenericControl tempDiv = (HtmlGenericControl) e.Row.FindControl("temp");
        tempDiv.Attributes.Add("style", "width: 50%;");
    }
}

注意：请勿忘记将OnRowDataBound="gvExample_RowDataBound"属性添加到GridView。

如何更改ItemTemplate中的<div>的style = width

2 个答案: