Question

刷新css而不重新加载页面，App_themes文件夹中定义的css和webconfig引用的主题。

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

尝试了很多方法但未能获得任何输出：

无法使用这样的版本控制：

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
尝试使用CSSrefresh.js来自动化该过程但未能获得实际结果。

那么有什么东西能用最新的css刷新我的页面而不重新加载页面吗？

Answer 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"/>

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

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

每次改变时手动更改所有CSS引用都非常麻烦。要自动执行此过程，您可以在ASP.NET中使用捆绑和缩小插件（它仅在ASP.NET的更高版本中可用）。捆绑和缩小是一种非常有用的优化技术，您应该使用它来提高站点的性能，因此启用它是一个好主意。捆绑插件等在文件更改后会自动更改版本参数。

根据您的项目类型（ASP.NET MVC，Web窗体等），启用捆绑会略有不同。请参阅有关如何使用它的文档for MVC here和for 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元素上的类名更改为＆＃39; theme2＆＃39;。

刷新css而不重新加载asp.net中的页面

1 个答案: