Introduction

This article describes how to bind an image with a WebGrid in the Web API. Here we add a WebGrid in which images are displayed by giving the path of the images. Add the images in the application in the images folder that you want to bind in the WebGrid.

The following is the procedure for creating the application.

Step 1

First create a Web API application as in the following:

Step 2

Add a Model class in the Model folder as in the following:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace ImageBind.Models
  6. {
  7. public class ImageModel
  8. {
  9. public List<Nature> NatureList { get; set; }
  10. }
  11. public class Nature
  12. {
  13. public int ID { get; set; }
  14. public string Name { get; set; }
  15. public string Image { get; set; }
  16. }
  17. }

Step 3

Now in the "Controller" we add the code that uses all the variables of the Model class. This file exists:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using ImageBind.Models;
  7. namespace ImageBind.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. ImageModel imgobj = new ImageModel();
  14. imgobj.NatureList = GetAllNature();
  15. return View(imgobj);
  16. }
  17. public List<Nature> GetAllNature()
  18. {
  19. List<Nature> objnature = new List<Nature>();
  20. objnature.Add(new Nature { ID = 1, Name = "Desert", Image = "Images/Desert.jpg.jpg" });
  21. objnature.Add(new Nature { ID = 2, Name = "Jellyfish", Image = "Images/Jellyfish.jpg" });
  22. objnature.Add(new Nature { ID = 3, Name = "LightHouse", Image = "Images/Lighthouse.jpg" });
  23. objnature.Add(new Nature { ID = 4, Name = "Tulips", Image = "Images/Tulips.jpg" });
  24. return objnature;
  25. }
  26. }
  27. }

Step 4

In the View write some code as in the following:

Add the following code:

  1. @model ImageBind.Models.ImageModel
  2. @{
  3. ViewBag.Title = "Bind the Image webgrid";
  4. }
  5. <style type="text/css">
  6. table.tgrid {
  7. font-family: Arial;
  8. font-size: medium;
  9. color: #000000;
  10. border-width: medium;
  11. border-color: ActiveBorder;
  12. }
  13. table.tgrid th {
  14. text-align:center;
  15. border-width: 2px;
  16. padding: initial;
  17. border-style: double;
  18. border-color: #000000;
  19. background-color: #b6ff00;
  20. }
  21. table.tgrid td {
  22. text-align:center;
  23. width:400px;
  24. font-weight:bold;
  25. border-width: 2px;
  26. padding: initial;
  27. border-style: double;
  28. border-color: #000000;
  29. background-color: ActiveBorder;
  30. }
  31. </style>
  32. <table width="Auto" cellpadding="5" cellspacing="5" border="1" style="background-color:white; width:500px;vertical-align:inherit" >
  33. <tr>
  34. <td>
  35. @{
  36. var grid = new WebGrid(source: Model.NatureList, rowsPerPage:5);
  37. }
  38. @grid.GetHtml(
  39. tableStyle:"tgrid",
  40. alternatingRowStyle:"even",
  41. columns: grid.Columns(
  42. grid.Column("ID", "ID"),
  43. grid.Column("Name", "Name"),
  44. grid.Column("Image", header: "Image", format: @<text><img src="@item.Image" alt="@item.Image" width="200px" height="100px"></img></text>)
  45. )
  46. )
  47. </td>
  48. </tr>
  49. </table>

Step 5

Now execute the application; press "F5". The output looks like this:

imgb5.jpg