Searching records between two dates is very simple. In this article, we will see how we can perform this using a stored procedure with Web API and ReactJS.


  • Basic Knowledge of ReactJS.
  • Visual Studio Code.
  • Visual studio and SQL Server Management studio.
  • Node and NPM installed.
  • Bootstrap.
  • React-datepicker.

Create a React.js Project

To create a new React project, open the command prompt and enter the following command:

Open the newly created project in Visual Studio Code and add Bootstrap to it by using the following command.

Now, open the index.js file and add the Bootstrap reference.

Now, install the react-datepicker library in this project by using the following command:

Install Axios by using the following command. Learn more about Axios library.

Now, go to the src folder and create a new component, Searchdata.js and add the following code to the component:

Add a reference to the component in the app.js file:

Create a Table in the Database

Create a stored procedure to find the data between two dates:

Create a New Web API Project

Open Visual Studio and create a new project. 

Creating a new project

Change the name to Searchdata and click ok

Changing project name

Select Web API as the template. 

Selecting Web API as template

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

Adding new item

Click on the “ADO.NET Entity Data Model” option and click “Add”. 

Adding ADO.NET Entity Data Model

Select EF Designer from the database and click the Next button:  

Selecting EF Designer

Add the connection properties, select the database name on the next page, and click OK.

Connecting to database

Check the Table and stored procedures checkbox. The internal options will be selected by default. Now, click the Finish button. 

Checking Table and stored procedures checkbox

Our data model is successfully created now.

Right-click on the Models folder and add a class, searchdata. Now, paste the following code in this class:

Right-click on the Controllers folder and add a new controller. Name it “Searchdata controller” and add the following namespace in the Searchdata controller.  

Now, add two methods to fetch data and search data by dates from the database.

Now, let’s enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the “Microsoft.Asp.Net.WebApi.Cors” package. Open Webapiconfig.cs and add the following lines:

Now, go to Visual Studio Code and run the project by using the following command: npm start

Now, select dates from the date pickers and click on the search button.

Source link

Write A Comment