ASp.Net MVC : How to Bind Hyper Link In WebGrid Rows Using C#

This article will show you how you can add  hyper link in webgrid  in asp.net mvc using c#. In this I have bind id in hyper link with edit text.

So for this article first we will create a new asp.net mvc application and add a model class file in it.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC_Demos.Models {     public class CountryModel     {         public List<Country> CountryList { get; set; }     }     public class Country     {         public int ID { get; set; }         public string CountryName { get; set; }         public int Population { get; set; }         public string FlagURL { get; set; }     } }

Now we will create a new controller class file and add the below code in it.

using MVC_Demos.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC_Demos.Controllers {     public class HomeController : Controller     {         //         // 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 { ID = 1, CountryName = "India", Population = 124000, FlagURL = "CountryFlag/india.png" });             _country.Add(new Country { ID = 1, CountryName = "China", Population = 84545, FlagURL = "CountryFlag/china.png" });             _country.Add(new Country { ID = 1, CountryName = "Germany", Population = 9354999, FlagURL = "CountryFlag/germany.png" });             _country.Add(new Country { ID = 1, CountryName = "Japan", Population = 24999, FlagURL = "CountryFlag/japan.png" });             return _country;         }     } }

      

Here in above code I have created a function which will pass the data. Now create the view and add the below code.

@model MVC_Demos.Models.CountryModel @{     ViewBag.Title = "ASp.Net MVC : How to Bind Hyper Link In WebGrid Rows Using C#"; } <style type="text/css">     .gridtable {         font-family: verdana,arial,sans-serif;         font-size: 11px;         color: #333333;         border-width: 1px;         border-color: #666666;         border-collapse: collapse;     }         .gridtable th {             border-width: 1px;             padding: 8px;             border-style: solid;             border-color: #666666;             background-color: #dedede;         }         .gridtable td {             border-width: 1px;             padding: 8px;             border-style: solid;             border-color: #666666;             background-color: #ffffff;         }         .gridtable tr:hover td,         .gridtable tr.even:hover td.active,         .gridtable tr.odd:hover td.active {             background: #b6ff00;         } </style> @using (Html.BeginForm("Index", "Home")) {     <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: true);                 }                 @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" width="30px;" /> ),                     grid.Column("Id", header: "Link", format: @<a href="\Home\Index\?Id=@item.ID">Edit Link</a> ))))                 </td>             </tr>         </table> }

In above code please check the highlighted part of the code. This is used for adding the hyper link in web grid of mvc.

Now we have done . Run the application to check the output.