Integration of .Net Web Api with Entity Framework – STEP BY STEP

 

There are more than one ways of integrating a .Net application with Entity Framework.

In this process, we shall be using

1. Web Api’s scaffolded template for controller creation
2.  Code First Approach in Entity Framework

Pre-requisites:

1.             This integration is done using .Net 6   

                2.  Using Visual Studio 2022

Process

1.      Create a Web Api Core project using C#. File => New Project => Asp.net Core Web API

a.       

 

2.      The project created should look like this in the solution explorer. Here we have named the project as ForEF.

a.      

3.      Create a new API controller using the scaffolded template for Entity Framework. Right-click on Controllers folder => Add => Controller

a.      

 

 

4.      Next choose the API controller => Actions using Entity Framework

a.      

b.      

 

5.      On clicking add, it should begin installing Entity Framework Code packages from nuget.

 

a.       

 

b.      You might get an error as below.

                                                               i.      

 

c.       In this case, please do the following. Close the dialogs for controller creation. In the solution explorer, Right-Click on Dependencies folder of your project => Manage Nuget Packages

                                                               i.      

 

d.      You will notice that the missing package is already installed.

                                                               i.      

 

6.      Open the file WeatherForecast.cs , from the solution Explorer.  This file could be any file that acts as the model for your application. A model file is a file that contains

a.      A default constructor

b.       Only properties

c.       

 

7.      Add a property to it, and mark it with the [Key] Attribute.

a.      

 

b.      The property marked with [Key] attribute, will become the primary key in the database table. The model class becomes, the table name while the properties become columns of the table

8.      Now, repeat the steps 3, 4. Your controller should be created successfully.

9.      In the Solution Explorer, find the file called “appSettings.json” and open it. In this file, we will need to provide the Database name as part of “Database” Setting. Please refer screenshot below. Here we have named the database as “ForEF”. Save the file and close.

a.      

10.  To automatically migrate to the database, please follow the two commands.

a.      Open Package Manager Console. Tools Menu => Nuget Package Manager => Package Manager Console

                                                               i.      

b.      This will open the package manager console as below. Two things must be done before adding any commands

                                                              i.      Set your project as the Startup Project. [Right-click on your project => Set As Startup Project]

                                                             ii.      In the Package Manager Console, your project should be the selected project in the Dropdown list

                                                           iii.     

 

c.       Build your project manually. [Right-click on your project => Build]

d.      In the Package Manager Console, add the following commands

                                                              i.      To create a migration.

1.      Add-Migration

a.      

 

                                                             ii.      Once this command completes successfully, add in the next command, to generate a database in MS SQL Server Express. The command is as follows

1.      Update-Database

a.       

 

                                                           iii.      The migration should be successful.

11.  ALTERNATIVE STE. USE IF ABOVE FAILS: If the Package Manager Console commands fail, by showing a build failure even when the Project is compiling properly, please use this method

a.      Open Developer Console. [View Menu => Terminal]

b.      Navigate to your projectDirectory inside the Developer Console.Check if the following command works.

YourProject/> dotnet-ef --version 

                                                              i.      If the above command works, then go to step (c), else follow the next step

YourProject/>dotnet tool install --global dotnet-ef  

c.       Now add the following commands one after another. The below command will create a migration file.

YourProject/>dotnet ef migrations add v1  

d.      The next command below will execute the migration file to create the Database and tables.

YourProject/>dotnet ef database update 

12.  Use either Step (10) or (11). No need to follow both. If the above steps are successful, you can verify whether your database is created in the SQL Server Object Explorer. [View => SQL Server Object Explorer]

                                                               i.     

 

 

 

 

 

 

 

 

 

 

 

 

 

Quick Tech Bits - React-Redux integration

To integrate react and redux, the installation of the library "react-redux" is required. The redux library should also be installed

 C:\Your_Project_Directory\>npm install redux react-redux 

** The github link for a simple sample application on this integration is available at this link

 Summarizing integration between and redux

1. import {connect} from 'react-redux' 

   This import should be done inside the react component that wishes to use the Redux Store

2. Write 2 functions in the above react component

i. mapStateToProps(): It will map the redux store to props of the react component

      Here, redux will allow the creation of props dynamically through code

ii. mapDispatchToProps(): Will take a function called dispatch as its parameter. This function will dispatch (invoke) the action that will invoke the reducer that will change the redux state. The changed redux state will be assigned to the object key (addUser)

that will be returned as a prop to the react component.

3. Call connect(). Connect(mapStateToProps, mapDispatchToProps)(YourReactComponent)

   This function will connect react & redux.

4. In react application, assuming that App.js is the container component, we add the Provider tag

   to integrate everything to a specific store of redux.

Inside App.js  

 <Provider store={yourReduxStoreObject}>

   <YourReactComponent/>

</Provider> 

 

Approach for students / learners of new software technology

 When you create small applications while learning new technologies, use the following approach.

These steps are focussed on the .net technology. So if you are a beginner for .Net, then while practicing applications, use the following approach.

Notes:

Approach a requirement

1. Write it down in notepad. Take part of the requirement, break it down into classes, properties, methods. If there are multiple classes, check if the classes are related to each other.

2. At this stage, start the boiler plate code. This means, create the skeleton structure.

Eg: Create the classes, properties and empty functions as decoded in step 1.

3. Start coding the logic.

4. Write the logic to display the output in the correct file and project.

=================================================

APPROACH: If output is not as per expectation

ANSWER: DEBUG

To Debug in .Net using Visual Studio, place a breakpoint by clicking on the grey margin of the code editor in Visual Studio.

1. Place the breakpoint where you wish to assess the code output live.

2. Run your application. The execution will stop  at the breakpoint. Here you can hover over the individual properties, parameters, variables to see the live output value.

3. Use the following keyboard shortcuts to debug code

a. Fn + F10 : Debug the next line of code

b. Fn + F11 : Debug (Step) inside the function call

c. Fn + Shift + F10: You do not want to debug the code below, so you want to let the code execute normally and only start debugging after the current function execution completes. This is known as Step Out (Start debugging outside the existing function)