Porting HTML5 Template to ASP.NET MVC Core View

20. April 2020

Whenever porting a HTML template to ASP.NET MVC Core view we have to keep in mind that the path for resources like image , css , scripts should always be coded with '/' before the folder name . For Example -

If you have a template named Clanstech with folder structure as  mentioned in below image.

With code in about.html will be like

<link rel="stylesheet" href="assets/css/aos.css">

In order to use the above css file in ASP.NET MVC Core project with the following structure

We will have to use the following code

<link rel="stylesheet" href="/assets/css/aos.css">

If we dint add '/' before assets folder then it will not load the css file if the user is on suppose /localhost:876/Home/About action/page/view.

To get more idea how file path works , below is the correct usage as shown on this link also https://www.w3schools.com/html/html_filepaths.asp


HTML File Paths

<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder