TGIMBA .NET Core Upgrade – Adding Plumbing For HTML/Vanilla JavaScript Views

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

Today, we enter a new phase of the The Globe In My Bucket Application (TGIMBA) .NET Core rewrite. I am very excited because it took me a lot longer to get the Continuous Integration/Continuous Deployment (CI/CD) pipeline in place working the way I want. It is not perfect yet as when I do a deploy with existing files on my production site, it stalls because some of the .dll files are still in use. I hope to eventually figure out why this is the case as I can delete them manually.  But for now, I really want to move on to the fun part of this 🙂

For this blog post, I am going to start adding Hyper Text Markup Language (HTML) views with non JQuery Vanilla JavaScript and server C# code to handle its functionality. I will continue this process until all of the previous .NET 4.6.x site’s functionality is replaced. After, I will move into the styling portion of the re-write. I want to see if I can have truly one set of views/code that can handle desktop and mobile layouts dictated only by the Cascading Style Sheets (CSS).

Another change I am going to make is not to remove the Angular 4 Type Script files. I am hoping that I am missing something with the node_modules folder requirement and I can still do that layout. I made an interesting discovery while adding some static files. I did not know that static files were not available by default. So, I read a couple of articles and this one (reference #1) talked in more detail about the wwwroot in the project as well as the use of app.UseStaticFiles().  Essentially, placing any static files in the wwwroot and calling UseStaticFiles() in Startup.cs makes them available.

1

If this is the case, I will also no longer need the extra node install step on my CI/CD pipeline 🙂  After putting this call in Startup.cs, all my Angular views started showing up and working.

2

So, it ‘seems’ like I may have been wrong and the node_modules is not needed. But given how frustrating this was while dealing with my CI/CD pipeline, I am going to try doing the HTML/Vanilla JavaScript with the Angular 4 Type Script/HTML views in tandem. If it continues to work, I will have killed two birds with one stone – given TGIMBA an Angular 4/HTML AND a Vanilla JavaScript/HTML client. Ultimately, I also want to give it a React JS client too.

On to business 🙂

First decision is how complicated do I want to get? I really believe in Keep It Simple Stupid (KISS), so I am going to replicate the Model View Controller (MVC) approach with JavaScript and HTML. I will also keep it function based (similar to what I did with the previous TGIMBA .NET 4.6.x JQuery incarnation). Classes are not something the come super easy in JavaScript, so I will save those for the Angular 4/Type Script and React JS (assuming they do classes in React…I really do not know much about it yet) clients 🙂

To organize things a bit, I am going to create a Markup folder with views and another corresponding one under Scripts.

3

Inside Markup, I am going to place main.html. Eventually, this will be the ‘main’ content holder. I will load other HTML views via JavaScript in and out of it as the user interacts with the application (very much a single page application).

4

To access this, I have to put an entry point from the .NET Core application. I add a HtmlVanillaJsIndex() action to HomeController.cs.

5

When called, this controller action returns the corresponding .cshtml view. Inside the view, I load my javascript files, place a <div> with an id of ‘csHtmlContentDiv’ and call an Init() function.

6

This Init() function resides in Global.js. Since I do not want to use JQuery, I need the Vanilla JavaScript equivalent of $(‘html element’) to get a reference to the Document Object Model (DOM) HTML element I need. So, I shall first call on my old friend getElementById(). Init() calls Load() which then gets the HtmlVanillaJsIndex.cshtml div, verifies it is set and then loads the main.html file.

7

The null/undefined check is handled in Utilities.js

8

If there is an error, it is handled in ErrorHandler.js.

9

The load of main.html (thanks to reference #4) is handled in ServerCalls.js

10

Putting it all together:

11

In the next post, I will either add the Login HTML/code and/or attempt to unit test my JavaScript. If I can unit test it AND it runs on Visual Studio Team Systems (VSTS) in my CI/CD pipeline, I will do that. If I encounter issues, I may elect to use Selenium tests.

Stay tuned!

References

  1. https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.1&tabs=aspnetcore2x
  2. https://stackoverflow.com/questions/39116086/how-to-load-an-external-html-file?rq=1
  3. https://medium.com/@igorstimoli/pure-javascript-ajax-imagine-a-world-without-jquery-eb22d438df22
  4. https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript/21246938
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s