Asp.Net MVC : WebGrid Image Binding Using C#.Net

This article will show you how you can bind image in an asp.net web grid using c#.net. In this we have used mvc webgrid and bind the country data to the web grid using c#.net.

So for this article first we will add a model class file.

public class CountryModel     {         public List<Country> CountryList { get; set; }     }     public class Country     {         public string CountryName { get; set; }         public int Population { get; set; }         public string FlagURL { get; set; }     }

After this we will add a controller class file and add the below code into the controller class file.

//         // GET: /Home/         [HttpGet]         public ActionResult Index()         {             CountryModel _countryModel = new CountryModel();             _countryModel.CountryList= GetCountryList();             return View(_countryModel);         }         ///         /// Country list         ///         public List<Country> GetCountryList()         {             List<Country> _country = new List<Country>();             _country.Add(new Country { CountryName = "India", Population = 124000, FlagURL = "CountryFlag/india.png" });             _country.Add(new Country { CountryName = "China", Population = 84545, FlagURL = "CountryFlag/china.png" });             _country.Add(new Country { CountryName = "Germany", Population = 9354999, FlagURL = "CountryFlag/germany.png" });             _country.Add(new Country { CountryName = "Japan", Population = 24999, FlagURL = "CountryFlag/japan.png" });             return _country;         }

       

Here in above code I have created a collection for data. This data we will bind to the webgrid. Now we will create the view .cshtml file and add the below code.

@model MVC_Demos.Models.CountryModel @{     ViewBag.Title = "Asp.Net MVC : WebGrid Image Binding Using C#.Net"; } <table width="100%" cellpadding="5" cellspacing="2" border="0" style="background-color: White;">         <tr>             <td>                 @{             var grid = new WebGrid(source: Model.CountryList,             rowsPerPage: 10,             canSort:false);                 }                 @grid.GetHtml(                     tableStyle: "gridtable",                     alternatingRowStyle: "even",                     columns: grid.Columns(                     grid.Column("CountryName", "CountryName"),                     grid.Column("Population", "Population"),                     grid.Column("FlagURL", header: "Country Flag", format: @<img src="~/@item.FlagURL" alt="@item.CountryName" />)                 ))             </td>         </tr>     </table>

Here in above code I have bind the image to the flagurl. Now we have dome run the application to check the output.