I have often read the common question in forum posts as how to insert the ASP.Net form data into a database and display it using the Web API. So based on the this requirement, I have decided to write this article. Let us start creating an application so beginners can also understand.
Now add the following method into the Repository Class named AddEmployee and GetAllEmp that does all the data access related activities:
Step 1 : Create Table and Stored Procedure
First create the table named Employee using the following script:
Now create a Stored Procedure to insert the data as:
Step 2 : Create Web Application
Step 3 : Create Property Class
Now Let us create the sample web application as follows:
- "Start" -> "All Programs" -> "Microsoft Visual Studio 2010".
- "File" -> "New Project" -> "C#" -> "Empty Project" (to avoid adding a master page).
- Provide the website a name such as "DisplayingFormDataUsingWebAPI" or another as you wish and specify the location.
- Then right-click on the Solution Explorer -> "Add New Item" -> Add Web Form.
- Drag and drop three text boxes and one Button onto the <form> section of the Default.aspx page.
Step 3 : Create Property Class
We have a .aspx Web form to insert the records. Now create the Property class named Employee class as in the following:
Step 4: Add Web API Controller Class
We created the preceding properties as in our table structure to insert the preceding employee details into the database. Now let us add a web API controller class into the web application by right-clicking on the project in the Solution Explorer and rename it EmpController with controller suffix.
Step 5: Create Repository Class to add and view records
The entire EmpRepository class file will be as follows:
Step 6: Create Post and Get method
Create a Post and Get method in the ASP.Net Web API Controller Class.
Open the EmpController class that we created, delete the existing methods and create the AddEmployees and GetAllEmp method and call the EmpRepository class method as in the following:
You have seen that the preceding EmpController class is inherited from the ApiController class and we have created the method AddEmployee that calls the EmpRepository class method named AddEmployees. The entire EmpController class will be as follows:
Step 7: Call ASP.Net Web API Controller method
Call the ASP.Net Web API Controller method from the .aspx page using JSON.
Now we need to call the Web API controller method from the .aspx page. To do this we need to create a JSON method using jQuery as in the following:
Now the entire default.aspx page will be as follows:
Now run the application, the UI will be as follows:
Now enter some records into the preceding fields and click on the Save button. Then the following screen shows the added records.
Now add another record.
Now you have seen how the insertion of records into the database and display it using Web API with Web Forms works.
- Do a proper validation such as date input values when implementing.
- Make the changes in the web.config file depending on your server details for the connection string.
You have learned here how to insert records into the database and display it using the ASP.Net Web API with Web Forms. I hope this article is useful for all readers. If you have a suggestion then please contact me.