LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Code Snip: Populating GridView Control Using ASP.NET and C# with Mouse-Over Effect
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 51755/ 32

Step 1: Creation of the Project

[Download Sample]

1) Start Visual Studio 2005.

2) Click on the create website option in the main Start page of Visual Studio 2005.

3) In the Visual Studio Installed Template section, select ASP.NET website.  Below in that screen, select

(a) Location as File System,

(b) Language as Visual C#, and

(c) Desired folder name where your project should be saved.

In this example, the project name is called MouseOver.

4) Once you click OK, a new website with Default.aspx page is created for you. We will come to this page once I explain how to create a database from this screen.

5) By default to the right of IDE you will have the Solution Explorer, which will list all the file names used in the project.

Step 2: Establishing a Database Connection Using SQL Server2005 Express Edition

[Download Sample]

You will have to set up a database connection using Server Explorer; it is located at the left side of the IDE above the ToolBox panel or can be accessed using Viewà Server Explorer menu.

6) Click on the Server Explorer panel, right-click on the Data Connections, and select Add Connection option.

7) A window pops up, and you have to select Microsoft SQL Server Database file and create a new database file called DB_MouseOver.mdf. Follow the instructions shown on the screen.

8) At this stage, you can select the default setting, and a SQL Database will be created for you by  VS2005.

9) Once it is created, you will notice the database and tables in the Server Explorer.

10) Right click on the table and create a new table called Table1 with the column names "id" and "name." Add some data to the table.

11) Add a stored procedure called dbo.StoredProcedure1 by right-clicking on the Stored Procedures tree on the Server Explorer.

11) Create the connection string as shown below in the web.config file.

name="mouse_dbConnectionString" connectionString="Data
Security=True;Connect Timeout=30;User Instance=True"

Note: You should modify the path of the database file accordingly.

12) Drag and drop the GridView control from the toolbar.

13) The main mouse over effect takes place in the OnRowDataBound. See the ASP.NET code given below.

14) Run the application and move the mouse over the GridView control. You will notice the color change.


Stored Procedure

Create PROCEDURE dbo.StoredProcedure1


      select * from Table1



<asp:GridView ID="GridView1"
    <asp:BoundField DataField="id"
HeaderText="id" SortExpression="id" />
    <asp:BoundField DataField="Name"
HeaderText="Name" SortExpression="Name"/>

C# Code Behind

protected void Page_Load(object sender, EventArgs
public void PopulateGrid()
  DataSet objDs = new DataSet();
myConnection = new
  myCommand = new
  myCommand.SelectCommand.CommandType =
  GridView1.DataSource = objDs;
public void ItemDataBoundEventHandler1(object
sender, GridViewRowEventArgs e)
  if (e.Row.RowType == DataControlRowType.DataRow)

The final output will look like the figure shown below.


Product Spotlight
Product Spotlight 

©Copyright 1998-2021  |  Page Processed at 2021-03-02 1:00:15 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search