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


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

22. July 2013

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" -->


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 , , , ,

How to use default required validators in HTML

21. March 2013

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 , ,