buộc các trình duyệt tải các tệp js và css mới nhất trong ứng dụng asp.net

Một số trình duyệt lưu vào bộ nhớ cache các tệp js và css, không thể làm mới chúng trừ khi bạn buộc chúng. Cách dễ nhất là gì.

Tôi vừa thực hiện giải pháp này có vẻ hoạt động.

Khai báo một biến phiên bản trên trang của bạn

  public string version { get; set; }

Nhận số phiên bản từ khóa web.config

 version = ConfigurationManager.AppSettings["versionNumber"];

Trong trang aspx của bạn, hãy thực hiện các lệnh gọi tới javascript và các bảng định kiểu như vậy

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

Vì vậy, nếu bạn đặt phiên bản = 1.1 từ 1.0 trong web.config, trình duyệt của bạn sẽ tải xuống các tệp mới nhất, hy vọng sẽ giúp bạn và người dùng của bạn đỡ thất vọng.

Có giải pháp nào khác hoạt động tốt hơn hay điều này sẽ gây ra bất kỳ sự cố không lường trước cho trang web?

Tôi đã giải quyết điều này bằng cách đóng dấu thời gian được sửa đổi lần cuối làm tham số truy vấn cho các tập lệnh.

Tôi đã làm điều này với một phương thức mở rộng và sử dụng nó trong các tệp CSHTML của mình. Lưu ý: việc triển khai này lưu vào bộ nhớ cache dấu thời gian trong 1 phút để chúng tôi không làm hỏng đĩa quá nhiều.

Đây là phương thức mở rộng:

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;
        }
    }
}

Và sau đó trong trang CSHTML:

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

Trong HTML được hiển thị, điều này xuất hiện dưới dạng:

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

Giải pháp của bạn hoạt động. Nó khá phổ biến trên thực tế.

Ngay cả Stack Overflow cũng sử dụng một phương pháp tương tự:

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

Trong trường hợp v=6184có lẽ là số phiên bản SVN.

Trong ASP.NET Core (MVC 6), điều này hoạt động hiệu quả thông qua trình asp-append-versiontrợ giúp thẻ:

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

ASP.NET MVC sẽ xử lý điều này cho bạn nếu bạn sử dụng gói cho JS / CSS của mình. Nó sẽ tự động thêm số phiên bản dưới dạng GUID vào các gói của bạn và chỉ cập nhật GUID này khi gói được cập nhật (hay còn gọi là bất kỳ tệp nguồn nào có thay đổi).

Điều này cũng hữu ích nếu bạn có rất nhiều tệp JS / CSS vì nó có thể cải thiện đáng kể thời gian tải nội dung!

Xem tại đây

Có một cách tích hợp trong asp.net cho điều này: gói . Chỉ cần sử dụng nó. Mỗi phiên bản mới sẽ có hậu tố duy nhất "? V = XXXXXXX". Ở chế độ gỡ lỗi, gói bị tắt, để bật thực hiện cài đặt trong web.config:

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

Hoặc thêm vào phương thức RegisterBundles (Gói BundleCollection):

BundleTable.EnableOptimizations = true;

Ví dụ:

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")

Có một câu trả lời đơn giản hơn cho câu trả lời này so với câu trả lời được đưa ra bởi op trong câu hỏi (cách tiếp cận là giống nhau):

Xác định khóa trong web.config:

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

Thực hiện cuộc gọi đến các cài đặt ứng dụng trực tiếp từ trang aspx:

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

Dựa trên câu trả lời của Adam Tegan , được sửa đổi để sử dụng trong ứng dụng biểu mẫu web.

Trong mã lớp .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);
    }
}

Trong đánh dấu aspx:

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

Và trong HTML được hiển thị, nó xuất hiện dưới dạng

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

Điều thú vị là chính trang web này có vấn đề với cách tiếp cận mà bạn mô tả liên quan đến một số thiết lập proxy, mặc dù nó phải an toàn với lỗi.

Kiểm tra cuộc thảo luận Meta Stack Overflow này .

Vì vậy, do đó, có thể hợp lý khi không sử dụng tham số GET để cập nhật, mà là tên tệp thực tế:

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

mặc dù việc này còn nhiều việc phải làm vì bạn sẽ phải thực sự tạo tệp hoặc tạo URL ghi lại cho nó.

Tôi muốn một lớp lót đơn giản để tạo đường dẫn duy nhất để phá vỡ bộ nhớ cache. Điều này đã làm việc cho tôi:

<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>

Nếu tệp đã được sửa đổi kể từ lần cuối cùng nó được tải trên trang, trình duyệt sẽ kéo tệp cập nhật.

Nó tạo last modifiedtem từ .jstệp và gắn nó vào đó thay vì phiên bản có thể không dễ dàng truy cập.

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

Một tùy chọn khác có thể là lấy tổng kiểm tra của tệp.

Đây là một cách tiếp cận hoạt động với ASP.NET 5 / MVC 6 / vNext .

Bước 1: Tạo lớp trả về thời gian ghi cuối cùng của tệp, tương tự như các câu trả lời khác trong luồng này. Lưu ý, điều này yêu cầu tiêm phụ thuộc ASP.NET 5 (hoặc khác).

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;
     }
}

Bước 2: Đăng ký dịch vụ được đưa vào bên trong startup.cs :

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

Bước 3: Sau đó, trong ASP.NET 5, có thể đưa dịch vụ trực tiếp vào dạng xem bố cục như _Layout.cshtml như sau:

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

Có một số bước hoàn thiện có thể được thực hiện để kết hợp các đường dẫn vật lý tốt hơn và xử lý tên tệp theo phong cách phù hợp hơn với cú pháp, nhưng đây là điểm bắt đầu. Hy vọng nó sẽ giúp mọi người chuyển sang ASP.NET 5.

Tôi đã sử dụng một kỹ thuật hơi khác trong trang web aspnet MVC 4 của mình:

_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;
    }
}

Sau đó, trong các chế độ xem thực tế:

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

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

Điều này phù hợp với tôi trên tất cả các trình duyệt. Ở đây tôi đã sử dụng PHP để tạo số ngẫu nhiên. Bạn có thể sử dụng ngôn ngữ phía máy chủ của riêng mình. '

Bắt đầu từ câu trả lời ở trên, tôi đã sửa đổi một chút mã để làm cho trình trợ giúp cũng hoạt động với các tệp CSS và thêm phiên bản mỗi khi bạn thực hiện một số thay đổi trong tệp và không chỉ khi bạn xây dựng

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;
        }
    }
}

Nhận thời gian sửa đổi tệp, như được hiển thị bên dưới

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

Nối điều này với đầu vào là chuỗi truy vấn

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

Gọi cái này từ đánh dấu.

Phương pháp tiếp cận của trình trợ giúp tiện ích mở rộng MVC

Thêm một phương thức mở rộng

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());
      }

    }
}

Thêm không gian tên này vào 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>

Sử dụng nó để xem như

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

Các đề xuất trước được đơn giản hóa và cung cấp mã cho các nhà phát triển Biểu mẫu Web .NET.

Điều này sẽ chấp nhận cả url tương đối ("~ /") và tuyệt đối trong đường dẫn tệp đến tài nguyên.

Đặt vào tệp lớp phần mở rộng tĩnh, như sau:

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];
}

Và sau đó gọi nó trong Trang chính của bạn như vậy:

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

Dựa trên câu trả lời ở trên, tôi đã viết một lớp mở rộng nhỏ để làm việc với các tệp CSS và 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;
        }
    }
}

Thay vì viết một cái gì đó như:

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

Bây giờ bạn có thể viết:

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

Tức là chỉ cần thay thế Url.Contentbằng Url.VersionedContent.

Các URL đã tạo trông giống như sau:

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

Nếu bạn sử dụng lớp mở rộng, bạn có thể muốn thêm xử lý lỗi trong trường hợp MapPathcuộc gọi không hoạt động, vì contentPathkhông phải là tệp vật lý.

Tôi sử dụng một cách tương tự để làm giống như bạn đang làm mà không cần sửa đổi từng trang. Đã thêm một sự kiện PreRender là tệp chính. Nó giữ logic của tôi ở một nơi và áp dụng cho cả tệp js và 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"]));
                    }
                }

            }

        }
    }

Bạn có thể ghi đè thuộc tính DefaultTagFormat của Tập lệnh hoặc Kiểu.

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

Để giải quyết vấn đề này trong ứng dụng ASP.Net Ajax của tôi, tôi đã tạo một tiện ích mở rộng và sau đó được gọi trong trang chính.

Để biết thêm chi tiết, bạn có thể đi qua liên kết .

Cách dễ dàng và thông minh để triển khai lập phiên bản css trong ứng dụng .net theo khái niệm dưới đây .. không cần viết mã back-end.

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

Vấn đề chính khi làm theo cách này chủ yếu là bạn sẽ cần phải nhớ cập nhật số phiên bản trong mã của mình mỗi khi bạn thực hiện bất kỳ thay đổi nào đối với tệp css hoặc js của mình.

Một cách có thể tốt hơn để làm điều đó là đặt một tham số duy nhất được đảm bảo với mỗi tệp css hoặc js của bạn, như sau:

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

Điều này buộc các tệp phải được yêu cầu từ máy chủ mỗi lần, điều này cũng có nghĩa là trang web của bạn sẽ không hoạt động hiệu quả khi tải trang, vì những tệp đó sẽ không bao giờ được lưu vào bộ nhớ cache và sẽ sử dụng băng thông không cần thiết mỗi lần.

Về cơ bản, nếu bạn có thể nhớ cập nhật số phiên bản mỗi khi thực hiện thay đổi, bạn có thể hoàn thành cách bạn đang thực hiện.

Đối với các trang ASP.NET, tôi đang sử dụng phần sau

TRƯỚC

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

SAU (buộc tải lại)

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

Thêm DateTime.Now.Ticks hoạt động rất tốt.