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.

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.

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

Step 5

Now select the Web Form option from the various items and give an appropriate name to your form, then click on Add.

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.

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.

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.

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

Here, I created a table with four fields Id, name, age, and city, where Id is auto-incremented by 1.

CREATE TABLE [dbo].[Table] (
[Id] INT NOT NULL IDENTITY,
[name] VARCHAR (50) NULL,
[age] INT NULL,
[city] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);

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.

Step 10

Now a popup window shows up. Click on the Advanced Button.

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.

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

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.

Step 14

Now Add Grid View Control from the toolbox into your web page.

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.

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.

Step 17

Now, run your website.

Here is the source code of this project:

Designing File (.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewExample.aspx.cs" Inherits="GridViewExample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<div>
<center>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Enter Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtname" runat="server" placeholder="Enter Name"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Enter Age"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtage" runat="server" placeholder="Enter Age"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Enter City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtcity" runat="server" placeholder="Enter City"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSave" runat="server" Text="Save Data" OnClick="btnSave_Click" />
</td>
</tr>
</table>
<br.<br /><br /><br />
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
<br />
<br />
</center>
</div>
</form>
<p>
</p>
</body>
</html>

Back End File (.aspx.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Configuration;
public partial class GridViewExample : System.Web.UI.Page
{
string conn = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString.ToString();
SqlConnection cn;
SqlCommand cmd;
SqlDataReader dr;
protected void Page_Load(object sender, EventArgs e)
{
cn = new SqlConnection(conn);
GetDataIngridView();
}
protected void btnSave_Click(object sender, EventArgs e)
{
cn.Open();
cmd = new SqlCommand("insert into [Table] values ('"+txtname.Text+"',"+txtage.Text+",'"+txtcity.Text+"')", cn);
cmd.ExecuteNonQuery();
cn.Close();
GetDataIngridView();
}
public void GetDataIngridView()
{
cn.Open();
cmd = new SqlCommand("select * from [Table]",cn);
dr = cmd.ExecuteReader();
GridView1.DataSource = dr;
GridView1.DataBind();
cn.Close();
}
}

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.