wymusza pobieranie przez przeglądarki najnowszych plików js i css w aplikacji asp.net

Niektóre przeglądarki buforują pliki js i css, nie mogą ich odświeżyć, chyba że zostanie to narzucone. Jaki jest najłatwiejszy sposób.

Właśnie wdrożyłem to rozwiązanie, które wydaje się działać.

Zadeklaruj zmienną wersji na swojej stronie

  public string version { get; set; }

Uzyskaj numer wersji z klucza web.config

 version = ConfigurationManager.AppSettings["versionNumber"];

Na stronie aspx wykonaj wywołania javascript i arkuszy stylów w ten sposób

<script src="scripts/myjavascript.js?v=<%=version %>" type="text/javascript"></script>
<link href="styles/mystyle.css?v=<%=version %>" rel="stylesheet" type="text/css" />

Jeśli więc ustawisz wersję 1.1 z 1.0 w swoim web.config, Twoja przeglądarka pobierze najnowsze pliki, co, miejmy nadzieję, zaoszczędzi Tobie i Twoim użytkownikom pewnej frustracji.

Czy istnieje inne rozwiązanie, które działa lepiej, czy też spowoduje to nieprzewidziane problemy na stronie internetowej?

Rozwiązałem to, dołączając ostatnio zmodyfikowany znacznik czasu jako parametr zapytania do skryptów.

Zrobiłem to za pomocą metody rozszerzenia i używając jej w moich plikach CSHTML. Uwaga: ta implementacja buforuje znacznik czasu przez 1 minutę, więc nie wyrzucamy zbyt mocno dysku.

Oto metoda rozszerzenia:

public static class JavascriptExtension {
    public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename) {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;

        if (context.Cache[filename] == null)
        {
            var physicalPath = context.Server.MapPath(filename);
            var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";
            context.Cache.Add(filename, version, null,
              DateTime.Now.AddMinutes(5), TimeSpan.Zero,
              CacheItemPriority.Normal, null);
            return version;
        }
        else
        {
            return context.Cache[filename] as string;
        }
    }
}

A potem na stronie CSHTML:

 @Html.IncludeVersionedJs("/MyJavascriptFile.js")

W wyrenderowanym kodzie HTML wygląda to tak:

 <script type='text/javascript' src='/MyJavascriptFile.js?20111129120000'></script>

Twoje rozwiązanie działa. W rzeczywistości jest dość popularny.

Even Stack Overflow używa podobnej metody:

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6184"> 

Gdzie v=6184jest prawdopodobnie numer wersji SVN.

W ASP.NET Core (MVC 6) działa to po wyjęciu z pudełka za pośrednictwem asp-append-versionpomocnika tagów: In ASP.NET Core (MVC 6) this works out of the box via the tag helper:

<script src="scripts/myjavascript.js" asp-append-version="true"></script>
<link href="styles/mystyle.css rel="stylesheet" asp-append-version="true" />

ASP.NET MVC poradzi sobie z tym za Ciebie, jeśli używasz pakietów dla swojego JS / CSS. Automatycznie doda numer wersji w postaci identyfikatora GUID do twoich pakietów i zaktualizuje ten identyfikator GUID tylko wtedy, gdy pakiet zostanie zaktualizowany (inaczej każdy z plików źródłowych ma zmiany).

Pomaga to również, jeśli masz mnóstwo plików JS / CSS, ponieważ może znacznie poprawić czas ładowania treści!

Spójrz tutaj

W asp.net istnieje wbudowany sposób: sprzedaż wiązana . Po prostu go użyj. Każda nowa wersja będzie miała unikalny sufiks „? V = XXXXXXX”. W trybie debugowania pakietowanie jest wyłączone, aby włączyć ustawienia w web.config:

<system.web>
    <compilation debug="false" />
</system.web>

Lub dodaj do metody RegisterBundles (pakiety BundleCollection):

BundleTable.EnableOptimizations = true;

Na przykład:

BundleConfig.cs:

bundles.Add(new ScriptBundle("~/Scripts/myjavascript.js")
                .Include("~/Scripts/myjavascript.js"));

bundles.Add(new StyleBundle("~/Content/mystyle.css")
                .Include("~/Content/mystyle.css"));

_Layout.cshtml:

@Scripts.Render("~/Scripts/myjavascript.js")
@Styles.Render("~/Content/mystyle.css")

Jest na to prostsza odpowiedź niż odpowiedź udzielona przez op w pytaniu (podejście jest takie samo):

Zdefiniuj klucz w pliku web.config:

<add key="VersionNumber" value="06032014"/>

Wykonaj wywołanie appSettings bezpośrednio ze strony aspx:

<link href="styles/navigation.css?v=<%=ConfigurationManager.AppSettings["VersionNumber"]%>" rel="stylesheet" type="text/css" />

Na podstawie odpowiedzi Adama Tegana , zmodyfikowanej do użytku w aplikacji formularzy internetowych.

W kodzie klasy .cs:

public static class FileUtility
{
    public static string SetJsVersion(HttpContext context, string filename) {
        string version = GetJsFileVersion(context, filename);
        return filename + version;
    }

    private static string GetJsFileVersion(HttpContext context, string filename)
    {
        if (context.Cache[filename] == null)
        {
            string filePhysicalPath = context.Server.MapPath(filename);

            string version = "?v=" + GetFileLastModifiedDateTime(context, filePhysicalPath, "yyyyMMddhhmmss");

            return version;
        }
        else
        {
            return string.Empty;
        }
    }

    public static string GetFileLastModifiedDateTime(HttpContext context, string filePath, string dateFormat)
    {
        return new System.IO.FileInfo(filePath).LastWriteTime.ToString(dateFormat);
    }
}

W znaczniku aspx:

<script type="text/javascript" src='<%= FileUtility.SetJsVersion(Context,"/js/exampleJavaScriptFile.js") %>'></script>

A w wyrenderowanym kodzie HTML wygląda jak

<script type="text/javascript" src='/js/exampleJavaScriptFile.js?v=20150402021544'></script>

Co ciekawe, ta sama witryna ma problemy z podejściem, które opisujesz w związku z niektórymi konfiguracjami proxy, mimo że powinno być bezpieczne.

Sprawdź tę dyskusję dotyczącą przepełnienia Meta Stack .

W związku z tym rozsądne może być nie używanie parametru GET do aktualizacji, ale rzeczywista nazwa pliku:

href="/css/scriptname/versionNumber.css" 

nawet jeśli jest to więcej pracy do wykonania, ponieważ będziesz musiał faktycznie utworzyć plik lub napisać dla niego przepisany adres URL.

Chciałem prostego, jednego linera, aby ścieżka była unikalna, aby zniszczyć pamięć podręczną. To zadziałało dla mnie:

<script src="scripts/main.js?bust_js_cache=<%=System.IO.File.GetLastWriteTime(Server.MapPath("scripts/main.js")).ToString("HH:mm:ss")%>" type="text/javascript"></script>

Jeśli plik został zmodyfikowany od czasu ostatniego załadowania go na stronę, przeglądarka pobierze zaktualizowany plik.

Generuje last modifiedstempel z .jspliku i wsuwa go tam zamiast wersji, do której dostęp może nie być łatwy.

<script src="scripts/main.js?bust_js_cache=10:18:38" type="text/javascript"></script>

Inną opcją może być pobranie sumy kontrolnej pliku.

Oto podejście, które działa z ASP.NET 5 / MVC 6 / vNext .

Krok 1: Utwórz klasę, która będzie zwracać czas ostatniego zapisu pliku, podobnie jak w przypadku innych odpowiedzi w tym wątku. Uwaga: wymaga to iniekcji zależności ASP.NET 5 (lub innej).

public class FileVersionService
{
    private IHostingEnvironment _hostingEnvironment;
    public FileVersionService(IHostingEnvironment hostingEnvironment)
    {
        _hostingEnvironment = hostingEnvironment;
    }

    public string GetFileVersion(string filename)
    {
       var path = string.Format("{0}{1}", _hostingEnvironment.WebRootPath, filename);
       var fileInfo = new FileInfo(path);
       var version = fileInfo.LastWriteTimeUtc.ToString("yyyyMMddhhmmssfff");
       return version;
     }
}

Krok 2: Zarejestruj usługę, która ma zostać wstrzyknięta w startup.cs :

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddScoped<FileVersionService>();
    ...
}

Krok 3: Następnie w ASP.NET 5 można wstrzyknąć usługę bezpośrednio do widoku układu, takiego jak _Layout.cshtml w następujący sposób:

@inject Namespace.Here.FileVersionService fileVersionService
<!DOCTYPE html>
<html lang="en" class="@ViewBag.HtmlClass">
<head>
    ...
    <link href="/css/[email protected]("\\css\\styles.css")" rel="stylesheet" />
    ...
</head>
<body>
    ...
</body>

Istnieje kilka ostatnich poprawek, które można zrobić, aby lepiej połączyć ścieżki fizyczne i obsłużyć nazwę pliku w stylu bardziej zgodnym ze składnią, ale to jest punkt wyjścia. Mam nadzieję, że pomoże to ludziom przejść na ASP.NET 5.

W mojej witrynie ASPNET MVC 4 zastosowałem nieco inną technikę:

_ViewStart.cshtml:

@using System.Web.Caching
@using System.Web.Hosting
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    PageData.Add("scriptFormat", string.Format("<script src=\"{{0}}?_={0}\"></script>", GetDeployTicks()));
}

@functions
{

    private static string GetDeployTicks()
    {
        const string cacheKey = "DeployTicks";
        var returnValue = HttpRuntime.Cache[cacheKey] as string;
        if (null == returnValue)
        {
            var absolute = HostingEnvironment.MapPath("~/Web.config");
            returnValue = File.GetLastWriteTime(absolute).Ticks.ToString();
            HttpRuntime.Cache.Insert(cacheKey, returnValue, new CacheDependency(absolute));
        }
        return returnValue;
    }
}

Następnie w rzeczywistych widokach:

 @Scripts.RenderFormat(PageData["scriptFormat"], "~/Scripts/Search/javascriptFile.min.js")

<?php $rand_no = rand(10000000, 99999999)?> <script src="scripts/myjavascript.js?v=<?=$rand_no"></script>

Działa to dla mnie we wszystkich przeglądarkach. Tutaj użyłem PHP do wygenerowania losowego nie. Możesz użyć własnego języka po stronie serwera .`

Zaczynając od powyższej odpowiedzi zmodyfikowałem trochę kod, aby pomocnik działał również z plikami CSS i dodawałem wersję za każdym razem, gdy robisz jakąś zmianę w plikach, a nie tylko podczas budowania

public static class HtmlHelperExtensions
{
    public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename)
    {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");
    }

    public static MvcHtmlString IncludeVersionedCss(this HtmlHelper helper, string filename)
    {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<link href='" + filename + version + "' type ='text/css' rel='stylesheet'/>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;
        var physicalPath = context.Server.MapPath(filename);
        var version = "?v=" +
        new System.IO.FileInfo(physicalPath).LastWriteTime
        .ToString("yyyyMMddHHmmss");
        context.Cache.Add(physicalPath, version, null,
          DateTime.Now.AddMinutes(1), TimeSpan.Zero,
          CacheItemPriority.Normal, null);

        if (context.Cache[filename] == null)
        {
            context.Cache[filename] = version;
            return version;
        }
        else
        {
            if (version != context.Cache[filename].ToString())
            {
                context.Cache[filename] = version;
                return version;
            }
            return context.Cache[filename] as string;
        }
    }
}

Uzyskaj czas modyfikacji pliku, jak pokazano poniżej

private static string GetLastWriteTimeForFile(string pathVal)
    {
        return System.IO.File.GetLastWriteTime(HostingEnvironment.MapPath(pathVal)).ToFileTime().ToString();
    }

Dołącz to z wejściem jako querystring

public static string AppendDateInFile(string pathVal)
    {
        var patheWithDate = new StringBuilder(pathVal);
        patheWithDate.AppendFormat("{0}x={1}",
                               pathVal.IndexOf('?') >= 0 ? '&' : '?',
                               GetLastWriteTimeForFile(pathVal));
        return patheWithDate.ToString();
    }

Nazwij to ze znaczników.

Podejście pomocnika rozszerzenia MVC

Dodaj metodę rozszerzenia

namespace TNS.Portal.Helpers
{
    public static class ScriptExtensions
    {
        public static HtmlString QueryStringScript<T>(this HtmlHelper<T> html, string path)
        {
            var file = html.ViewContext.HttpContext.Server.MapPath(path);
            DateTime lastModified = File.GetLastWriteTime(file);
            TagBuilder builder = new TagBuilder("script");
            builder.Attributes["src"] = path + "?modified=" + lastModified.ToString("yyyyMMddhhmmss");
            return new HtmlString(builder.ToString());
        }

       public static HtmlString QueryStringStylesheet<T>(this HtmlHelper<T> html, string path)
       {
        var file = html.ViewContext.HttpContext.Server.MapPath(path);
        DateTime lastModified = File.GetLastWriteTime(file);
        TagBuilder builder = new TagBuilder("link");
        builder.Attributes["href"] = path + "?modified=" + lastModified.ToString("yyyyMMddhhmmss");
        builder.Attributes["rel"] = "stylesheet";
        return new HtmlString(builder.ToString());
      }

    }
}

Dodaj tę przestrzeń nazw w web.config

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="TNS.Portal" />
        <add namespace="TNS.Portal.Helpers" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Użyj go w widoku jako

@Html.QueryStringScript("/Scripts/NPIAjaxCalls.js")
@Html.QueryStringStylesheet("/Content/StyledRadio.css")

Uproszczone wcześniejsze sugestie i udostępnienie kodu dla programistów .NET Web Forms.

Spowoduje to zaakceptowanie względnych („~ /”) i bezwzględnych adresów URL w ścieżce pliku do zasobu.

Umieść w statycznym pliku klasy rozszerzeń, następujący:

public static string VersionedContent(this HttpContext httpContext, string virtualFilePath)
{
    var physicalFilePath = httpContext.Server.MapPath(virtualFilePath);
    if (httpContext.Cache[physicalFilePath] == null)
    {
        httpContext.Cache[physicalFilePath] = ((Page)httpContext.CurrentHandler).ResolveUrl(virtualFilePath) + (virtualFilePath.Contains("?") ? "&" : "?") + "v=" + File.GetLastWriteTime(physicalFilePath).ToString("yyyyMMddHHmmss");
    }
    return (string)httpContext.Cache[physicalFilePath];
}

A potem nazwij to na swojej stronie wzorcowej tak:

<link type="text/css" rel="stylesheet" href="<%= Context.VersionedContent("~/styles/mystyle.css") %>" />
<script type="text/javascript" src="<%= Context.VersionedContent("~/scripts/myjavascript.js") %>"></script>

Na podstawie powyższej odpowiedzi napisałem małą klasę rozszerzenia do pracy z plikami CSS i JS:

public static class TimestampedContentExtensions
{
    public static string VersionedContent(this UrlHelper helper, string contentPath)
    {
        var context = helper.RequestContext.HttpContext;

        if (context.Cache[contentPath] == null)
        {
            var physicalPath = context.Server.MapPath(contentPath);
            var version = @"v=" + new FileInfo(physicalPath).LastWriteTime.ToString(@"yyyyMMddHHmmss");

            var translatedContentPath = helper.Content(contentPath);

            var versionedContentPath =
                contentPath.Contains(@"?")
                    ? translatedContentPath + @"&" + version
                    : translatedContentPath + @"?" + version;

            context.Cache.Add(physicalPath, version, null, DateTime.Now.AddMinutes(1), TimeSpan.Zero,
                CacheItemPriority.Normal, null);

            context.Cache[contentPath] = versionedContentPath;
            return versionedContentPath;
        }
        else
        {
            return context.Cache[contentPath] as string;
        }
    }
}

Zamiast pisać coś takiego:

<link href="@Url.Content(@"~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content(@"~/Scripts/bootstrap.min.js")"></script>

Możesz teraz napisać:

<link href="@Url.VersionedContent(@"~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.VersionedContent(@"~/Scripts/bootstrap.min.js")"></script>

Czyli po prostu wymienić Url.Contentsię Url.VersionedContent.

Wygenerowane adresy URL wyglądają mniej więcej tak:

<link href="/Content/bootstrap.min.css?v=20151104105858" rel="stylesheet" type="text/css" />
<script src="/Scripts/bootstrap.min.js?v=20151029213517"></script>

Jeśli używasz klasy rozszerzenia, możesz dodać obsługę błędów w przypadku, gdy MapPathpołączenie nie działa, ponieważ contentPathnie jest to plik fizyczny.

Używam podobnego sposobu, aby zrobić to samo, co robisz, bez modyfikowania każdej strony. Dodano zdarzenie PreRender to plik główny. Utrzymuje moją logikę w jednym miejscu i ma zastosowanie zarówno do plików js, jak i css.

protected void Page_PreRender(object sender, EventArgs e)
    {
        HtmlLink link = null;
        LiteralControl script = null;


        foreach (Control c in Header.Controls)
        {
            //StyleSheet add version
            if (c is HtmlLink)
            {
                link = c as HtmlLink;


                if (link.Href.EndsWith(".css", StringComparison.InvariantCultureIgnoreCase))
                {
                    link.Href += string.Format("?v={0}", ConfigurationManager.AppSettings["agVersion"]);
                }

            }

            //Js add version
            if (c is LiteralControl)
            {
                script = c as LiteralControl;

                if (script.Text.Contains(".js"))
                {
                    var foundIndexes = new List<int>();


                    for (int i = script.Text.IndexOf(".js\""); i > -1; i = script.Text.IndexOf(".js\"", i + 1))
                    {

                        foundIndexes.Add(i);
                    }

                    for (int i = foundIndexes.Count - 1; i >= 0; i--)
                    {

                        script.Text = script.Text.Insert(foundIndexes[i] + 3, string.Format("?v={0}", ConfigurationManager.AppSettings["agVersion"]));
                    }
                }

            }

        }
    }

Możesz przesłonić właściwość DefaultTagFormat skryptów lub stylów.

Scripts.DefaultTagFormat = @"<script src=""{0}?v=" + ConfigurationManager.AppSettings["pubversion"] + @"""></script>";
Styles.DefaultTagFormat = @"<link href=""{0}?v=" + ConfigurationManager.AppSettings["pubversion"] + @""" rel=""stylesheet""/>";

Aby rozwiązać ten problem w mojej aplikacji ASP.Net Ajax, utworzyłem rozszerzenie, a następnie wywołałem na stronie wzorcowej.

Aby uzyskać więcej informacji, możesz przejść przez link .

Łatwy i sprytny sposób na implementację wersji css w aplikacji .net według poniższej koncepcji. Nie ma potrzeby pisania kodu zaplecza.

<link href="<%="../../App_Themes/Base/css/main.css?v="+ DateTime.Now.ToString("yyyyMMddhhmmss") +""%>" rel="stylesheet" />

Główny problem z robieniem tego w ten sposób polega głównie na tym, że będziesz musiał pamiętać o aktualizowaniu numeru wersji w kodzie za każdym razem, gdy wprowadzasz jakiekolwiek zmiany w plikach css lub js.

Prawdopodobnie lepszym sposobem na to jest ustawienie gwarantowanego unikalnego parametru dla każdego pliku css lub js, na przykład:

<script src="scripts/myjavascript.js?_=<%=DateTime.Now.Ticks%>" type="text/javascript"></script>
<link href="styles/mystyle.css?_=<%=DateTime.Now.Ticks%>" rel="stylesheet" type="text/css" />

Wymusza to za każdym razem żądanie plików z serwera, co oznacza również, że Twoja witryna nie będzie tak wydajna po załadowaniu strony, ponieważ te pliki nigdy nie będą buforowane i za każdym razem będą wykorzystywać niepotrzebną przepustowość.

Zasadniczo, jeśli pamiętasz o aktualizowaniu numeru wersji za każdym razem, gdy wprowadzana jest zmiana, możesz uciec od tego, jak to robisz.

W przypadku stron ASP.NET używam następujących plików

PRZED

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

PO (wymuszenie przeładowania)

 <script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

Dodanie DateTime.Now.Ticks działa bardzo dobrze.