Anuj Chauhan

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

ASP.NET MVC Core, HTML5 Porting, HTML, ASP.NET MVC Core

How to keep header,footer and other common content in separate files while using HTML

Consider this example - you have 20 pages in your website and you have same header and footer in all of them , then what will you do ? Instead of copying and pasting the same code in all the pages , i suggest we should keep the common content in separate file and include these files to all the pages , by doing this we can modify the common content at on place and result will updated to all the pages automatically . To do this we will have to enable Server Side Includes ( SSI ) in web server .

You can check my posts to do so in Apache and IIS .

Now i presume that you have enabled the SSI in your web server . Let us code . We will keep all the content of common code in one file named header.shtml ( you must thing why shtml , shtml is to declare that this file may contain server side includes , i m declaring this so that if in future you want to add some SSI in header file also ) and will include this file in index.shtml , *.shtml so on to all the files where you want this code . 

Now we will add the following code to index.shtml ( .shtml extension is here to tell web server that it contains SSI ) where you want the header code to be included .

<!--#include virtual="header.shtml" -->

Remember 

1. <!-- #include virtual="header.shtml" --> is wrong because you gave a space in between <!-- & #include 

2. <!--#include virtual ="header.shtml" --> is wrong because you gave a space in between virtual & = 

3. <!--#include virtual="header.shtml"--> is wrong because you dint gave space in between .shtml" & -->

4. Keep in mind all the spaces as specified above before the remember heading .

Now as you will open the index.shtml all the content of header.shtml will be there in your file automatically.

HTML5 SSI, Server Side Include, HTML, Header, Footer

I just got to know something new ( i know its not a very recent thing its just i was unaware of it till date ) that we can use HTML 5 inbuilt validation . You just have to include 'required' word in <input> tag and there will be an automatic validator.

<input name="something" type="text" required />

HTML5 required, validator, HTML5