Now we can manage our HTML files and CSS that our Webserver will return to browser. To make it simple, we’ll add in our project two new folders: “html” and “css” where we’ll put our personal files.
In a simple way we can put a home.html and credits.html with style.css files in the folders.
The content could be like this:
The home.html
[code lang=”html”]
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>This is the main title of home page</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec consequat libero, ac malesuada neque. Morbi imperdiet volutpat tellus vel molestie. Nam vel sagittis eros. Curabitur cursus magna vitae ex condimentum volutpat. Vivamus nec ipsum nec libero iaculis maximus. Nulla facilisi. Aliquam imperdiet consequat velit id porttitor. Aliquam placerat ultricies dolor non faucibus.</span>
<p>Aenean id metus a est molestie dictum. Cras ac cursus magna. Sed vitae nisl nec libero gravida porta. Nulla in porttitor augue. Integer tincidunt dolor enim, at vehicula velit porttitor eget. Donec facilisis accumsan nisi, non mattis felis hendrerit in. Suspendisse imperdiet arcu vel justo porta maximus. In hac habitasse platea dictumst. Donec pretium eros sapien, sit amet pharetra massa tempus ut. Nulla facilisi. Aenean quis sodales sapien.</p>
</body>
</html>
[/code]
The credits.html
[code lang=”html”]<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CREDITS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>This is the <u>Credits</u> page</h1>
<span>developed by:</span>
<p>me</p>
</body>
</html>[/code]
The style.css
[code lang=”css”]body {
}
h1{
font-size:48px;
}
span{
color:#ff6a00;
}
p{
background-color:antiquewhite;
}[/code]
In the meantime, the server code could be like this:
[code lang=”c-sharp”]var htmlResponse = string.Empty;
switch (url)
{
case "/home.html":
htmlResponse = await GetFileContent("/html/home.html");
break;
case "/credits.html":
htmlResponse = await GetFileContent("/html/credits.html");
break;
case "/css/style.css":
htmlResponse = await GetFileContent("/css/style.css");
break;
default:
htmlResponse = $"<html><head><title>HTTP404</title></head><body>This is not the page you are looking for…<br/>And this is the QueryString {queryString}</body></html>";
break;
}[/code]
The secret to manage the file content is the GetFileContent. In this routine, we get the folder, open and read the file and return the exact content as flat text. Here is it:
[code lang=”c-sharp”]private async Task<string> GetFileContent(string filePath)
{
// acquire folder
var folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
// acquire file
var file = await folder.GetFileAsync(filePath.Replace(@"/", "\\"));
// read file
var readFile = await Windows.Storage.FileIO.ReadTextAsync(file);
// return it as ASCII text
return readFile;
}[/code]
Now if you run as is this code, it will not work. This is because we didn’t say to Visual Studio to copy the file to the destination target. To do that, select the file in the Solution Explorer and in the properties box choose “copy always” option.
Now you can run it for the first time and the result will be this one:
Our wonderful website is on line!
Next step will be manage the javascript files and get it running.
Stay tuned!
P.S. Take a look on the other post: