无法在 asp.net WebForms 应用程序的 .aspx 内容页面中实现外部 css 文件答案

【问题标题】：Failure to implement external css file in .aspx content page in asp.net WebForms application无法在 asp.net WebForms 应用程序的 .aspx 内容页面中实现外部 css 文件
【发布时间】：2017-05-13 18:44:32
【问题描述】：

我正在努力在我的 asp.net WebForms 应用程序的内容页面中实现一个外部 CSS 文件。因此，内容页面有一个母版页 (Site.Master)，其中我在 head 部分中包含以下代码：

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
          <link href="Styles/pokerpsych.css" rel="stylesheet" type="text/css" />
    </asp:ContentPlaceHolder>

因此，asp:ContentPlaceholder 标记包含指向我想要应用于所有页面的 CSS 文件的链接。因此，此链接中的样式已成功应用于 Site.Master 页面的正文标记中的内容，但是此文件中指定的样式不会应用于为内容页面指定的 ID。在我的一个内容页面中，我有例如以下代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PostHand.aspx.cs" Inherits="PokerPuzzleWebforms.PostHand" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <header>
         <h1>Post your hand here</h1>
    </header>
    <main>
        <label runat="server" for="titleBox" id="titleLabel" >Title</label>
        <input type="text" id="titleBox" name="titleBox" runat="server" />
    </main>
</asp:Content>

因此，尽管我没有成功，但我试图将样式应用于文本框 (id="titleLabel") 的标签。

我已经验证了 CSS 文件，似乎没有错误。我还尝试通过在内容页面中添加以下代码来用另一个外部 CSS 文件覆盖 pokerpsych.css：

<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="Styles/posthandstyle.css" rel="stylesheet" type="text/css" runat="server"/>
</asp:Content>

我还尝试在 asp:Content 标记中嵌入样式标记，尽管这并不成功。但是，我只能在使用内联样式时将样式应用于 id，尽管我更愿意包含一个外部文件来应用样式。

以下是 CSS 文件 (pokerpsych.css)：

body {
}

#test{
    color:red;
}
#titleLabel {
    color:red !important;
    margin-right:100px;
}

【问题讨论】：

暂时注释掉当前的 CSS 链接。将 CSS 文件从解决方案资源管理器拖到母版页。在浏览器中按 F5，看看它是否有效。
可能是由webforms 中的动态ID 处理引起的。呈现的 HTML 中文本框的 ID 可能与 titleLabel 不同。在呈现的页面上通过View source 检查。最简单的解决方法可能是创建基于类的 CSS 并在 ASPX 页面中的控件上引用正确的类。
谢谢，看来问题出在动态 ID 处理上。 View Source 表明 ID 已与容器“MainContent_titleLabel”合并。使用类似乎可以解决这个问题

标签： css asp.net webforms master-pages

【解决方案1】：

来自user1429080's comment：

这可能是由 Web 窗体中的动态 ID 处理引起的。呈现的 HTML 中文本框的 ID 可能与 titleLabel 不同。在渲染页面上查看源代码。

最简单的解决方法可能是使用基于类的 CSS 并在 ASPX 页面中引用控件上的正确类而不是 ID。

【讨论】：