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.
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.
Change the name to Searchdata and click ok.
Select Web API as the template.
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
Click on the “ADO.NET Entity Data Model” option and click “Add”.
Select EF Designer from the database and click the Next button:
Add the connection properties, select the database name on the next page, and click OK.
Check the Table and stored procedures checkbox. The internal options will be selected by default. Now, click the Finish button.
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:
Now, select dates from the date pickers and click on the search button.