Use Images, CSS and JavaScript in ASP.NET Core MVC 5

On the Visual Studio, select Create a new project from Get Started

Select ASP.NET Core Web Application

Input Project Name and select Location for new project

Select ASP.NET Core 5.0 Version and select ASP.NET Core Empty Template. Click Create button to finish

Create new folder named images in wwwroot folder. Copy images need to use in project to images folder.

Create new folder named css in wwwroot folder. In this folder, create new css file named style.css as below:

.format {
    color: red;
    font-size: 20px;
}

img {
    width: 120px;
    height: 100px;
}

Create new folder named js in wwwroot folder. In this folder, create new javascript file named mylib.js as below:

function clickMe() {
    alert('Hello World');
}

Open Startup.cs file and add new configurations as below:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace LearnASPNETCoreMVC5
{
    public class Startup
    {

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Demo}/{action=Index}/{id?}");
            });
        }
    }
}

Create new folder named Controllers. In this folder, create new controller named DemoController.cs as below:

using Microsoft.AspNetCore.Mvc;

namespace LearnASPNETCoreMVC5.Controllers
{
    [Route("demo")]
    public class DemoController : Controller
    {
        [Route("index")]
        [Route("")]
        [Route("~/")]
        public IActionResult Index()
        {
            return View();
        }
    }
}

Create new folder named Views. In this folder, create new folder named Demo. Create new view named Index.cshtml as below:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/style.css" rel="stylesheet" type="text/css" />
    <script src="~/js/mylib.js"></script>
</head>
<body>

    <h3 class="format">Index Page</h3>
    <img src="~/images/thumb1.gif" onclick="clickMe()" />

</body>
</html>

Access Index action in Demo controller with following url: http://localhost:48982/Demo/Index

Output

Create ASP.NET Core MVC 5 Project

Add Image Files

Add CSS Files

Add JavaScript Files

Add Configurations

Create Controller

Create View

Structure of ASP.NET Core MVC 5 Project

Run Application