How to Add Js and CSS Files in ASP.NET Core

How to add js and css files in ASP.net Core?

I added the references inside the _Layout view, inside the <environment> tags:

<environment names="Development">
  <link rel="stylesheet" href="~/css/MyCss.css" />
</environment>

If anyone knows a better way I would welcome it

How to use css files or js in Area on ASP .NET Core

If the structure of our area is as follows :

You need to Copy these codes to the Configure section in Startup under the
app.UseStaticFiles()

app.UseStaticFiles(new StaticFileOptions()
   {
     FileProvider = new 
     PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), 
     "Areas\\Foo\\Content")),
      RequestPath = new PathString("/Foo/Content")
   });

and link the file like below :

 <link rel="stylesheet" href="/Foo/Content/bootstrap.min.css" />

How to dynamically add links to CSS and Javascript files in ASP.NET Core

I'm assuming the CSS files that are selected are persisted via a database by your CMS, and rather than having a static list of CSS ids, you're actually pull the info from a database. In that scenario, your best bet is a view component:

public class CustomCssViewComponent : ViewComponent
{
    private readonly MyContext _context;

    public CustomCssViewComponent(MyContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var ids = // pull in the ids from your context;
        return View(ids); 
    }
}

Now, you're essentially just passing in the ids as the model for the view backing this view component. So, go ahead and create that view at Views/Shared/Components/CustomCss/Default.cshtml:

@model List<int>
<link href="/css/customCss_@(String.Join("_", Model)).css" rel="stylesheet" />

Finally, in your layout or wherever you want this included:

@await Component.InvokeAsync("CustomCss")

Rinse and repeat with your custom JS. You can probably handle your custom HTML the same way, but you may also consider using custom tag helpers.

Add JavaScript Reference in asp.net core

In ASP.NET Core, static files such as javacript, css etc are serve to web browser from wwwroot folder.

Hence, you need to move these files into wwwroot folder and then reference files in _Layout.cshtml using <script src="~/JavaScript/GlobalJs.js"></script>

For more information, please refer this article

Including Css and Js files programatically in .Net Core Layout View

In ASP.NET Core, we don't use Server.MapPath. We want to use IHostingEnvironment instead.

In the file _Layout.cshtml, you could try:

@using Microsoft.AspNetCore.Hosting
@inject IHostingEnvironment environment
@{
    string path = string.Format("js/page/{0}/{1}.js", controllerName, actionName);
}
@if (System.IO.File.Exists(System.IO.Path.Combine(environment.WebRootPath, path)))
{
    <!-- file exist here... -->
}

---

In the controller, you can pass it via constructor:

public class HomeController : Controller
{
    private readonly IHostingEnvironment _environment;

    public HomeController(IHostingEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult Index()
    {
        string path = System.IO.Path.Combine(_environment.WebRootPath, "js/page/...");

        return View();
    }
}

Css and js files are not including into target project when I install my custom Nuget pack

If you nuget package contains css and js file.It is a client-side library.
For client library,when you install the nuget package,it would not shown in your project.It would exist in %UserProfile%\.nuget\package by default.

Microsoft produce a lightweight, effective solution for web developers to easily manage common client-side library files——Libman.

If your package is not provided by official csdn,you could specify the library's location like below:

1. Choose the Provider(filesystem)
2. Choose the library's location
3. Type the Target location

4. Click Install button and it would generate the following code in libman.json like below:

   {
     "version": "1.0",
     "defaultProvider": "cdnjs",
     "libraries": [
       {
         "provider": "filesystem",
         "library": "C:\\Users\\XXX\\XX\\",
         "destination": "wwwroot/lib/Chart/Content/"
       },
       ...
     ] 
   }
   

Reference:

• https://stackoverflow.com/a/29200530/11398810

• https://stackoverflow.com/a/43497854/11398810

---

Related Topics