[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.

[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.

<connectionStrings>
            <add
name="mouse_dbConnectionString" connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename=C:\Inetpub\wwwroot\Mouse\mouse_db.mdf;Integrated
Security=True;Connect Timeout=30;User Instance=True"
providerName="System.Data.SqlClient"/>
</connectionStrings>

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.

Code

Stored Procedure

Create PROCEDURE dbo.StoredProcedure1

AS

      select * from Table1

      RETURN

ASP.NET Code

<asp:GridView ID="GridView1"
runat="server"   
  OnRowDataBound="ItemDataBoundEventHandler1">
  <Columns>
    <asp:BoundField DataField="id"
HeaderText="id" SortExpression="id" />
    <asp:BoundField DataField="Name"
HeaderText="Name" SortExpression="Name"/>
  </Columns>
</asp:GridView>

C# Code Behind

protected void Page_Load(object sender, EventArgs
e)
{
  PopulateGrid();
}
 
public void PopulateGrid()
{
  DataSet objDs = new DataSet();
  System.Data.SqlClient.SqlConnection
myConnection = new
System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["mouse_dbConnectionString
"].ConnectionString);
  System.Data.SqlClient.SqlDataAdapter
myCommand;
  myCommand = new
System.Data.SqlClient.SqlDataAdapter("StoredProcedure1",
myConnection);
  myCommand.SelectCommand.CommandType =
CommandType.StoredProcedure;
  myConnection.Open();
  myCommand.Fill(objDs);
 
  GridView1.DataSource = objDs;
  GridView1.DataBind();
}
 
public void ItemDataBoundEventHandler1(object
sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    e.Row.Attributes.Add("onmouseover",
"this.style.backgroundColor='Silver'");
    e.Row.Attributes.Add("onmouseout",
"this.style.backgroundColor='#FFFBD6'");
  }
}

The final output will look like the figure shown below.