memaksa browser untuk mendapatkan file js dan css terbaru di aplikasi asp.net

Beberapa browser menyimpan file js dan css, gagal menyegarkannya kecuali Anda memaksanya. Apa cara termudah.

Saya baru saja menerapkan solusi ini yang tampaknya berhasil.

Deklarasikan variabel versi di halaman Anda

  public string version { get; set; }

Dapatkan nomor versi dari kunci web.config

 version = ConfigurationManager.AppSettings["versionNumber"];

Di halaman aspx Anda, lakukan panggilan ke javascript dan stylesheet seperti itu

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

Jadi jika Anda menyetel versi = 1.1 dari 1.0 di web.config Anda, browser Anda akan mengunduh file terbaru yang diharapkan akan menyelamatkan Anda dan pengguna Anda dari beberapa frustrasi.

Apakah ada solusi lain yang berfungsi lebih baik, atau apakah ini akan menyebabkan masalah tak terduga untuk situs web?

Saya menyelesaikan ini dengan memasang stempel waktu terakhir yang dimodifikasi sebagai parameter kueri ke skrip.

Saya melakukan ini dengan metode ekstensi, dan menggunakannya dalam file CSHTML saya. Catatan: implementasi ini meng-cache stempel waktu selama 1 menit sehingga kami tidak terlalu banyak membuang-buang disk.

Berikut adalah metode ekstensi:

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

Lalu di halaman CSHTML:

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

Dalam HTML yang dirender, ini muncul sebagai:

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

Solusi Anda berhasil. Ini sebenarnya cukup populer.

Even Stack Overflow menggunakan metode serupa:

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

Di mana v=6184mungkin nomor revisi SVN.

Di ASP.NET Core (MVC 6) ini berfungsi di luar kotak melalui asp-append-versiontag 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 akan menangani ini untuk Anda jika Anda menggunakan bundel untuk JS / CSS Anda. Ini akan secara otomatis menambahkan nomor versi dalam bentuk GUID ke bundel Anda dan hanya memperbarui GUID ini ketika bundel diperbarui (alias salah satu file sumber memiliki perubahan).

Ini juga membantu jika Anda memiliki banyak file JS / CSS karena dapat sangat meningkatkan waktu muat konten!

Lihat disini

Ada cara built-in di asp.net untuk ini: bundling . Gunakan saja. Setiap versi baru akan memiliki akhiran unik "? V = XXXXXXX". Dalam mode debug, bundling tidak aktif, untuk mengaktifkan pengaturan make di web.config:

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

Atau tambahkan ke metode RegisterBundles (bundle BundleCollection):

BundleTable.EnableOptimizations = true;

Sebagai contoh:

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

Ada jawaban yang lebih sederhana untuk ini daripada jawaban yang diberikan oleh op dalam pertanyaan (pendekatannya sama):

Tentukan kunci di web.config:

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

Lakukan panggilan ke pengaturan aplikasi langsung dari halaman aspx:

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

Berdasarkan jawaban Adam Tegan , dimodifikasi untuk digunakan dalam aplikasi formulir web.

Dalam kode kelas .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);
    }
}

Di markup aspx:

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

Dan di HTML yang dirender, itu muncul sebagai

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

Menariknya, situs ini memiliki masalah dengan pendekatan yang Anda jelaskan sehubungan dengan beberapa penyiapan proxy, meskipun seharusnya aman.

Periksa diskusi Meta Stack Overflow ini .

Jadi mengingat itu, mungkin masuk akal untuk tidak menggunakan parameter GET untuk memperbarui, tetapi nama file yang sebenarnya:

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

meskipun ini lebih banyak pekerjaan yang harus dilakukan, karena Anda harus benar-benar membuat file, atau membuat ulang URL untuk itu.

Saya ingin satu liner sederhana untuk membuat jalur unik untuk merusak cache. Ini berhasil untuk saya:

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

Jika file telah dimodifikasi sejak terakhir kali dimuat di halaman, browser akan menarik file yang diperbarui.

Ini menghasilkan last modifiedcap dari .jsfile dan membuangnya di sana alih-alih versi yang mungkin tidak mudah untuk mendapatkan akses.

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

Pilihan lain adalah mendapatkan checksum dari file tersebut.

Berikut adalah pendekatan yang berfungsi dengan ASP.NET 5 / MVC 6 / vNext .

Langkah 1: Buat kelas untuk mengembalikan waktu tulis terakhir file, mirip dengan jawaban lain di utas ini. Catatan, ini memerlukan injeksi ketergantungan ASP.NET 5 (atau lainnya).

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

Langkah 2: Daftarkan layanan yang akan diinjeksi di dalam startup.cs :

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

Langkah 3: Kemudian, di ASP.NET 5, dimungkinkan untuk menyuntikkan layanan langsung ke tampilan tata letak seperti _Layout.cshtml seperti ini:

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

Ada beberapa sentuhan akhir yang dapat dilakukan untuk menggabungkan jalur fisik dengan lebih baik dan menangani nama file dalam gaya yang lebih konsisten dengan sintaks, tetapi ini adalah titik awal. Semoga membantu orang-orang pindah ke ASP.NET 5.

Saya telah menggunakan teknik yang sedikit berbeda di situs aspnet MVC 4 saya:

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

Kemudian dalam tampilan sebenarnya:

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

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

Ini berfungsi untuk saya di semua browser. Di sini saya telah menggunakan PHP untuk menghasilkan no acak. Anda dapat menggunakan bahasa sisi server Anda sendiri.`

Mulai dari jawaban di atas saya memodifikasi sedikit kode agar helper bekerja dengan file CSS juga dan menambahkan versi setiap kali Anda melakukan beberapa perubahan pada file dan tidak hanya ketika Anda melakukan build

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

Dapatkan waktu modifikasi file, seperti yang ditunjukkan di bawah ini

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

Tambahkan ini dengan masukan sebagai string kueri

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

Sebut ini dari markup.

Pendekatan Pembantu Ekstensi MVC

Tambahkan metode ekstensi

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

    }
}

Tambahkan namespace ini di 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>

Gunakan dalam tampilan sebagai

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

Saran sebelumnya yang disederhanakan dan pemberian kode untuk pengembang Formulir Web .NET.

Ini akan menerima url relatif ("~ /") dan absolut di jalur file ke sumber daya.

Masukkan file kelas ekstensi statis, berikut ini:

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

Dan kemudian menyebutnya di Halaman Master Anda seperti itu:

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

Berdasarkan jawaban di atas, saya telah menulis kelas ekstensi kecil untuk bekerja dengan file CSS dan 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;
        }
    }
}

Dari pada menulis sesuatu seperti:

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

Anda sekarang dapat menulis:

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

Yaitu cukup ganti Url.Contentdengan Url.VersionedContent.

URL yang dihasilkan terlihat seperti ini:

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

Jika Anda menggunakan kelas ekstensi, Anda mungkin ingin menambahkan penanganan kesalahan jika MapPathpanggilan tidak berfungsi, karena contentPathbukan file fisik.

Saya menggunakan cara serupa untuk melakukan hal yang sama yang Anda lakukan tanpa mengubah setiap halaman. Menambahkan acara PreRender adalah file master. Itu membuat logika saya di satu tempat dan berlaku untuk file js dan 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"]));
                    }
                }

            }

        }
    }

Anda bisa mengganti properti DefaultTagFormat dari Scripts atau Styles.

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

Untuk mengatasi masalah ini di aplikasi ASP.Net Ajax saya, saya membuat ekstensi dan kemudian memanggil di halaman master.

Untuk lebih jelasnya bisa melalui link .

Cara mudah dan cerdas untuk mengimplementasikan versi css pada aplikasi .net dengan konsep di bawah ini .. tidak perlu menulis kode back-end.

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

Masalah utama dengan melakukannya dengan cara ini terutama adalah Anda harus ingat untuk memperbarui nomor versi Anda dalam kode Anda setiap kali Anda membuat perubahan pada file css atau js Anda.

Cara yang mungkin lebih baik untuk melakukannya adalah dengan menetapkan parameter unik yang dijamin dengan setiap file css atau js Anda, seperti:

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

Ini memaksa file untuk diminta dari server setiap saat, yang juga berarti bahwa situs Anda tidak akan berkinerja sebaik saat pemuatan halaman, karena file tersebut tidak akan pernah disimpan dalam cache, dan akan menggunakan bandwidth yang tidak diperlukan setiap saat.

Pada dasarnya, jika Anda ingat untuk memperbarui nomor versi setiap kali ada perubahan, Anda dapat memahami cara melakukannya.

Untuk halaman ASP.NET saya menggunakan berikut ini

SEBELUM

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

SETELAH (isi ulang paksa)

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

Menambahkan DateTime.Now.Ticks bekerja dengan sangat baik.