Monday, 14 October 2013

Filled Under:
, ,

C#.Net GridView Example - How To: Bind Gridview in Asp.net with SQLDataSource in Code behind

In one of previous article we have seen how to bind the Gridview with SQLDataSource at Design time. The article also explained what is GridView and why we need it?

However, sometimes it is needed to bind DataSource with GridView at runtime in code behind. In this article let's learn how to bind database with GridView in Code behind. Once the SQLDataSource is bound, you will be able to perform insert, update, delete in Gridview.

So in this article let's take an example of "NorthWind" database which comes with SQL Server 2005. We will bind "Employee" table from "NorthWind" database to "SqlDataSource" and then will bind that "SqlDataSource" to GridView in asp.net. Please note that "NorthWind" database doesn't come with SQL Server 2008. Hence, if you are using SQL server 2008 then please download "NorthWind" database backup from Microsoft's link and restore it in your machine.

How to bind GridView with SQLDataSource in code behind?

  1. Create a new Asp.net Web application.
  2. Add GridView in asp.net page. To add asp.net GridView in your page, drag & drop gridview control from toolbox as shown below -
    GridView control in toolbox
    GridView control in toolbox
  3. As soon as you drag & drop GridView in Asp.net, it would look like below –
    GridView on web page after drag & drop
    GridView on web page after drag & drop
    Observe that the Gridview is showing column name as "Column0", "Column1" and "Column2". The reason is DataSource not yet bind to GridView.
  4. Now go to aspx.cs page where you added the GridView. In this example I have added GridView in "Default.aspx" hence I have opened "Default.aspx.cs" page.
  5. Now write below code in Page_Load Event -
       protected void Page_Load(object sender, EventArgs e)
       {
           // ConnectionString to NorthWind Database.
           string connectionString = "Data Source=localhost;Initial Catalog=NorthWind;Integrated Security=True";

           // Create SQLDataSource.
           SqlDataSource sqlDataSource = new SqlDataSource();
           sqlDataSource.ID = "SqlDataSource123";
           this.Page.Controls.Add(sqlDataSource);

           // Bind ConnectionString to SQLDataSource.
           sqlDataSource.ConnectionString = connectionString;
           // Retrieve records with only 5 Columns from Employees table of NorthWind Database.
           sqlDataSource.SelectCommand = "SELECT EmployeeID, LastName, FirstName, Title, BirthDate  FROM Employees";

           // Bind SQLDataSource to GridView after retrieving the records.
           GridView1.DataSource = sqlDataSource;
           GridView1.DataBind();
       }
    That's it. You are done with the code part. Save the file.
  6. Now execute the Web Application and see if the records from NorthWind database are populating on your C# gridview. Final output would like below screen -
    GridView Showing records bind in Code Behind
    GridView - SQLDataSource bind in Code Behind
Now look at the format of the Birthdate column. The birthdates are showing in default datetime format of GridView. You can change the format of datetime column. Please refer previous post on how to change the format of DateTime column in GridView.

From this gridview example in asp.net we have learnt to bind the SQLdatasource at code behind. Here is another article that shows how to bind the Gridview with SQLDataSource at Design time.

I hope this gridview example in asp.net helps you to configure the GridView with SQLDataSource in code behind. If you find this article helpful, then could you please share the article on your social network?

Following articles might be of your interest

Protected by Copyscape Plagiarism Check

Sharing is Caring...





2 comments:

  1. Nice Article Easy to understand Thank You

    ReplyDelete
  2. superb information i had used it on my site and it is sucessfully executed...thnkss....!!!

    ReplyDelete