1-Display Data from SQL-Server Table in React Js by using Default Template (Part-1)

Hello & As-salam u alikum ! , In this article we will learn to use React js with ASP.net Core .

 Step# 1:  

 Install Visual Studio 2019 ,Download from this link and install it.
https://visualstudio.microsoft.com/vs/community/

 Step# 2:  

Click on Create new Project -> asp.net core web application -->React js 

Step# 3:  

open Sql server and execute the following commands to create database and table & insert some records by your choice.

------------------------------------------------------------------------------------------------------

create database reactcorejs 

use reactcorejs

create table tbl_Employee(

EmployeeID int identity primary key,

Name nvarchar(50),

City nvarchar(50),

Department nvarchar(50),

Gender nvarchar(50)

)

--------------------------------------------------------------------------------------------------------

Step# 4:  

Right click on Controller folder and add empty Controller.

Step# 5:  

Right click on Project Solution Name and click on Manage Nuget Package.

Step# 6:  

Search for Microsoft.entityframeworkcore and Microsoft.entityframeworkcore.Tools

 Step# 7:  

Go to the package manager Console and type this :

Scaffold-DbContext "Server=.;Database=<databasename>;user id=<username>;password=<yourpassword>" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

after execution of this command a model folder will be added in which we have db-context class and model classes or entities. 

Step# 8:  

Go to the Controller which you had made in step 4

and add the following code.

-------------------------------------------------------------------------------------------------

   reactcorejsContext db = new reactcorejsContext();

        public IEnumerable<TblEmployee> GetEmployees()

        {

            return db.TblEmployee.ToList();

        }

-------------------------------------------------------------------------------------------------

 Step# 9:  

go to the Client app folder--->src--->componenets--->fetchdata.js 

and paste the below code.

 --------------------------------------------------------------------------------------------

import React, { Component } from 'react';

export class FetchData extends Component {

  static displayName = FetchData.name;

  constructor (props) {

    super(props);

    this.state = { forecasts: [], loading: true };

      fetch('Employee/GetEmployees')

      .then(response => response.json())

      .then(data => {

        this.setState({ forecasts: data, loading: false });

      });

  }

    static renderForecastsTable(forecasts)

    {

    return (

      <table className='table table-striped'>

        <thead>

          <tr>

            <th>id</th>

            <th>Name</th>

            <th>City</th>

             <th>Department</th>

          

          </tr>

        </thead>

        <tbody>

          {forecasts.map(forecast =>

              <tr key={forecast.employeeId}>

                  <td>{forecast.employeeId}</td>

                  <td>{forecast.name}</td>

                  <td>{forecast.city}</td>

                  <td>{forecast.department}</td>

                 

            </tr>

          )}

        </tbody>

      </table>

    );

  }

  render () {

    let contents = this.state.loading

      ? <p><em>Loading...</em></p>

      : FetchData.renderForecastsTable(this.state.forecasts);

    return (

      <div>

         

        {contents}

      </div>

    );

  }

}

--------------------------------------------------------------------------------------------------

Now run the project by pressing F5.