Hey Guys,

    In this article i will tell you how you can store data into database and show that data in Grid View in Asp.Net.I Will tell you step by step process of show data in to Grid View from database.

Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step  : 1 : Open your visual studio and create new project from menu File > New > Project or you can use 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 various option and click on 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 few details like your project name , your project location and framework of your project . after insert all detail click on create button.


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 4: Now your project is created . Add new item into your project by right click on your project name > Add >Add New item or you can use short cut key Ctrl+Shift+A


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 5 : Now select Web Form option from various items , give appropriate name of your form and click on Add.


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 6 : Now create design as you need , here i  only add Name , Age and City so i create only these three field in design as you show in below image.


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 7 : Add New Database into your project by Right click on your Project name > Add > Add New item. Select SQL Server Database from list , give database name and click on Add name.

Insert Data Into DataBase And Show In GridView In Asp.Net C#


Note : When you click on add button it give you prompt that you need to add this database file in App_Data folder in your project . Click on Yes Button to add App_Data folder in your project if not exist.


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 8 : Now you need to create a table into your database .To create database double click on your database file then 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 create table with four fields Id,name,age and city where Id is auto incremented by 1


Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 9  : Now you need to get connection string of your database to get connection string right click on 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 comes in front of you click on Advanced Button.
Insert Data Into DataBase And Show In GridView In Asp.Net C#




Step : 11 :  After click on Advance button another window open in your screen copy connections string from this window and click on OK and one more time OK in previous 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 add new tag <ConnectionString> into that tag add new tag name <add> give name of your connection string and past copy string into connectionString attribute as shown in below image

Insert Data Into DataBase And Show In GridView In Asp.Net C#


Step : 13 : Now open you cs file (back end file) add connection , command and data reader object and fetch connection string from your web.config file as shown in below image.


Insert Data Into DataBase And Show In GridView In Asp.Net C#

Step : 14 : Now Add Grid View Control from 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 grid view for reduce code duplication as show in below image. 

Insert Data Into DataBase And Show In GridView In Asp.Net C#

Step : 16 : Add code into button click to save data into table and call that function after data inserted  as shown in 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) 





Back End File (.aspx.cs)



 

Thank you guys for reading this article if you like this article and you get any help from this share with your friends .