Post
Ask Question

Call Dynamic JS And CSS in C#

Introduction

In this article, we’ll learn how to set dynamic versioning of JavaScript files in MVC. We will create a simple MVC project and call one JavaScript file from the View.

Step 1

Open Visual Studio and select “File” >> "New". Then, click on Project.
 
 

Step 2

Select “Templates” >> Visual C# >> Web then ASP.NET Web Application (.NET Framework), and put the appropriate project name. Click the “OK” button.
 
 

Step 3

And from here, select MVC project (you can select the project as per your requirement).
 
 

Step 4

Now, go to the .cs file where you want to create the extension method to append the versions. I'm creating a Helper class in which the below code will be added.

Note
The class must be static and publicly accessible.
Here, we will create an HtmlHelper extension method which we can use anywhere in the project. Copy the below code and put it in your .cs file.
  1. private static string GetVersion(this HtmlHelper helper, string filename)  
  2.         {  
  3.             var context = helper.ViewContext.RequestContext.HttpContext;  
  4.   
  5.             if (context.Cache[filename] == null)  
  6.             {  
  7.                 var physicalPath = context.Server.MapPath(filename);  
  8.                 var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";  
  9.                 context.Cache.Add(filename, version, null,  
  10.                   DateTime.Now.AddMinutes(5), TimeSpan.Zero,  
  11.                   CacheItemPriority.Normal, null);  
  12.                 return version;  
  13.             }  
  14.             else  
  15.             {  
  16.                 return context.Cache[filename] as string;  
  17.             }  
  18.         }  
  19.   
  20.         public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename)  
  21.         {  
  22.             string version = GetVersion(helper, filename);  
  23.             return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");  
  24.         }   
 And that's it. We have created the extension method which we are going to use in View to append dynamic versioning.

Step 4

Go to the .cshtml file (your View) and add the below line.
  1. @Html.IncludeVersionedJs("/Scripts/bootstrap.js")    
@Html.IncludeVersionedJs is the extension method we created.

syntax

@Html.IncludeVersionedJs("YOUR FILE PATH") 

Full code of helper class
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Caching;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace DynamicVersion  
  9. {  
  10.     public static class Helper  
  11.     {  
  12.         private static string GetVersion(this HtmlHelper helper, string filename)  
  13.         {  
  14.             var context = helper.ViewContext.RequestContext.HttpContext;  
  15.   
  16.             if (context.Cache[filename] == null)  
  17.             {  
  18.                 var physicalPath = context.Server.MapPath(filename);  
  19.                 var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";  
  20.                 context.Cache.Add(filename, version, null,  
  21.                   DateTime.Now.AddMinutes(5), TimeSpan.Zero,  
  22.                   CacheItemPriority.Normal, null);  
  23.                 return version;  
  24.             }  
  25.             else  
  26.             {  
  27.                 return context.Cache[filename] as string;  
  28.             }  
  29.         }  
  30.   
  31.         public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename)  
  32.         {  
  33.             string version = GetVersion(helper, filename);  
  34.             return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");  
  35.         }  
  36.     }  
  37. }  
My Layout page
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>@ViewBag.Title - My ASP.NET Application</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9. </head>  
  10. <body>  
  11.     <div class="navbar navbar-inverse navbar-fixed-top">  
  12.         <div class="container">  
  13.             <div class="navbar-header">  
  14.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  15.                     <span class="icon-bar"></span>  
  16.                     <span class="icon-bar"></span>  
  17.                     <span class="icon-bar"></span>  
  18.                 </button>  
  19.                 @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })  
  20.             </div>  
  21.             <div class="navbar-collapse collapse">  
  22.                 <ul class="nav navbar-nav">  
  23.                     <li>@Html.ActionLink("Home", "Index", "Home")</li>  
  24.                     <li>@Html.ActionLink("About", "About", "Home")</li>  
  25.                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
  26.                 </ul>  
  27.             </div>  
  28.         </div>  
  29.     </div>  
  30.     <div class="container body-content">  
  31.         @RenderBody()  
  32.         <hr />  
  33.         <footer>  
  34.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
  35.         </footer>  
  36.     </div>  
  37.   
  38.     @Scripts.Render("~/bundles/jquery")  
  39.     @Scripts.Render("~/bundles/bootstrap")  
  40.     @Html.IncludeVersionedJs("/Scripts/bootstrap.js")  
  41.     @RenderSection("scripts", required: false)  
  42. </body>  
  43. </html>  
Output
 


Similar Articles