将样式表应用于gridview模板字段

时间:2012-10-09 08:30:50

标签: c# asp.net css gridview stylesheet

我有这个gridview,我想将一些样式表设置应用于gridview中的验证器。以下是我的GV设置方式:

<table class="table">                                              
<tr>
    <td align="center" colspan="4">
        <cc1:GroupedGridView ID="grpgrdHeatPumpSPF" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" CellSpacing="2" 
            Width="650" GroupingDepth="3" AutoGenerateColumns="false" PageSize="20" AllowPaging="true"  
            DataKeyNames="HeatPumpID" OnPageIndexChanging="grpgrdHeatPumpSPF_PageIndexChanging" 
            OnRowCancelingEdit="grpgrdHeatPumpSPF_RowCancelingEdit" OnRowEditing="grpgrdHeatPumpSPF_RowEditing" OnRowUpdating="grpgrdHeatPumpSPF_RowUpdating" >
        <HeaderStyle BackColor="#86C708" Font-Bold="True" ForeColor="White" HorizontalAlign="Left"></HeaderStyle>
        <FooterStyle BackColor="White" ForeColor="#000066"></FooterStyle>
        <RowStyle BackColor="White" ForeColor="#333333" HorizontalAlign="Left"></RowStyle>
        <EditRowStyle BackColor="#cde686" />
        <SelectedRowStyle BackColor="#FCADAD" ForeColor="Black" Font-Bold="true"  />                               
        <AlternatingRowStyle ForeColor="#284775" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left"></PagerStyle>
        <PagerSettings Mode="NumericFirstLast" />
        <EmptyDataRowStyle CssClass="Label_Small_Bold" ForeColor="#C00000" HorizontalAlign="Center" />                                
        <Columns>
            <asp:ButtonField CommandName="Select" Visible="false" />
            <asp:BoundField DataField="HeatPumpID" HeaderText="HeatPumpID" Visible="False" ReadOnly="True" >
                <HeaderStyle HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:BoundField DataField="ModelNumber" HeaderText="Model Number" Visible="True" ReadOnly="True" >
                <HeaderStyle HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="FlowTemp">
                <ItemTemplate>
                    <asp:Label ID="lblFlowTemp" runat="server" Text='<%# Bind("FlowTemp") %>'></asp:Label>
                </ItemTemplate>
                <ControlStyle CssClass="Input_Text_Int" />
                <HeaderStyle HorizontalAlign="Left" />
                <ItemStyle VerticalAlign="Top" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Heating">
                <EditItemTemplate>
                    <asp:TextBox ID="txtSPFHeating" runat="server" Text='<%# Bind("SPFHeating") %>' CssClass="Input_Text_Int"></asp:TextBox>
                    <asp:RequiredFieldValidator Display="Dynamic" CssClass="validateGridView" ID="validateBTSPFHeating" runat="server" 
                        ErrorMessage="Please enter SPFHeating (e.g. 3.3)" ControlToValidate="txtSPFHeating"></asp:RequiredFieldValidator>                        
                    <asp:RegularExpressionValidator ID="regExpSPFHeating" runat="server" ControlToValidate="txtSPFHeating" CssClass="validateGridView" 
                        ErrorMessage="Invalid SPFHeating (e.g. 3.3)" ValidationExpression="\d+(\.\d)"  Display="Dynamic" SetFocusOnError="True"></asp:RegularExpressionValidator>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblSPFHeating" runat="server" Text='<%# Bind("SPFHeating") %>'></asp:Label>
                </ItemTemplate>
                <ControlStyle CssClass="Input_Text_Int" />
                <HeaderStyle HorizontalAlign="Left" />
                <ItemStyle VerticalAlign="Top" />
            </asp:TemplateField>
            <asp:CommandField ButtonType="Button" ShowEditButton="True" ValidationGroup="vgEdit">
                        <ControlStyle CssClass="Button_XSmall" />
                    </asp:CommandField> 
            <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:Button ID="btnDeleteHeatPumpSPF" CommandArgument='<%# Eval("HeatPumpID","") + ";" + Eval("FlowTemp","") %>' runat="server" OnClientClick="return ConfirmDeletion();" CausesValidation="false" 
                    CommandName="DeletePart" Text="Delete" OnClick="btnDeleteHeatPumpSPF_Click" />
                </ItemTemplate>
                <ControlStyle CssClass="Label_Small" />
            </asp:TemplateField>                                    
        </Columns>
    </cc1:GroupedGridView>
    </td>
</tr>                      

我的CSS如下:

table td
{
padding: 2px;
}
table.center {
    width:90%; 
    margin-left:5%; 
    margin-right:5%;
  }
.hideGridColumn
{
    display:none;
}
.table td label{
    float: left;
    width:146px;
    margin-bottom:5px;
    margin-top:5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: Black;
    line-height: 17px;
    text-align: right;
}
.table td labelmid{
    float: left;
    width:205px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: right;
}
.table td labelwide{
    float: left;
    width:230px;
    margin-bottom:5px;
    margin-top:5px;
    text-align: right;
}
.table td.control{
    width:310px;
    margin-bottom:5px;
    vertical-align:middle;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: Black;
    line-height: 17px;
}
.table td.controlmed{
    width:200px;
    margin-bottom:5px;
    vertical-align:middle;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: Black;
    line-height: 17px;
}
.table td input[type=text],input[type=password]{
    float: left;
    border:#92d307 solid 1px;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    padding:5px;
    color:#000000;
}
.table td select{
    float: left;
    border:#92d307 solid 1px;
    height:32px;
    line-height:20px;
    font-family:Arial, Helvetica, sans-serif;
    padding:5px;
    color:#000000;
    width:270px;
}
.Input_Text_Int{
    width:40px;
    margin-bottom:10px;
    vertical-align:middle;
    padding-right:10px;
}
.Input_Text_Short
{
    width:100px;
    margin-bottom:10px;
    vertical-align:middle;
    padding-right:10px;
}
.Input_Text_Med
{
    width:175px;
    margin-bottom:10px;
    vertical-align:middle;
    padding-right:10px;
}
.Input_Text_Long
{
    width:250px;
    margin-bottom:10px;
    vertical-align:middle;
    padding-right:10px;
}
validateGridView
{
    background: url(../images/wrongIconGV.png) left 5px no-repeat;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    color: #FF5B5B;
    font-size:8px;
}

模板字段正在应用Input_Text_Int设置,但不应用validateGridView设置。任何人都可以帮我解决这个问题,以便验证格式符合CSS中指定的格式吗?

1 个答案:

答案 0 :(得分:1)

CssClass="validateGridView"

这是一个类,所以我认为你必须像你这样在你的CSS中添加一个点

.validateGridView
{
    background: url(../images/wrongIconGV.png) left 5px no-repeat;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    color: #FF5B5B;
    font-size:8px;
}