.Net Core Configuration

appsettings.josn

{
"Name":  "Shalvin",
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

index.cshtml

@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
@{
    ViewData["Title"] = "Home Page";
}



<div>
    @Configuration["ComputerName"]
</div>

<div>@Configuration["Name"]</div>

C# Fundamentals

C# is a popular multi paradigm programming language. I am going to cover C# along with .Net Core.

While speaking about .Net there are two frameworks available. These is the .Net Framework which works only in Windows.
The other is .Net Core which is a multi platform open source technology.

While speaking about .Net there is a Common Language Runtime (CLR).  It is the platform on which the .Net Application works.

Another component of .Net is the Framework Class Library (FCL) which is a collection of classes.

dotnet
Once the .Net Core is installed you can acces the Command Line Interface (CLI) by typing dotnet in the command prompt.

dotnet --info
I can have more information about .Net Core by typing dotnet --info

dotnet --help
If you want help of .Net Command then type the command dotnet --help

dotnet new

Issuing dotnet new command will list the different Project templates available.

Task and async await in C#

While running an application, the application will spawn a thread.  As this thread execution completes the application exits.

private void HelloButton_Click(object sender, EventArgs e)
{
    Thread.Sleep(4000);
    MessageBox.Show("Hello");
}

In this example I causing the thread to sleep for 4 seconds by calling Thread class's Sleep method. Thread class is found within System.Threading namespace.  It is followed by a MessageBox. The UI will freeze till the MessageBox is shown.

It is possible to spawn additional treads by the main thread thread so that time consuming tasks won't freeze the applicaiton.

Task
Task is a specialized  Thread which implements Thread Pool.

private void HelloButton_Click(object sender, EventArgs e)
{
    Task.Run(() =>
    {
    Thread.Sleep(4000);
    MessageBox.Show("Hello");
    });
}

Let's create an application that fetching content from three web sites and display it in a text box.

In the first example is a Window Forms Application. Using WebClient class which follows the synchronous model. As you click the button the window freezes until the fetching of data is complete. This is because the whole application is running in the main thread.

 private void button1_Click(object sender, EventArgs e)
 {
     var sw = Stopwatch.StartNew();
     string data = string.Empty;
     var address = new List<string>
     {
        "https://www.msn.com/en-in",
        "https://www.irctc.co.in/"
      };
      var client = new WebClient();

      foreach (var item in address)
      {
          data += client.DownloadString(item);
      }

      textBox1.Text = data;
      sw.Stop();
      this.Text = sw.ElapsedMilliseconds.ToString();
    }

In the second example we are using HttpClient class which supports asynchronous class. Also we are using async and await.

private async void button1_Click(object sender, EventArgs e)
        {

            var sw = Stopwatch.StartNew();
            string data = string.Empty;
            var address = new List<string>
            {
                "https://www.msn.com/en-in",
                "https://www.irctc.co.in/"
            };
            var client = new HttpClient();
          
            List<Task<HttpResponseMessage>> responseTasks = new List<Task<HttpResponseMessage>>();
            foreach (var url in address)
            {
                Task<HttpResponseMessage> responseTask = client.GetAsync(url);
                responseTasks.Add(responseTask);
            }
            foreach (var responseTask in responseTasks)
            {
                HttpResponseMessage response = await responseTask;
                data = $"{data} {await response.Content.ReadAsStringAsync()}";
            }
            textBox1.Text = data;
            sw.Stop();
            this.Text = sw.ElapsedMilliseconds.ToString();
        }

Task.Run

private async void button2_Click(object sender, EventArgs e)
        {
            var sw = Stopwatch.StartNew();
            string data = string.Empty;
            var address = new List<string>
            {
                "https://www.msn.com/en-in",
                "https://www.irctc.co.in/"
            };
            var client = new HttpClient();

            List<Task<HttpResponseMessage>> responseTasks = new List<Task<HttpResponseMessage>>();
            foreach (var url in address)
            {
                Task<HttpResponseMessage> responseTask = Task.Run(() => client.GetAsync(url));
                responseTasks.Add(responseTask);
            }
            foreach (var responseTask in responseTasks)
            {
                HttpResponseMessage response = await responseTask;
                data = $"{data} {await response.Content.ReadAsStringAsync()}";
            }
            textBox1.Text = data;
            sw.Stop();
            this.Text = sw.ElapsedMilliseconds.ToString();
        }

Windows Forms DrawEllipse with async Await

  
      private  void Form1_Load(object sender, EventArgs e)
    {
        Task drawTask1 = DrawEllipseAsync(panel1);
        Task drawTask2 = DrawEllipseAsync(panel2);

    }

    private async Task DrawEllipseAsync(Panel panel)
    {
        Random rnd = new Random();

        for (int i = 0; i < 500; i++)
        {
            using (Graphics g = panel.CreateGraphics())
            {
                g.DrawEllipse(
                    Pens.Blue,
                    0,
                    0,
                    rnd.Next(this.Width),
                    rnd.Next(this.Height));
            }

            await Task.Delay(100);
        }
    }
}

MVC

using System.Collections.Generic;
using System.Diagnostics;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Mvc;

namespace WebClientMVC.Controllers
{
    public class HomeController : Controller
    {
        

        public ActionResult WebClientEg()
        {
            Stopwatch sw = Stopwatch.StartNew();
            string data = string.Empty;
            List<string> address = new List<string>
            {
                "https://www.msn.com/en-in",
                "https://www.irctc.co.in/"
             };

            using (var client = new WebClient())
            {
                foreach (var item in address)
                {
                    data += client.DownloadString(item);
                }
            }

            sw.Stop();
            ViewBag.Time = sw.ElapsedMilliseconds;
            ViewBag.Data = data;
            return View();
        }

        public async Task<ActionResult> HttpClientAsyncEg()
        {
            Stopwatch sw = Stopwatch.StartNew();
            string data = string.Empty;
            List<string> address = new List<string>
            {
                "https://www.msn.com/en-in",
                "https://www.irctc.co.in/"
             };

            using (var client = new HttpClient())
            {
                foreach (var item in address)
                {
                    var httpResponse = await client.GetAsync(item);
                    data += await httpResponse.Content.ReadAsStringAsync();
                }
            }

            sw.Stop();
            ViewBag.Time = sw.ElapsedMilliseconds;
            ViewBag.Data = data;
            return View();
        }
        public async Task<ActionResult> TaskAsync()
        {
            Stopwatch sw = Stopwatch.StartNew();
            string data = string.Empty;
            List<string> address = new List<string>
            {
                "https://www.msn.com/en-in",
                "https://www.irctc.co.in/"
             };
            List<Task<HttpResponseMessage>> tasks = new List<Task<HttpResponseMessage>>();

            using (var client = new HttpClient())
            {
                foreach (var item in address)
                {
                    tasks.Add(client.GetAsync(item));
                }
                foreach (var task in tasks)
                {
                    var httpResponse = await task;
                    data += await httpResponse.Content.ReadAsStringAsync();
                }
            }

            sw.Stop();
            ViewBag.Time = sw.ElapsedMilliseconds;
            ViewBag.Data = data;
            return View();
        }

Angular with .Net Core 3 and Visual Studio Code

Visual Studio Code is a cross platform light weight editor. Visual Studio Code can be used to work with a lot of languages and technologies including .Net Core and Angular.

Start a new  .Net Core  Angular Project with Authentication.

dotnet new angular -au Individual -o ngcore

The  above command will create a .Net Core project inside a folder called ngcore.

Navigate to the folder.

code .

Opens the current project folder in Visual Studio Code.

The ClientApp Folder contains the Angular app.

Open the terminal and issue the command

dotnet run 

A few packages are requires for creating Entity Framework Core and Web Api Controller.

 dotnet tool install --global dotnet-ef

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design    

dotnet add package Microsoft.EntityFrameworkCore.SqlServer

dotnet add package Microsoft.EntityFrameworkCore.Tools 

dotnet tool install --global dotnet-aspnet-codegenerator

Proceed on to create Database and Table using sqlcmd tool from terminnal.

sqlcmd -S .
 create database CM
go
use CM
 go
 create table Contacts (ContactId int identity(1,1) primary key, ContactName varchar(40), Location varchar(40))
 go
 insert into Contacts values ('Vishnu', 'Kochi'), ('Sarathlal', 'Kakkanad'), ('Vaishak', 'Palarivattom')
go

For scaffolding the DataContext

dotnet ef dbcontext scaffold  "Data Source=.;Initial Catalog=CM;Integrated Security=True" Microsoft.EntityFrameworkCore.SqlServer -o Models

It will create a DbContext with the Name CMContext (DatabaseName followed by Context suffix) and C# classes corresponding to Database Tables.

Now we want to create WebApis

dotnet-aspnet-codegenerator controller -name ContactsController -api -m ngcore.Models.Contacts -dc CMContext -outDir Controllers 

This command will create a WebApi with the name Contacts using Contact Class previously generated and  Context.

For using the DbContext we can to register it with the Dependency Injection Contrainer. Go to ConfigureServices section in Startup.cs


services.AddScoped<CMContext>();

The controller is ready. We can test the controller with following url https://localhost:5000/api/Contacts.

Angular 
Project created with ng new angular contains  both WebApi and Angular files. The Angular files are placed inside ClientApp folder.

Here I am creating a typescript class called contact.

export class Contact {
  contactId?: number;
  contactName?: string;
  location?: string;
}

HttpClient Get 

Since we have created the Angular project with Individual User Account a lot of code is getting adding. Along with that is the import statement for HttpClient.

Create a contacts componenet with the following command

>ng g c contacts -m appp

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Contact } from '../contact';

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {

  constructor( private http: HttpClient) { }

  ngOnInit() {
    this.showData();
  }
  contacts: Contact[];

  showData() {
    this.http.get<Contact[]>('https://localhost:44391/api/contacts')
      .subscribe(contacts => this.contacts = contacts);
  }
}

<p>contacts</p>

<ul>
  <li *ngFor="let contact of contacts">
    {{contact.contactName}}
  </li>
</ul>

{{contacts | json}}

HttpClient Post

import { Component, OnInit } from '@angular/core';
import { Contact } from '../contact';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-contact-insert',
  templateUrl: './contact-insert.component.html',
  styleUrls: ['./contact-insert.component.css']
})
export class ContactInsertComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  contact: Contact = {};
  Save() {
    this.http.post<Contact>('https://localhost:44391/api/contacts', this.contact, this.httpOptions)
      .subscribe(
      (data: any) => {
        console.log(data);
        alert('Record Saved')
      });
    
  }
}

<p>Contact Insert</p>

<div>
  <div>
    <label>Name</label>
    <input type="text" name="contactName" [(ngModel)]="contact.contactName" />
  </div>
  <div>
    <label>Location</label>
    <input type="text" name="contactName" [(ngModel)]="contact.location" />
  </div>
  <input type="button" name="name" value="Save" (click)="Save()" />
</div>

{{contact | json}}

Begin JQuery Certification Preparation with uCertify

uCertify is a provider of test preparation software for 400+ IT certification exams including Microsoft, Cisco, CIW, Adobe, PMI, etc. uCertify offered me access to an online PrepKit in exchange for an unbiased review. I tried their PrepKit for Begin JQuery course and found it to be comprehensive and useful.  

For me the best part of the Begin JQuery course is the collection of Practice Questions with full explanations. Besides that, there are Interactive Quizzes & a Pre-Assessment Test. The Practice Questions can be taken in Test, Learn & Review mode. Tips & Flash Cards to highlight points important for passing the exam. Test history & performance analytics reports help in gauging your progress, identify the areas you have mastered and helped you focus on areas which need improvement to pass the actual exam.

The test interface is neat. To their credit, however, the site is responsive and well-designed. It is easy to jump to topics of interest easily, It is worth trying out. 

I'm very sure that uCertify's PrepKit software is a good choice if you are looking for training materials for Begin JQuery certification and will enhance your skills overs all the topics such as animation, Ajax with jQuery, DOM manipulation with jQuery, traversing with DOM, writing jQuery plug-in, Ajax image slider, and many more.

Kerala Microsoft User Group TechDays

Register

Angular 4 Workshop - Prathidwani Tehnopark

http://www.techforum.prathidhwani.org/

Kerala Microsoft User Group Global Azure Bootcamp

http://azurebootcamp2017.k-mug.net/