Displaying Image In WebGrid And Changing Background Color Of Webgrid Row On Mouse Hover

In one of my articles, I have described how to perform CRUD operation with WebGrid, using WebApI. You can check this in the following Link.

 

In this article, I will discuss on the following topics. 

• Binding the images in the WebGrid.
• Changing background color of the WebGrid rows on mouse hover on it.
  
  First of all, I will describe how to bind the images in the WebGrid. For this, we will have to create a new MVC Project. I have created one new MVC project, where I have a Home Controller and a model as follows:
  

  public class Employees
      {
          public int EmpId { get; set; }
          public string EmpName { get; set; }
          public string CompanyName { get; set; }
          public string Location { get; set; }
          public string Dept { get; set; }
          public string ContactNo { get; set; }
          public string Address { get; set; }
          public string ImageUrl { get; set; }
  
      }

  Now, I will  create an Action method to return the data to the view as follows:
  

  public async Task<ActionResult> Details()
         {
             List<Employees> li=new List<Employees>();
                  li.Add(new Employees{EmpId=1,Dept="IT",EmpName="Rajesh",Location="Bangalore",CompanyName="TCS",ImageUrl="~/IMAGES/10.jpg"});
                  li.Add(new Employees { EmpId = 2, Dept = "IT", EmpName = "Sumit", Location = "Bangalore", CompanyName = "CGI",ImageUrl="~/IMAGES/8.jpg" });
                  li.Add(new Employees { EmpId = 3, Dept = "IT", EmpName = "Archana", Location = "Bangalore", CompanyName = "TCS", ImageUrl = "~/IMAGES/5.jpg" });
                  li.Add(new Employees { EmpId = 4, Dept = "Sales", EmpName = "Kishor", Location = "Delhi", CompanyName = "IBM", ImageUrl = "~/IMAGES/3.jpg" });
                  li.Add(new Employees { EmpId = 5, Dept = "IT", EmpName = "Manoj", Location = "Bhubaneshwar", CompanyName = "IBM", ImageUrl = "~/IMAGES/4.jpg" });
  
                  li.Add(new Employees { EmpId = 6, Dept = "IT", EmpName = "Pankaj", Location = "Chennai", CompanyName = "SLK", ImageUrl = "~/IMAGES/5.jpg" });
                  li.Add(new Employees { EmpId = 7, Dept = "IT", EmpName = "Satya", Location = "Bangalore", CompanyName = "SLK", ImageUrl = "~/IMAGES/6.jpg" });
  
                  li.Add(new Employees { EmpId = 8, Dept = "IT", EmpName = "Ranjan", Location = "Delhi", CompanyName = "INFOSYS", ImageUrl = "~/IMAGES/7.jpg" });
                  li.Add(new Employees { EmpId = 9, Dept = "HR", EmpName = "Nabin", Location = "Bangalore", CompanyName = "TCS", ImageUrl = "~/IMAGES/8.jpg" });
  
                  li.Add(new Employees { EmpId = 10, Dept = "Sales", EmpName = "sujit", Location = "chennai", CompanyName = "INFOSYS", ImageUrl = "~/IMAGES/3.jpg" });
                  li.Add(new Employees { EmpId = 11, Dept = "HR", EmpName = "prakash", Location = "chennai", CompanyName = "INFOSYS", ImageUrl = "~/IMAGES/10.jpg" });
  
             return View(li);
  }

  Here, I have created a folder, where I have put my images, as given below:
  
  
  
  Now, here is my view to display the data in the WebGrid.
  

  @model IEnumerable<MVCProject.Models.Employees>
  @{ ViewBag.Title = "Details";}<script src="~/Scripts/jquery-1.10.2.min.js"></script>
  <div>
      @{
      var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);
      grid.Pager(WebGridPagerModes.All);
  }
  
  </div>
  
  <h3>List Of Users</h3>
  <div>
      @grid.GetHtml(
                     headerStyle: "webgrid-header",
                  footerStyle: "webgrid-footer",
                  alternatingRowStyle: "webgrid-alternating-row",
                  selectedRowStyle: "webgrid-selected-row",
                  rowStyle: "webgrid-row-style",
                  mode: WebGridPagerModes.All,
               columns: grid.Columns(
  
                grid.Column(columnName: "EmpId", header: "EmpId"),
                grid.Column(
  
                   format: (item) =>
                   {
                       return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\" width='100px' height='50px'/></text>", Url.Content(@item.ImageUrl)));
                   }
                  ),
  
                                  grid.Column(columnName: "EmpName", header: "EmployeeName"),
  
                                                         grid.Column(columnName: "Dept", header: "Department"),
  
                                                             grid.Column(columnName: "CompanyName", header: "CompanyName"),
  
                    grid.Column(columnName: "Location", header: "Location")));
  
  
     </div>

  It is my jQuery Script and CSS.
  

  <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  <script src="~/Scripts/bootstrap.min.js"></script>
  
      <style type="text/css" >
           .webgrid-table {
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 1.2em;
          width: 300px;
          display: table;
          border-collapse: separate;
          border: solid 1px;
          background-color: purple;
      }
  
      .webgrid-table td, th {
          border: 3px solid;
          padding: 3px 7px 2px;
          width: 230px;
      }
  
      .webgrid-header {
          background-color:black;
          color:white;
          padding-bottom: 4px;
          padding-top: 5px;
          text-align: left;
          width: 30%;
          text-decoration-color:white;
      }
  
      .webgrid-footer {
          background-color:black;
          height:50px;
      }
  
      .webgrid-row-style {
          padding: 3px 7px 2px;
      }
  
          .webgrid-alternating-row {
              background-color: #FFEBCD;
              padding: 3px 7px 2px;
          }
  </script>

  Now, save the project and run it.This will give the following output:
  
  
  
  Now, my second aim is to change the background color of the row on which we will hover the mouse. For this, add the following CSS style, as given below:
  

  <style type="text/css" >
  .changeBackground {
          cursor: pointer;
          background:#00FF7F;
      }
  </style>
  
  <script type="text/javascript">
      $(function () {
          $('tbody tr').hover(function () {
              $(this).toggleClass('changeBackground');
          })
      });
  </script>

  Now save the project and you will see the output.
  
  
  
  Thus, in this way, we can bind the image in the WebGrid and can change the backgroung color of the Webgrid row on which we hover the mouse. I hope this tutorial will help you to understand this for the initial stage.