Post
Ask Question

Insert Data into a Database and Show in GridView in ASP.NET

Introduction


Hello guys, in this article, I will tell you how to store data in a database and show the data in Grid View in ASP.NET. I will also tell give you a step-by-step process of how to show data in Grid View from a database.

Step 1
 
Open your Visual Studio and create a new project from Menu, File > New > Project, or you can use the short cut key, ctrl+Shift+N.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 2
 
Choose ASP.NET Web Form site from the various options and click on the next button.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 3
 
Now you see a new screen where you need to insert a few details, like your project name, your project location and the framework of your project. After answering all the details, click on the create button.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 4
 
Now your project is created. Add a new item into your project by right-clicking on your project name, > Add >Add New item, or you can use the short cut key Ctrl+Shift+A
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 5
 
Now select the Web Form option from the various items and give an appropriate name to your form, then click on Add.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 6
 
Now create a design as you need, here I only added Name, Age and City, as you can see in the below image.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 7
 
Add a New Database to your project by right-clicking on your Project name > Add > Add New item. Select SQL Server Database from the list and give the database name. Then click on Add name.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Note
When you click on the add button, it gives you the prompt that you need to add this database file in the App_Data folder in your project. Click on the Yes Button to add App_Data folder in your project if it doesn't already exist.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C# 

Step 8
 
Now you need to place a table in your database. To create database, double click on your database file. It will open in Server Explorer. Right-click on Tables folder > Add new Table

Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Here, I created a table with four fields Id, name, age, and city, where Id is auto-incremented by 1.
  1. CREATE TABLE [dbo].[Table] (  
  2.     [Id]   INT          NOT NULL IDENTITY,  
  3.     [name] VARCHAR (50) NULL,  
  4.     [age]  INT          NULL,  
  5.     [city] VARCHAR (50) NULL,  
  6.     PRIMARY KEY CLUSTERED ([Id] ASC)  
  7. ); 

 

Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 9

 

Now you need to get a connection string for your database. To get the connection string, right-click on the database name in Server Explorer > Modify Connection.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 10
 
Now a popup window shows up. Click on the Advanced Button.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C# 

Step 11
 
After clicking on the Advanced button, another window opens in your screen, copy connections string from this window. Click on OK and press OK again one more time in the following window.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C# 

Step 12
 
You need to add connection string into Web.Config file of your project . Open your web.config file and add the new tag <ConnectionString>. In that tag, add the new tag name <add> Give a name to your connection string and paste/copy the string into the connectionString attribute, as shown in the below image
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 13
 
Now open your cs file (back end file) and add a connection, command data reader object, and fetch the connection string from your web.config file, as shown in the below image.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 14
 
Now Add Grid View Control from the toolbox into your web page.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 15
 
Here, I create a separate function to show data in the grid view for reducing code duplication as shown in the below image.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 16
 
Add the code into the button. Click to save data into the table and call that function after the data is inserted, as shown in the below image.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Step 17
 
Now, run your website.
 
Insert Data Into DataBase And Show In GridView In ASP.NET C#
 
Here is the source code of this project:
 
Designing File (.aspx)
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewExample.aspx.cs" Inherits="GridViewExample" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title></title>    
  8. </head>    
  9. <body>    
  10.     <form id="form1" runat="server">    
  11.         <br />    
  12.         <br />    
  13.         <div>    
  14.             <center>    
  15.             <table>    
  16.                 <tr>    
  17.                     <td>    
  18.                     <asp:Label ID="Label1" runat="server" Text="Enter Name"></asp:Label>    
  19.                     </td>    
  20.                     <td>    
  21.                         <asp:TextBox ID="txtname" runat="server" placeholder="Enter Name"></asp:TextBox>    
  22.                     </td>    
  23.                 </tr>    
  24.                     
  25.                 <tr>    
  26.                     <td>    
  27.                     <asp:Label ID="Label2" runat="server" Text="Enter Age"></asp:Label>    
  28.                     </td>    
  29.                     <td>    
  30.                         <asp:TextBox ID="txtage" runat="server" placeholder="Enter Age"></asp:TextBox>    
  31.                     </td>    
  32.                 </tr>    
  33.                     
  34.                 <tr>    
  35.                     <td>    
  36.                     <asp:Label ID="Label3" runat="server" Text="Enter City"></asp:Label>    
  37.                     </td>    
  38.                     <td>    
  39.                         <asp:TextBox ID="txtcity" runat="server" placeholder="Enter City"></asp:TextBox>    
  40.                     </td>    
  41.                 </tr>    
  42.                 <tr>    
  43.                     <td colspan="2">    
  44.                         <asp:Button ID="btnSave" runat="server" Text="Save Data" OnClick="btnSave_Click" />    
  45.                     </td>    
  46.                 </tr>    
  47.             </table>    
  48.                 <br.<br /><br /><br />    
  49.             <asp:GridView ID="GridView1" runat="server">    
  50.             </asp:GridView>    
  51.             
  52.                 <br />    
  53.                 <br />    
  54.             
  55.                </center>    
  56.         </div>    
  57.     </form>    
  58.     <p>    
  59.              
  60.     </p>    
  61. </body>    
  62. </html>    
Back End File (.aspx.cs) 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Data.SqlClient;  
  7. using System.Web.UI.WebControls;  
  8. using System.Configuration;  
  9.   
  10. public partial class GridViewExample : System.Web.UI.Page  
  11. {  
  12.     string conn = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString.ToString();  
  13.     SqlConnection cn;  
  14.     SqlCommand cmd;  
  15.     SqlDataReader dr;  
  16.   
  17.     protected void Page_Load(object sender, EventArgs e)  
  18.     {  
  19.         cn = new SqlConnection(conn);  
  20.         GetDataIngridView();  
  21.     }  
  22.   
  23.     protected void btnSave_Click(object sender, EventArgs e)  
  24.     {  
  25.         cn.Open();  
  26.         cmd = new SqlCommand("insert into [Table] values ('"+txtname.Text+"',"+txtage.Text+",'"+txtcity.Text+"')", cn);  
  27.         cmd.ExecuteNonQuery();  
  28.         cn.Close();  
  29.         GetDataIngridView();  
  30.     }  
  31.   
  32.     public void GetDataIngridView()  
  33.     {  
  34.         cn.Open();  
  35.         cmd = new SqlCommand("select * from [Table]",cn);  
  36.         dr = cmd.ExecuteReader();  
  37.         GridView1.DataSource = dr;  
  38.         GridView1.DataBind();  
  39.         cn.Close();  
  40.     }  
  41.   
  42. } 
Thank you guys for reading this article. If you liked this article and you received any help from this, please share it with your friends.


Similar Articles