How to Bind Image in WebGrid using MVC3 with example

In this article i will tell you how you can a bind  image in a mvc webgrid.
So for this first you needed to create a new mvc3 web application. Add controller and create view for actionresult method of the controller.
Now add a model file in you model folder and add the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Demo_Application.Models
{
    public class CountryModel
    {
        public List<Coutry> CoutryModelList { get; set; }
    }
    public class Coutry
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string CountryFlagImage { get; set; }
        public int Population { get; set; }
    }
}

Now In you controller add the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Demo_Application.Models;

namespace Demo_Application.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.CoutryModelList = GetAllCountry();
            return View(objcountrymodel);
        }
        public List<Coutry> GetAllCountry()
        {
            List<Coutry> objcountry = new List<Coutry>();

            objcountry.Add(new Coutry { Id = 1, Name = "India", Population = 100000, CountryFlagImage = "Content/images/1.jpg" });
            objcountry.Add(new Coutry { Id = 2, Name = "Unites States", Population = 384545, CountryFlagImage = "Content/images/2.jpg" });
            objcountry.Add(new Coutry { Id = 3, Name = "Iran", Population = 2354999, CountryFlagImage = "Content/images/3.jpg" });

            return objcountry;
        }
    }
}

In above code i have created a static collection of list for data. You can user you collection of data by making connection with database.

Here are some of my articles which you must look.

Now in you view Add the below code.

@model  Demo_Application.Models.CountryModel
@{
    ViewBag.Title = "How To Bind Image In MVC3 Webgrid";
}
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>

    <table width="100%" cellpadding="5" cellspacing="2" border="0" style="background-color: White;">       
        <tr>
            <td>
             @{       
                 var grid = new WebGrid(source: Model.CoutryModelList,
                         rowsPerPage: 10);
   
        }
        @grid.GetHtml(
                     tableStyle: "gridtable",
            alternatingRowStyle: "even",

        columns: grid.Columns(
                        grid.Column("Id", "Id"),
                        grid.Column("Name", "Name"),
                        grid.Column("Population", "Population"),
                        grid.Column("CountryFlagImage", header: "Country Flag Image", format: @<text><img src="../../@item.CountryFlagImage" alt="@item.CountryFlagImage" width="100px" height="50px"></img></text>)            
              
                    )
                )
            </td>
        </tr>       
    </table>

Here i have binded the  web grid .

Now run the application for desired output.