The jquery and javascript files, are only text files as html and css ones. But the management of actions linked to dynamics UI elements, is little bit more complex.
First of all we have to load the libraries. Structure properly our header page to be sure to load the jquery libraries. To make this, I preffer to download the jquery library (the min one) and save it in a folder in the project. Be sure to mark the file as “Copy always” and put this code in the header of html page:
[code lang=”HTML”]<script src="js/jquery-2.1.1.min.js"></script>[/code]
in this case, the browser will call our server to get the required file. Our webserver will be able to send him the corect file. This will be as 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;
case "/js/jquery-2.1.1.js":
htmlResponse = await GetFileContent("/js/jquery-2.1.1.min.js");
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]
Now our browser have the jquery library to manage the code and now we have to manage the code in the page. As all jquery procedures works, we’ll introduce the $(‘document’).ready function in our html home page as this:
[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">
<script src="js/jquery-2.1.1.js"></script>
</head>
<body>
<h1>The book list: click on the title to discover the author</h1>
§§ELEMENTS§§
<script>
$(‘document’).ready(function(){
§§SCRIPT§§
});
</script>
</body>
</html>
[/code]
Then now we can manage DOM from our code. To see if it works properly you can add an alert in the $(‘document’).ready function and after the loading of page, it will appear.
In the same way we can proceed to add dynamic scripts to our page. But we need a little trick to add custom script in the right place. In the $(‘document’).ready function we have to put a placeholder that we’ll replace with the right dynamic custom code. For example we can use §§SCRIPT§§ for that. But normally the scripts are linked to some DOM elements and we have to add the DOM’s elements too in dynamic mode. For perform that, we have to add in the <body> another placeholder §§ELEMENTS§§ to substitute with our HTML generated by our C# code. In our server-side we could have a collection of some elements that we would manage. For example a collection of books like this
[code lang=”c-sharp”]sealedclass Book
{
public int Id { get; set; } = 0;
public string Title{ get; set; } = string.Empty;
public string Author{ get; set; } = string.Empty;
}[/code]
and my collection will be
[code lang=”c-sharp”]public List<Books> myBooks = { new Book(){ Id = 1, Title ="Title 1", Author = "Author 1" }, new Book(){ Id = 2, Title ="Title 2", Author = "Author 2" }, new Book(){ Id = 3, Title ="Title 3", Author = "Author 3" }}[/code]
Now we would show in the home page the list of books’ titles and allow users to click on it and show the authos.
For do that, at page load we have to generate the HTML and script that we need.
[code lang=”c-sharp”]public string GenerateBody(){
var ret = string.Empty;
foreach(var item in myBooks){
ret += $"<div id=’book{item.Id}’>{item.Title}</div><br/>";
}
return ret;
}
public string GenerateScript()
{
var ret = string.Empty;
foreach(var item in myBooks){
ret += $"$(‘#book{item.Id}’).click(function()" + "{" +
$"alert(‘{item.Author}’);" +
"});";
}
return ret;
}[/code]
and now we can add to our page the scripts and the new items only with substitution of the placeholders. In the first snippet in this section, we had
[code lang=”c-sharp”]htmlResponse = await GetFileContent("/html/home.html");[/code]
now we can substitute the placeholders as
[code lang=”c-sharp”]htmlResponse = htmlResponse.Replace("§§ELEMENTS§§",GenerateBody());
htmlResponse = htmlResponse.Replace("§§SCRIPT§§",GenerateScript());[/code]
And this could be the result of our example
And now our WebServer is ready for the base functionalities. In the next article I’ll show how to refactor this project to avoid wrong management of pages and give right response to all the requests.
Stay tuned!
P.S. Take a look on the other posts of this series