Part 11 : Toggle Button With State

In this article I will show you how html div content show/hide on click of button. Both can be achieved with class and functional based component. Source code available here.
Function based component: To implement show, hide functionality need to maintain state on toggle button. Once button click flag will set to true and content shown on browser window, again toggle button click flag set to false and content hide on browser window.
I’m also using ternary operator in this article, let’s understand first ternary operator. It is not new already supported in modern languages like JavaScript, c#, java, python,…etc. It is nothing but short or compact form of if else.
Syntax : (expression) ? true condition statement : false condition statement

I have created button at line number 21 and created Toggledata variable at line number 12 with useState and created function toggleData which is called by toggle button for maintaining show and hide functionality. Turnery expression created on line number 23, ToggleData hold either true or false and based on result div show or hide (null). Run application and check browser window.

Click on toggle button and Employee List of IT department gets disappear.

Class based component:

Source code available here.
Replace below screen code in App.js.

For Component, need to import Component class written in line number 1. Its package provided by react library. Here Class is used instead of function at line number 5. For updating state in class based component setState function is used at line number 16. Which automatically update ShowEmployees under state array. Run application and check browser window. Its working same as it worked for function based component. I already provided screen above for functional component.

Part 5: API Call using Postman and HTTP Client

#5 minutes of reading In this article I will show you calling API using postman tool and consuming API in other application like asp.net core. Web API can be consumed in any application like asp.net core, console application etc with the help of HTTP Client.
Once postman downloaded, select get request and paste URL highlighted below after Get request dropdown.

Click on Send button and API response data/information loaded under Body section.
  Now lets consume the API from asp.net core 3.1 web application, create asp.net core web application template shown below. Source code available here

Provide name for an application.

  Select .net Core framework SDK 3.1

  Project gets created now Open Startup.cs file. By default startup file comes with default code shown below. I have explain about startup.cs file in my asp.net core web application series for more details please visit here.

As per below screen update ConfigureServices method in startup.cs file. Highlighted line of code is registering Http Client service for core web application.

  Create Model class with name WeatherForecast and properties. It’s a user defined data type need to create for holding data returned from web API.

Create LoadData action method, I have injected IHttpCLientFactory in constructor (dependency injection). By default core provide dependency injection.
LoadData method call WeatherForecast API Get method. For consuming API I’m using IHttpClientFactory interface which create instance of Http Client using CreateClient method written in line number 30.
Once instance created need to provide MediaType like information/data read in Json or XML format.

  Create View for LoadData method and add below piece of code in LoadData.cshtml view to render api data here.

Let’s run application and check browser window for output.

Part 4 : Creating WeatherForcast API

# 3 minutes of reading

I’m using visual studio 2019 version 16.9.2 for creating Web API project. By default Core provide API template which create default WeatherForecast controller and render json data on browser. Lets understand with below example.
Select API template from below screen, make sure highlighted filters applied like language is c#, Windows OS and Web application.

Provide meaningfull name to your project.

For API series I’m using .Net Core 3.1 SDK shown below

Project gets created with API template. Below is highlighted controller class. All Http methods (GET, PUT, POST, and DELETE) methods written in API and data/information required to rendered on browser can retrive from other classes or projects like (entity framework, business layers, Inmemory data). I will show in coming articles.

As discussed Weatherforcast controller gets created default with template and once execute API application Json data gets rendered on browser.

Above highlighted controller name is required as it is attribute routing, I will explain later about attribute routing.
For API testing Postman is used heavily, download postman software from here. Postman is heavily used for API testing. I will show you how can we test our API using Postman.
But in real time API gets called with the help of jQuery Ajax call by enabling CORS or HTTP Client. I will show you as we progress through the course.

Part 10: Two way binding

# 5 minutes of reading

In this article I want to implement two-way binding with textbox available in each card. By default, in html text field it shows name of employee. If someone modify the text in html text field, employee name under header tag gets change. Let’s see implementation bellow.

I Ihave created separate handler with name EditText highlighted below. Now here rather hardcoding name I’m using event object and event object contain html text and I will get value of text using event.target.value shown in line number 38.
Add property in Employee tag which contain reference of EditText method. I’m passing method reference as property from App.js to Employee component.

Now let’s modify Employee.js and modify JSX code/ employee component. Add textbox for each card.

Switch to browser and check now.

This is not expected, but it will work like this lets check piece of code written in EditText method.
For all name field I’m updating event.target.value. To fix this I have to create 4 different methods

Switch to browser window change name in first textbox.

Again, there are limitations with this piece of code which I will cover as we progress through with this course.

Part 3 : Hello Sample

Let’s create simple example of Web API ‘Hello World’. I’m using Visual Studio 2019 community version and Core 3.1 SDK.
Create Web API project shown below.

Click on Next button, enter proper name for your project and click on Next button.

  Select API template highlighted and click on create button.

Project gets created for Hello Sample.

  Delete above highlighted file from project WeatherForecastController.CS.

Add new controller class with name Hello and write down below highlighted piece of code.

  Run application and type below highlighted URL. Hello message gets printed on browser

From next article for API testing I'm not going to use browser but postman as it is recommended tool for API testing and great advantage. I will show you as we procced with this series.

Part 2 : Http Methods

#2 minutes of Reading

HTTP Request
Http is protocol used for exchanging data on Web(internet). It require Client server architecture client can be browser, mobile, IOT, etc and application or web API hosted on web servers like IIS or apache.
An Http request is nothing but massage which is send by client computer to server computer with the help of HTTP protocol. Server process on Http request send by client and return response based on request.
Http request categorized in below types:
• Request Line (path)
• Request Header
• Request Body
Request Line is nothing but information of which type of Http method (Get/Post,), Service URI and protocol.
e.g. Get/api/Employee (Http 1.1/2)
Header holds metadata of request in key value pairs.
Request Body contains information which client want to send to server for processing. Request body usually using with Post and Put request.

HTTP Methods:
HTTP method categorized in below.
Get: It is used to get information from server in Json or XML format
Head: It is same as Get but not support response body and support only response header.
Post: It is used to send information from client to server using request body. Adding resource on server side, post request is used like for inserting data.
Put: It is used to alter resource om server side.
Delete: It is used to delete resource from

Http Status Code:
Http request executed on server side and resource returned to client with status code with message of the status code.

PArt 1 : Web API Introduction

In this article I will discuss on what is web API and implementation of web API in Asp.Net Core 3.1.
Let’s understand first What is an API?
API (application program interface) again piece of code, protocol and subroutine for building software’s. In another term API is already developed software or tool and client needs to consume it. Now Web API is the API over the web, and it can be used with the help of HTTP protocol. Web API is concept and supported by different technologies .Net, Python, Java etc.

Why Web API is in demand today? Let’s understand below real time example.
Suppose cell phone charger with and without USB Port. Shown in below screen.

Above charger is normal charger without USB. To charge mobile battery I must need to use electric socket only.
Charger with USB connection.

Above charger with USB cable can be used not only with electric socket but multiple devices like laptop, desktop, car, etc. Same USB cable is used for charging mobile, exchanging data and it can be reused in multiple devices. One USB cable communicating with multiple devices. Same concept applicable with Web API, WEB API can be reused in multiple technologies like for desktop application, web applications, browsers, mobiles, etc.

WEB API provides set of instruction which allows clients to consume services provided by an API. Implementation of API is hidden from clients, but API provide enough information to client for accessing information from Web API.

  In this series I will show you WEB API with Rest (Representational State Transfer). Rest is an architectural style with set of principles used for building WEB API.
WEB API needs to follow condition or set of rules provided by REST to become Restful API. Rest is nothing but guide or set of rules to develop an API.

For Web API to be restful, API should follow below points.
1.Separation of Client and Server: Follow client-server architecture, implementation of server and client hidden from both. Client can be anyone capable of communicating via HTTP protocol.
2.Uniform Interface: Uniform interface is nothing but an idea of transmitting information in standardized way.
3.Stateless Protocol: As HTTP is stateless protocol, each request should contain appropriate information to communicate with server and processing further operation on server side. Both client and server not aware about current state. Request should contain all information to achieve current task.
4.Cache: Client can cache frequently required resources at client side and load information next time from cache.
5.Code On Demand: An option of sending back piece of code(javascript) to client.

Part 9 : Method call from Child Component to Parent

#5 Minutes Of Reading

In this article I will show you how to pass parameter to method while updating react component on click of button.
Open App.js file and replace highlighted piece of code.

There are three buttons and two button created to explain Arrow function in javascript. If arrow function written in one line no need to type return keyword by default it will return (line number 44). But arrow function is not written or exceed line of code more than one line then you must need to write return keyword (line number 45). I have created 3 buttons and all are doing same thing but different way of implementation. Bind keyword (line number 43) for sending/passing data to method is more efficient than arrow function.

Click on Modify data and observe changes in below screen.

Click on other two button, basically all buttons modifying UI and in background all three-button sending parameter to method which is updating data in background for react component.
Now I want apply click event on 4th card (ID:103) highlighted above screen. But ID field is part of employee component which is child and App is parent component. But actual state managed in App component and I want to perform onclick from Employee component which is stateless. Basically I want to perform same operation which is currently ModifyData button click is performing. H2 tag of employee component also perform same operation or calling same method which is implemented for modifyData button.
But the problem here is modifyData method available in App.js and I want to call this method in Employee.Js. To achieve this, I will pass reference of method (modifyData) as property from App component to Employee component. Shown in below screen highlighted.

Update Employee.Js file and add click event.

Save file and switch to browser window. Click on h2 tag of forth card which is (Id: 103) and it change name of employee on first card.

Click on Id:103 highlighted, it will replace name from Arti to Sahil.

Blogs By Asif Sayyad

Token Based Authentication :
JWT Token Based Authorization in Asp.Net Core API


Asp.Net Core 3.1
Part 1 .Net Core Framework
Part 2: Features of Asp.Net Core 3.1 and VS installation
Create Asp.Net Core project using .NET CLI
Part 4: Create Asp.Net Core project using VS and Program class in Asp.Net Core
Part 5 : Hosting Models in Asp.Net Core 3.1
Part 6: Middleware in Asp.Net Core
Part 7 : Custom Middlware in asp.net Core application
Part 8 : Developer Exception Page
Part 9: Launch Setting and App setting Json File
Part 10: Static Files in Asp.Net Core 3.1
Part 11: MVC Configuration in Asp.Net Core 3.1
Part 12: MVC Pattern in Asp.Net Core
Part 13: Model Controller and View
Part 14: Routing in Asp.Net Core 3.1
Part 15 : Tag Helpers
Part 16: Model binding and exchanging data between view and model
Part 17: Dependency Injection in Asp.Net Core 3.1
Part 18: DI services (Singleton, Transient and Scoped)
Part 19: Entity Framework in Core 3.1
Part 20 : Mini Project with Entity Framework Code First
Part 21: Dependency injection with Repository pattern
Part 22: ProductDetails Controller with Generic Contracts
Part 23: Image upload for ProductDetails Controller
Part 24: Brand Name DropDownList
Part 25: Authentication In Asp.Net Core 3.1
Part 26: Authentication using Identity in Asp.Net core 3.1
Part 27: Login and Register action Link
Part 28: Authorization and Managing Roles in Asp.Net Core 3.1
Part 29: Handling Http Errors (404, 500 ..)
Part 30: Buy Product and Cart Functionality
Part 31: Removing Items From Cart
Part 32 : Calling stored procedure using EF core


Asp.Net Core API
Part 1 : Introduction
Part 2 : Http Methods
Part 3 : Hello Sample
Part 4 : WeatherForecast Service
Part 5 : Consuming WeatherForecast service
Part 6 : Exchanging data in Web API
Part 7 : Exchanging Data in API - 2
Part 8 : EF Core in Web API
Part 9 : Accessing Values From Different Configuration
Part 10 : Consuming API from Console Application
Part 11 : Token Based Authentication In Web API


MVC 5 Blogs
Asp.Net MVC Architecture and Routing
ASP.NET MVC 5 : Layout and ViewStart View
ActionResult In MVC5
Validation in MVC 5
CRUD Operation Using EF6.0 Code First in Asp.Net MVC 5
HTML Helpers in MVC 5 Part 1
HTML Helpers in MVC 5 Part 2
ViewData ViewBag and TempData
Partial View Part 1
Partial View Part 2 With JQuery Ajax
Areas In MVC 5
Error Handling In MVC


MS SQL Server Blogs
Over Clause with Ranking and Aggregate functions
Functions
Stored Procedure
Triggers
DDL Trigger
SQL Join

React JS
Part 1: React JS ?
Part 2 : React Render Method with component
Part 3 : Environment Setup and Creating First React App
Part 4 : React Project structure
Part 5 : React Component
Part 6 : Create New React Component
Part 7: Update Component data using button(event).
Part 8: Function based component
Part 9 : Method call from Child Component to Parent
Part 10 : Two way binding
Part 11 : Toggle Functionality in React
Part 12 : Deleting Employee Card
Part 13: Edit Employee Card
Part 14 : Apply CSS Dynamically in React
Part 15 : Pseudo class selector in React

Part 8: Function based component

#2 Minutes Of Reading

In this article I will show you function based component. Functional based component supported in react version 16.8 with react Hook. UseState class from Hook supports functional component in react.Actually, I'm using library(UseState) from Hook but in real Hook support lot of things as library and I will show you as we progress through this course.
Open App.js file and replace class with function shown below. Also, in functional component a function can have function inside (modifyData arrow function).
Code for App.js file available here

Refresh browser window.

Click on modifyData button and refresh browser.

So till now I shown you we can manage state in react component using UseState class in function based component and for class based component Component class is used to manage state of component. There are two types of component stateful component and stateless component.
1. Stateful component: Component managing state with class based or function based called stateful component. Component used in App.js file is stateful component. This is the parent component calling Employee component(child) from employee.js file.
2. Stateless component: Component without state property is called stateless component. Employee component in Employee.js is stateless component.
Stateless component is lightweight as compared to stateful.

Part 31: Removing Items From Cart

# 5 Minutes Of Reading In this article I will show you removing item from cart. But before fix issue of Cart controller index view which is not updating item count properly.

Run application again and update cart quantity.

Currently count is 2 and I made it 4 using quantity field from index view of Cart controller shown above highlighted. Click on add button (+).

It is working as expected now.
  Open Cart controller and add below piece of code.

Open Index view of cart controller and update below highlighted piece of code.

Run application and check browser window. Click on remove button

Item from cart deleted successfully but Index view of Cart controller not updated after deleting item from cart and still shown cart item on index page. Refresh browser window and you observe now Index page updated and showing no item.

Index automatically gets refreshed once item deleted successfully from cart. Open cart controller and modify shown in below screen.

Add empty view for load cart and create view as partial view shown below.

  Add below code in load cart item or just copied razor code from index view of cart controller and verify with below screen.

Open Index action of Cart controller and update razor code shown below. Now I’m using partial view to load cart items and ajax jquery function to load partial view in HTML div (dvCart) available in Index view of cart controller.

Now run application add item in cart if not and click on remove item from Cart index view. This time it will refresh page and show you updated items on Index page of cart controller.   I have added two items in my cart.

Click on Remove button highlighted.