ASP.NET 面板在加载到浏览器之前忽略样式答案

【问题标题】：ASP.NET Panels Ignore Style Until Loaded In BrowserASP.NET 面板在加载到浏览器之前忽略样式
【发布时间】：2014-01-23 14:32:51
【问题描述】：

我正在开发一个应用程序，我想在页面加载时将文本框动态加载到面板中，具体取决于我需要多少文本框。

我使用 javascript/jquery 对 div 执行此操作，但我决定切换到将此过程编码为 C#。让我知道这是否是个坏主意。

问题是在设计视图中，我有 24 个面板，有一个 grid_1 类 （我使用的是 960 网格系统，有 24 列。我永远不需要更多超过 24 个面板，所以我决定将面板硬编码到页面中）。然而，与 div 不同的是，这些面板在在浏览器中呈现之前会忽略样式。

这是它们在 Visual Studio 2012 中的样子：

这看起来很糟糕，因为有 24 个这样的傻瓜，而且在网络浏览器中看起来完全不明显。

我的代码：

<div id="myid">
            <div class="container_24" id="myid">
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
                <asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>
            </div>
        </div>

我应该停止使用面板并切换回 javascript 并在客户端执行所有操作，还是应该继续做我正在做的事情，因为有一个我不知道的明显修复，这是非常好的编码实践？

-谢谢

【问题讨论】：

您在页面的哪个位置引用了样式表？
在标题中我引用了<link href="css/style.css" rel="stylesheet" /> <link href="css/reset.css" rel="stylesheet" /> <link href="css/normalize.css" rel="stylesheet" /> <link href="css/960.css" rel="stylesheet" />
好吧，如果你尝试使用服务器端属性 <asp:Panel CssClass=".. 而不是 <asp:Panel class=".. 呢？
成功了！你能解释一下为什么会这样吗？
试图在答案中解释

标签： c# asp.net css visual-studio-2012 webforms

【解决方案1】：

使用服务器端 CssClass 服务器端属性而不是 class 属性。 IE。而不是

<asp:Panel class="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>

使用

<asp:Panel CssClass="grid_1 measurementTextBoxContainer" runat="server"></asp:Panel>

这只是一种预感，但我认为在这种情况下，class 被视为通用 HTML 元素属性，在整个页面呈现后处理，而 CssClass 是服务器端属性（它仍然呈现因为class属性) 立即生效

【讨论】：