ASP.NET MVC Tutorials

Bind HyperLink In WebGrid

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 < span style = "background: white; font-family: "consolas"; font-size: 9.5pt;" > MVC_Demos.Models.< span style = "background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;" > CountryModel < span style = "background: white; font-family: "consolas"; font-size: 9.5pt;" >< o:p >
@{
    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.

;