Skip to main content

Posts

Part-4 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13

The main objectives of this article: Create StudentController In API Project HTTP Get Action Method In API Project(Read Operation) Create Student Component In Angular Application. Create Student Model In Angular Application. Add A Student Service And Invoke GET Student API In Angular Application. Bind API Response In Student Component In Angular Application. Fix Cross-Origin Issue. Create StudentController In API Project: A controller is an entity or class that contains logical methods or function that gets executed for an HTTP request from the clients. So let's create the 'StudentController' in API Project. API_Project/Controllers/StudentController.cs: using Microsoft.AspNetCore.Mvc; using Student.Api.Data; namespace Student.Api.Controllers; [ApiController] [Route("[controller]")] public class StudentController: ControllerBase { private readonly MyWorldDbContext _myWorldDbContext; public StudentController(MyWorldDbContext myWorldDbContext) {

Part-3 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13

The main objectives of this article are: .NET6 Web API Install .NET6 SDK Create A .NET6 Web API Application. Entity Framework Core Install Entity Framework Core NuGet SQL Connectionstring Setup Entity Framework Core DatabaseContext. .NET6 Web API: Web API is a framework for building an HTTP service that can be accessed from any client like browser, mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data for their respective clients. Some of the key characteristics of  API: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML' and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The id

Part-2 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13

The main objectives of this artice are: Creating Angular 13 Application. Install And Configure Bootstrap Add Bootstrap Menu Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our coding cleaner and maintainable. Angular component composes of 3 files Typescript File(*.ts), Html File (*.html), CSS File(*.css). Components typescript file and HTML file support 2-way binding which means data transfer is bi-directional. Component typescript file listens for all HTML elements events from the Html file. Create Angular(v13) Application: Let's create an Angular(v13) application to begin our sample. Make sure to install the Angular CLI tool into our local because it provides easy CLI commands to play with the angular application or to set up the application. Command To Install CLI: npm install -g @angular/cli Run the below command to create an angular application. ng new name-of-your-project

Part-1 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13

The main objectives of the article are: .NET API And Angular Application Communication. Install SQL Server And SQL Management Studio. Create SQL Database Table .NET API And Angular Application Communication: User request the angular application(Single Page Application) then js files are downloaded and then runs the browser. Since Angular is a single-page application, it depends on API for data to display. API runs at the server that gives JSON response. API communicates with the database for fetching the data. Install SQL Server And SQL Management Studio: First, install SQL serve in our local machine. So go to line 'https://www.microsoft.com/en-in/sql-server/sql-server-downloads' and then install the developer version which is free and fully functional. Next, install the SSMS(SQL Server Management Studio) IDE at 'https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms' Create A Database: A Database contains a collection of tabes

Part-5 Blazor WebAssembly Cookie Authentication With Google Account

In this article, we are going to implement Blazor WebAssembly cookie authentication using Google. Part-4 Blazor WebAssembly Cookie Authentication With Microsoft Account Install Google Authentication NuGet In API Project: Let's install the Google Authentication NuGet package into our API Project .NET CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.Google --version 6.0.3 Package Manager: Install-Package Microsoft.AspNetCore.Authentication.Google -Version 6.0.3 Register API With Google: We need to register the API project with Google to enable Google authentication. So following are the registration steps with Google. Step1: Goto  'Google APIs&Services' at 'https://console.cloud.google.com/projectselector2/apis/dashboard' Step2: Click the 'Create Project' button. Stpe3: Now define the project name and then click on the 'Create' button. Step4: On creating a project successfully, we can observe it as a selected project in ou

Part-4 Blazor WebAssembly Cookie Authentication With Microsoft Account

In this article, we are going to implement Blazor WebAssembly cookie authentication using Microsoft Account(external login provider). Part-3 Blazor WebAssembly Cookie Authentication With Twitter Install Microsoft Authentication NuGet Package In API Project: Let's install the Microsoft authentication NuGet Package in API project. .NET CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.MicrosoftAccount --version 6.0.3 Package Manager: Install-Package Microsoft.AspNetCore.Authentication.MicrosoftAccount -Version 6.0.3 Register API With Microsoft Azure Portal: To enable Microsoft authentication to our application, we have to register our app into the Microsoft Azure portal. So following are steps to registering the app with the Microsoft portal. Step1: Go to the Azure portal 'https://portal.azure.com/'. Then select 'App Registration'. Step2: In the 'App Registration' page select the 'New Registration' button. Step3: Configure the