【问题标题】:refresh css without reloading the page in asp.net刷新css而不重新加载asp.net中的页面
【发布时间】:2014-11-21 09:33:51
【问题描述】:

刷新css而不重新加载页面,css定义在App_themes文件夹中,主题通过webconfig引用。

我在页面上没有任何 CSS 文件的引用,它是通过在 webconfig 中引用主题名称来完成的。

尝试了很多方法,但没有得到任何输出:

  1. 无法像这样使用版本控制:

    <link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

  2. 尝试使用 CSSrefresh.js 自动执行该过程,但未能获得实际结果。

那么有什么东西可以在不重新加载页面的情况下使用最新的 css 刷新我的页面吗?

【问题讨论】:

  • 您想刷新 CSS 以进行开发吗?我希望您不要将它用于实时网站。
  • 我想为开发服务器和测试服务器更新 CSS。 IT 总是需要按 Ctrl+F5 来刷新浏览器缓存以获取最新的 CSS 更改。有没有办法在不重新加载页面的情况下获得最新的 CSS。请提出建议。
  • 我将 grunt.js 与称为监视任务的东西一起使用。在 gruntjs.com 上查找。每当我保存(更改)我要求它观看的任何文件时,它都会为我重新加载浏览器。

标签: javascript css asp.net


【解决方案1】:

编辑:当您刷新页面时,该页面中的某些元素(如 CSS 和 JavaScript 文件、图像等)可能不会从服务器更新,因为它们被浏览器缓存,因此您可能无法查看您的最新更新。您需要做的是以某种方式阻止浏览器使用文件的缓存版本并再次请求这些内容。

一种方法是禁用对 CSS 或任何经常更新的文件的缓存。要在 ASP.NET 中执行此操作,请更改要禁用缓存的目录中的 Web.config 文件(在您的示例中为 App_themes)。如果该目录不包含Web.config 文件,您可以创建一个。要完全禁用缓存,您可以将以下行添加到 Web.config(如果某些 XML 元素已经存在,则将新的子元素添加到它们):

<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="DisableCache" />
        </staticContent>
    </system.webServer>
</configuration>

您可以将其设置为较短的时间,例如 5 分钟,而不是完全禁用缓存。为此,请将上面示例中的 clientCache 元素更改为:

            <clientCache cacheControlMaxAge="00.00:05:00" cacheControlMode="UseMaxAge"/>

请记住,禁用缓存是一个非常糟糕的主意,并且会非常严重地影响性能,除非绝对必要并且如果所有其他解决方案都失败了,否则您不应这样做。

该问题的(更好的)解决方案是使用版本控制(如您所述),它应该可以工作。您所做的是将链接到 CSS 文件的方式从 &lt;link rel="stylesheet" href="style.css"&gt; 更改为 &lt;link rel="stylesheet" href="style.css?v=1"&gt;(版本作为参数附加)。您不需要更改磁盘上实际 CSS 文件的名称。现在,浏览器将缓存style.css?v=1。如果您的 CSS 发生更改并且您希望立即应用此更改,则您手动更改所有指向您的 CSS 的链接并增加版本 (&lt;link rel="stylesheet" href="style.css?v=2"&gt;)。没有浏览器在其缓存中包含style.css?v=2,因此所有浏览器都会发送一个新请求来获取该文件。

每次更改所有 CSS 引用时手动更改它们非常麻烦。要自动执行此过程,您可以使用 ASP.NET 中的 bundling and minification 插件(它仅在 ASP.NET 的更高版本中可用)。捆绑和缩小是一种非常有用的优化技术,无论如何您都应该使用它来提高站点的性能,因此启用它是一个好主意。除其他外,捆绑插件会在文件更改后自动更改版本参数。

根据您的项目类型(ASP.NET MVC、Web 窗体等),启用捆绑略有不同。请参阅有关如何使用它的文档for MVC herefor Web Forms here


如果您希望页面样式动态更改,请在初始页面加载中包含所有主题 CSS 文件,但必须编辑每个主题 CSS 规则,以便其选择器仅在父级中定义了特定类名时才起作用。然后,您可以使用 JavaScript 在父节点中添加/更改类名称以使用不同的主题。

例如,您的 CSS 将是

.theme1 body { background: red; font: 'sans-serif'; }

.theme2 body { background: blue; font: 'serif'; }

您的 HTML 将是:

<html class="theme1">
    <body>
    </body>
</html>

如果你想改变主题,把 HTML 元素上的类名改为'theme2'。

【讨论】:

  • 我不确定它们是指主题。相反,我认为他们是在询问 CSS 开发,而不必在每次更改后重新加载页面。
  • 我也不确定这个问题,但在第一段中提到了主题。
  • 哦,我现在看到OP关于浏览器缓存的评论了。在这种情况下,他们需要做的是在链接到 CSS 文件名时添加一个版本参数(&lt;link rel="stylesheet" href="style.css?v=1"&gt;),并在每次 CSS 更改时更改此参数。虽然使用捆绑和缩小更有效,但请参阅 herehere 了解更多信息。
  • 另一种解决方案是在App_Themes 文件夹中编辑(或添加)Web.config 文件,并将 CSS 文件的过期时间设置为较短的时间(如 5 分钟),以便浏览器缓存经常过期。查看here 了解更多信息。
  • 我刚刚检查过,但据我了解,静态内容需要它。但是我不明白静态内容的概念??你能解释一下吗??
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-29
  • 2012-03-06
  • 1970-01-01
  • 1970-01-01
  • 2011-10-15
  • 2021-12-23
相关资源
最近更新 更多