Tech Seeker

The main objectives of this article are: Create Get By Id Endpoint In API Project. Creating Update Endpoint In API Project. Creating A React Component To Show Update Form Create Get By Id Endpoint In API Project: To update any record, we first need to fetch it by its 'id'. So let's create a get id by an endpoint in our API project. API_Project/Controllers/SuperVillainController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var villainById = await _reactJSDemoContext .SuperVillain.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(villainById); } (Line: 2)Since it is a second HTTP Get Action method, so we have to explicitly specify the route. The route expression '{id:int}' represent 'id' value must be integer value. (Line: 5-7) Fetching the record by 'id' from the database. Create Update Endpoint In API Project: Let's create the HTTP PUT action method. API_Project/Controllers/Supe

The main objectives of this article are: Create HTTP Post endpoint in API Project. Create React JS component with a form to add a new item Create Post Endpoint Action Method In API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/SuperVillainController.cs: [HttpPost] public async Task<IActionResult> Post(SuperVillain newSuperVillain) { _reactJSDemoContext.SuperVillain.Add(newSuperVillain); await _reactJSDemoContext.SaveChangesAsync(); return Ok(newSuperVillain); } (Line: 1) The 'HttpPost' attribute makes our action method invoke only for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as a payload input parameter. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create 'AddSuperVillain' Component In React App: On the 'pages' folder

The main objectives of this article are: Create an API endpoint to fetch all records Create ReactJS component to display all records Create 'SuperVillain' Controller 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. Let's create a controller 'SuperVillianController.cs'. API_Project/Controllers/SuperVillianController.cs: using Microsoft.AspNetCore.Mvc; using ReactDemo.API.Data; namespace ReactDemo.API.Controllers; [ApiController] [Route("[controller]")] public class SuperVillainController : ControllerBase { private readonly ReactJSDemoContext _reactJSDemoContext; public SuperVillainController(ReactJSDemoContext reactJSDemoContext) { _reactJSDemoContext = reactJSDemoContext; } } (Line: 6) The 'ApiController' attribute applies all API rules to the controller. (Line: 7) The 'Route("[controller]")' attribute

The main objectives of this article are: .Net6 Web API Install .NET6 SDK Create .Net6 Web API Application Entity Framework Core  Install Entity Framework Core NuGet SQL Connectionstring Setup Entity Framework Core Database Context .NET6 Web API: Web API is a framework for building an HTTP service that can be accessed by any client like a 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 are: 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 ide

The main objectives of this article are: Creating React JS(v18) Application. Install React JS Bootstrap Add Bootstrap Menu Create React JS Application: To create a React JS application our local machine should contain NodeJS. So go to "https://nodejs.org/en/download/". Command to create the ReactJS application. npx create-react-app my-app Command to run and start the ReactJS server. npm start Let's go through the project and explore important files. index.html:  Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contained a 'div' element whose 'id' value is 'root', inside of this element all ReactJS components get rendered. index.js: Entry javascript file for ReactJS. It helps paint 'App' component content in 'index.html'. App.js: The 'App.js' react component. It returns the 'JSX'(Javascript XML) content(JSX means writing HTML code inside of javascript dir

The main objective of the article are: .Net 6 Web API And React (V18) Application Communication Install SQL Server And SQL Management Studio Create A SQL Database Create A SQL Database Table .Net6 Web API And React(V18) Application Communication: User requests the React JS application(single page application) then js files are downloaded and then runs the app on the browser. Since React JS 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 The SQL Server And SQL Management Studio: First, install the SQL server on our local machine. So go to "https://www.microsoft.com/en-in/sql-server/sql-server-downloads" and then install the developer version which is accessible 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?view=sql-

In this article, we will implement authentication routing guards and also implement interceptors to invoke the refresh token API. Click here for part-1 angular jwt token authentication & refresh token . Route Guards: In our current sample, we have an issue with the navigation that is like after login user can access the login page which is not correct, and without login can access the 'fav-movies' page. So we can correct this issue by integrating the routing guards. Let's create a routing guard service like 'AuthGuard'. ng generate class shared/auth/auth-guard --skip-tests src/app/shared/auth/auth-guard.ts: import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(priv