将 CSS 应用到 f​​ormview 控件内的文本框

发布于 2024-11-10 03:57:59 字数 1430 浏览 4 评论 0原文

我正在尝试将 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;
 }

I am trying to apply css styles to textboxes within a formview. What is the correct way to do this as the form is not applying the styles below is part of the code where i was trying to apply the code

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

#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;
 }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

星軌x 2024-11-17 03:57:59

我建议您直接分配 css,因为服务器端控件 ID 通过串联呈现在完整的层次结构中。就像您的情况一样,将会有一个内容占位符和文本框(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;
}

I would suggest you to assign the css directly, as the server side control ID renders in complete hierarchy with concatenation. Like in your case, there will be a Content Place Holder and a Textbox (ctl00_ContentPlaceHolder_txtapplicantfname). If there will be any more panels; Tab Panel(ctl00_ContentPlaceHolder_TabPanelID_txtapplicantfname), etc involve hierarchy will be disturbed.

You can do it like...

<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;
}
·深蓝 2024-11-17 03:57:59

您知道,当您使用 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。

You know that when you use ASP.NET server controls, they are converted to HTML tags. The TextBox control will be rendered in HTML as an "input" tag. In the process however, ASP.NET does not give the same ID to the HTML tag. It will not be "txtapplicantfname", it will be something like "ctl00_ContentPlaceHolder_txtapplicantfname".

CSS styles apply to the HTML tags, not the ASP.NET code. So in the CSS stylesheet, if you refer to a control ID, you need to refer to the ID of the rendered HTML code. Your style should be:

#ctl00_ContentPlaceHolder_txtapplicantfname
{
(...)

Just display your page in a navigator (or execute in debug mode) and check the source to get the real IDs for the HTML tags.

童话 2024-11-17 03:57:59

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

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

Additionally, Within asp.net form you can use

 #<%= txtapplicantfname.ClientID%>
 {
      (...)
 }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文