将 CSS 应用于 formview 控件中的文本框答案

【问题标题】：Applying CSS to a textbox within a formview control将 CSS 应用于 formview 控件中的文本框
【发布时间】：2011-09-04 03:27:57
【问题描述】：

我正在尝试将 css 样式应用于表单视图中的文本框。执行此操作的正确方法是什么，因为表单未应用以下样式是我尝试应用代码的代码的一部分

<asp:FormView ID="FormView1" runat="server" BackColor="White" 
            BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4" 
            DataKeyNames="pappid" DataSourceID="applicantsbypappid" GridLines="Both"> 
<ItemTemplate>
               <%-- pappid:--%>
            <asp:Label ID="pappidLabel" runat="server" Text='<%# Eval("pappid") %>' />
            <br />

             <asp:Label ID="lblapplicantname" runat="server" CssClass="labels" Text="Applicant's Name:">
    </asp:Label>
    <asp:TextBox ID="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantmname"  runat="server" Text='<%# Bind("pappmname") %>'></asp:TextBox>
    <asp:TextBox ID="txtapplicantlname"  runat="server" Text='<%# Bind("papplname") %>'></asp:TextBox>

css代码

#txtapplicantfname
{
    width: 70px;
    border-bottom: 1px solid #0954A5;
    border-left-style: none;
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    font-size: 10px;
 }

【问题讨论】：

这样做有什么特殊要求吗？我可以告诉你其他方式吗？
没有任何特殊要求。基本上，如果我能找到一种方法将此命令 Text='' 添加到单个文本框，我所有的 CSS 问题都会消失。我正在使用 formview 来绑定 objectdatasource 是否有另一种方法可以编写代码将 objectdatasource 绑定到整个表单？希望这是有道理的感谢您的帮助

标签： .net asp.net css formview

【解决方案1】：

我建议您直接分配 css，因为服务器端控件 ID 以完整的层次结构呈现并串联。就像你的情况一样，会有一个Content Place Holder and a Textbox (ctl00_ContentPlaceHolder_txtapplicantfname)。如果会有更多的面板； Tab Panel(ctl00_ContentPlaceHolder_TabPanelID_txtapplicantfname)等涉及层次结构会被打乱。

你可以这样做......

<asp:TextBox ID="txtapplicantfname" CssClass="txtapplicantfname"  runat="server" Text='<%# Bind("pappfname") %>'></asp:TextBox>


.txtapplicantfname
{
width: 70px;
border-bottom: 1px solid #0954A5;
border-left-style: none;
border-left-color: inherit;
border-left-width: 0;
border-right-style: none;
border-right-color: inherit;
border-right-width: 0;
border-top-style: none;
border-top-color: inherit;
border-top-width: 0;
font-size: 10px;
}

【讨论】：

很抱歉，这对我不起作用，因为我已将标准文本框类应用于所有文本框。如果我在表单中放置一个表格，它会看到我的 CSS 样式吗？
但是您想为 TxtApplicationFname 分配特定的类，如果您分配特定的类，它应该可以工作。这就是答案。
谢谢，我正在重新设计表单以使用所有类我只是觉得当您将拥有多个具有相同样式的控件时，您只使用 CSS 类。感谢您的所有帮助

【解决方案2】：

您知道，当您使用 ASP.NET 服务器控件时，它们会被转换为 HTML 标记。 TextBox 控件将在 HTML 中呈现为“输入”标记。然而，在此过程中，ASP.NET 不会为 HTML 标记提供相同的 ID。它不会是“txtapplicantfname”，而是类似于“ctl00_ContentPlaceHolder_txtapplicantfname”。

CSS 样式适用于 HTML 标记，而不适用于 ASP.NET 代码。所以在 CSS 样式表中，如果引用一个控件 ID，则需要引用呈现的 HTML 代码的 ID。你的风格应该是：

#ctl00_ContentPlaceHolder_txtapplicantfname
{
(...)

只需在导航器中显示您的页面（或在调试模式下执行）并检查源以获取 HTML 标记的真实 ID。

【讨论】：

-1 抱歉。非常错误的做法。尤其是当 ASP.NET 拥有这些 ClientIDMode 和所有这些时。 CssClass 是有原因的
抱歉，我尝试在调试模式下运行表单，但是我找不到显示控件 ID 的完整路径的位置。

【解决方案3】：

此外，您可以在 asp.net 表单中使用

 #<%= txtapplicantfname.ClientID%>
 {
      (...)
 }

【讨论】：