در این مقاله میخواهیم رنگ پس زمینه یک سر گرید ویو را در زمانی که نشانگر موس روی آن میرود عوض کنیم

ابتدا یک پروژه جدید از نوع وب فرم بسازید سپس در پوشه App_Code یک کلاس به نام EmployeeRecord بسازید و داده های زیر را وارد کنید:

    using System.Data;  
      
    public class EmployeeRecord  
    {  
       public DataTable EmpRecord()  
       {  
          DataTable dt = new DataTable();  
          dt.Columns.Add("Emp_Name");  
          dt.Columns.Add("Emp_id");  
          dt.Columns.Add("Emp_job");  
          dt.Columns.Add("Emp_Dep");  
          DataRow rw1 = dt.NewRow();  
          rw1["Emp_Name"] = "Arvid Gaur";  
          rw1["Emp_id"] = "00011";  
          rw1["Emp_job"] = "Software Engineer";  
          rw1["Emp_Dep"] = "IT";  
          dt.Rows.Add(rw1);  
          DataRow rw2 = dt.NewRow();  
          rw2["Emp_Name"] = "Dharmender kumar";  
          rw2["Emp_id"] = "00024";rw2["Emp_job"] = "System Engineer";  
          rw2["Emp_Dep"] = "IT";  
          dt.Rows.Add(rw2);  
          DataRow rw3 = dt.NewRow();  
          rw3["Emp_Name"] = "Ravi kumar";  
          rw3["Emp_id"] = "00138";  
          rw3["Emp_job"] = "Support Enginner";  
          rw3["Emp_Dep"] = "IT";  
          dt.Rows.Add(rw3);  
          DataRow rw4 = dt.NewRow();  
          rw4["Emp_Name"] = "Arvind Kumar";  
          rw4["Emp_id"] = "00058";  
          rw4["Emp_job"] = "Sr Software Engineer";  
          rw4["Emp_Dep"] = "IT";  
          dt.Rows.Add(rw4);  
          DataRow rw5 = dt.NewRow();  
          rw5["Emp_Name"] = "Rajan Sharma";  
          rw5["Emp_id"] = "00085";  
          rw5["Emp_job"] = "Test Engineer";  
          rw5["Emp_Dep"] = "IT";  
          dt.Rows.Add(rw5);  
          return dt;  
       }  
    }   

حال به صفحه Default.aspx رفته و یک گرید ویو به صفحه اضافه کنید :

    <asp:GridView ID="ui_grdVw_EmployeeDetail" runat="server" Width="50%" AutoGenerateColumns="false"              HeaderStyle-CssClass="pageheading" OnRowDataBound="ui_grdVw_EmployeeDetail_RowDataBound" OnSelectedIndexChanged="ui_grdVw_EmployeeDetail_SelectedIndexChanged">  
    <Columns>  
       <asp:TemplateField HeaderText="S.NO">  
       <ItemTemplate>    
           <%#Container.DataItemIndex+1 %>  
       </ItemTemplate>  
       </asp:TemplateField>  
      
       <asp:TemplateField HeaderText="Employee ID">  
       <ItemTemplate>  
          <asp:Label ID="ui_lbl_EmployeeID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_id") %>'></asp:Label>  
       </ItemTemplate>  
       </asp:TemplateField>  
      
       <asp:TemplateField HeaderText="Employee Name">  
       <ItemTemplate>  
          <asp:Label ID="ui_lbl_EmployeeName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_Name") %>'></asp:Label>  
       </ItemTemplate>  
       </asp:TemplateField>  
      
       <asp:TemplateField HeaderText="Employee Post">  
       <ItemTemplate>  
          <asp:Label ID="ui_lbl_EmpJob" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_job") %>'></asp:Label>  
       </ItemTemplate>  
       </asp:TemplateField>  
      
       <asp:TemplateField HeaderText="Department">  
       <ItemTemplate>  
          <asp:Label ID="ui_lbl_Department" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_Dep") %>'></asp:Label>  
       </ItemTemplate>  
       </asp:TemplateField>  
    </Columns>  
    </asp:GridView>  
    <asp:LinkButton ID="ui_lnkbtn_Dummy" runat="server"></asp:LinkButton>   

سپس در صفحه Default.aspx.cs کد زیر را بنویسید:

    using System;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using System.Data;  
    using System.Text;  
      
    public partial class _Default : System.Web.UI.Page  
    {  
       protected void Page_Load(object sender, EventArgs e)  
       {  
          if (!IsPostBack)  
          {  
             ui_grdvw_EmployeeDetail_Bind();  
          }  
       }  
         
       protected void ui_grdvw_EmployeeDetail_Bind()  
       {  
          DataTable dt = new DataTable();  
          EmployeeRecord employeeRecord = new EmployeeRecord();  
          dt = employeeRecord.EmpRecord();  
          ui_grdVw_EmployeeDetail.DataSource = dt;  
          ui_grdVw_EmployeeDetail.DataBind();  
       }  
      
       protected void ui_grdVw_EmployeeDetail_RowDataBound(object sender, GridViewRowEventArgs e)  
       {  
          if (e.Row.RowType == DataControlRowType.DataRow)  
          {  
             e.Row.Attributes.Add("onmouseover",  
                   this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#0071b6';this.styl               e.color='White'");  
             e.Row.Attributes.Add("onmouseout",                     "this.style.backgroundColor=this.originalstyle;this.style.color=this.originalstyle;");  
             e.Row.Attributes["onclick"] =          Page.ClientScript.GetPostBackClientHyperlink(ui_grdVw_EmployeeDetail, "Select$" + e.Row.RowIndex);  
             e.Row.Attributes["style"] = "cursor:pointer";  
          }  
        }  
      
        protected void ui_grdVw_EmployeeDetail_SelectedIndexChanged(object sender, EventArgs e)  
        {  
             Label Emp_id = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmployeeID");  
             Label Emp_Name = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmployeeName");  
             Label Emp_job = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmpJob");  
             Label Emp_Dep = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_Department");  
             StringBuilder alartMsg = new StringBuilder();  
             alartMsg.Append("You are Selected:-\\n");  
             alartMsg.Append("ID : " + Emp_id.Text+"\\nName : "+Emp_Name.Text+"\\nPost :                           "+Emp_job.Text+"\\nDepartment : "+Emp_Dep.Text);  
              ScriptManager.RegisterStartupScript(this, this.GetType(),           "scriptName","alert('"+alartMsg.ToString()+"');", true);  
        }  
    }   

در زمانی که موس روی یک سر میرود رنگ پس زمینه را تغییر میدهیم و در زمانی که موس از روی ان سط کنار میرود رنگ قبلی را مجددا به سطر میدهیم