TGIMBA .NET Core Upgrade – JQuery Login

Git  Code Commit (this and all commits back to my last blog post)

Welcome back!

This post will deal with adding a JQuery JavaScript client and its login screen. I will be borrowing a lot from the .NET 4.6.X TGIMBA (https://github.com/ehelin/TGIMBA). However, the new parts will be views (versus code generated Hyper Text Markup Language (HTML)) and it is on a .NET Core server.

While working through my old .NET 4.6.x code, I realized how much I borrowed for the Vanilla JavaScript code. So, to prevent duplication, I created a common folder for the following JavaScript files that are used by both clients. Part of the reason this makes sense is not only because code should only exist once, but by having the common file approach, my existing JavaScript unit tests will cover both the Vanilla and JQuery JavaScript.

They are:

1

After this, the next step is to load the HTML login view (to further reduce duplication, I am using the same views). To load the login view, I am using pretty much the same code. The differences are how the ‘contentDiv’ is being accessed and how it is loaded.

‘contentDiv ‘ is accessed in Display.js

2

It is loaded in ServerCalls.js -> GetView(args).  GetView(args) calls a central JQuery Ajax call I have borrowed from previous code base.

3

To share the login view, I had to make the title dynamic. More specifically:

  • I replaced the previous title with a label that has an id.

4

  • I set the title for the Vanilla JavaScript when the view loads

5

  • I set the title for the JQuery code when the view loads

6

I am using the Vanilla JavaScript to grab the user name and password from the view. However, to be able ‘route’ to the correct code (i.e. JQuery or Vanilla JavaScript), I added session variable for the client to know how to direct them.
7

I then added ‘IsJQueryClient()’ to the common Utilities.js module to determine which client to load.

More specifically:

  • If the JQuery client launches via the document.ready handler, I set the session client as JQuery.

9

  • If the Vanilla JavaScript client launches for the bo…, I set the session client as Vanilla JavaScript:

8

Posting the username and password to the server is a little different. What I got to work was using an C# object in the controller post call (separate from the Vanilla JavaScript call) and tying it to a JSON object.

  • Controller

11

  • JQuery

10

I am handling the logged in/not logged via an alert for now. I will decide how to handle the common views when I get into a couple of more pages.

The next post will be about adding a React JS login page.  Remember, to make this interesting and learn as much as possible about the ‘hot’ web client technologies, I am creating each page in each technology.

Stay tuned!

References

  1. http://css-plus.com/2010/03/6-steps-to-take-if-your-jquery-is-not
  2. https://stackoverflow.com/questions/7139208/change-content-of-div-jquery
  3. https://stackoverflow.com/questions/5756147/basic-simple-asp-net-jquery-json-example
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