{{announcement.body}}
{{announcement.title}}

How to Search Records Between Two Dates Using Web API and ReactJS

DZone 's Guide to

How to Search Records Between Two Dates Using Web API and ReactJS

In this article, we discuss how to search records between two dates using Web API, ReactJS, C#, and SQL Server.

· Web Dev Zone ·
Free Resource

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.

Prerequisites

  • 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:

Shell


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

Shell


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

JavaScript

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

Shell


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

Shell


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

JavaScript


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

JavaScript


Create a Table in the Database

SQL


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

SQL


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:

C#


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

C#


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

C#


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:

C#

 
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.

Topics:
c# ,mssql ,reactjs ,tutorial ,web api ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}