Passing Value Of Grid Row From Data Grid To Webpages Using Hyperlink In ASP.NET

Introduction

In this article, I am going to explain how to pass the value of grid row from data grid of one page to another webpage using hyperlink in ASP.NET in C# and VB.NET.

Sometimes, while working on web technologies, it is necessary to show detailed data of the summary on other web pages. So here, I will show you how you can pass data as input from one webpage to other webpage using hyperlink control.

Implementation

Let's create one small tutorial for a demonstration of this concept.

Here, I will create one data grid in which the grid contains 6 columns, and within the grid, I will make Item Template where first and last columns act as Hyperlink inside the Item Template of Template Field.

HTML

<form id="form1" runat="server">
<asp:GridView ID="GridView1" HeaderStyle-BackColor="Black" HeaderStyle-ForeColor="White"
    RowStyle-BackColor="#dddddd" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
    runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText = "Id" ItemStyle-Width="30">
            <ItemTemplate>
                <asp:HyperLink runat="server"
                    Style="text-decoration:none;font:bold;color:red"
                    NavigateUrl='<%# Eval("Id", "~/DetailsCS.aspx?Id={0}") %>'
                    Text='<%# Eval("Id") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="EmployeeName" HeaderText="EmployeeName" ItemStyle-Width="150" />
        <asp:BoundField DataField="Company" HeaderText="Company" ItemStyle-Width="150" />
        <asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HyperLink runat="server"
                    NavigateUrl='<%# string.Format("~/DetailsCS.aspx?Id={0}&EmployeeName={1}&Company={2}&Designation={3}&Country={4}",
                    HttpUtility.UrlEncode(Eval("Id").ToString()),
                    HttpUtility.UrlEncode(Eval("EmployeeName").ToString()),
                    HttpUtility.UrlEncode(Eval("Company").ToString()),
                    HttpUtility.UrlEncode(Eval("Designation").ToString()),
                    HttpUtility.UrlEncode(Eval("Country").ToString())) %>'
                    Text="Employee Details"
                    Style="text-decoration:none;font:bold;color:red" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
    </form>

You can see the above-described HTML markup where column Id contains Query String Parameter in NavigateUrl Property of Hyperlink that is called a Single Query String Parameter.

 

You can see the above-described HTML markup where column Id, EmployeeName, Designation, Company, and Country contains Query String Parameter in NavigateUrl Property of Hyperlink that is called as Multiple Query String Parameter.

 

Here, I have passed the Query String Parameter using Eval functions with the use of String Format function.

Now, I will Create Sample Datatable with some sample record. And I bound that data table with our data grid view.

While we working with data table, first, we need to add its namespace.

C#

using System.Data;

VB.Net

 Imports System.Data

Now, we will start our actual code.

C#

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[5] { new DataColumn("Id"), new DataColumn("EmployeeName"), new DataColumn("Company"), new DataColumn("Designation"), new DataColumn("Country") });
            dt.Rows.Add(1, "Nikunj Satasiya", "D & K Technology Pvt.Ltd", "Software Engineer" ,"India");
            dt.Rows.Add(2, "Hiren Dobariya", "Version Syatem Pvt.Ltd", "Web Developer", "India");
            dt.Rows.Add(3, "Pratik Pansuriya", "LY Technology Pvt.Ltd", "Network Engineer", "India");
            dt.Rows.Add(4, "Vivek Ghadiya", "Atos", "Software Engineer", "India");
            dt.Rows.Add(5, "Sneha Patel", "Atos", "Software Engineer", "India");
            dt.Rows.Add(6, "Kishan Patel", "Infosys", "Application Developer", "India");
            dt.Rows.Add(7, "Sarah Frentco", "MasterCard", "Software Engineer", "India");
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("EmployeeName"), New DataColumn("Company"), New DataColumn("Designation"), New DataColumn("Country")})
            dt.Rows.Add(1, "Nikunj Satasiya", "D & K Technology Pvt.Ltd", "Software Engineer", "India")
            dt.Rows.Add(2, "Hiren Dobariya", "Version Syatem Pvt.Ltd", "Web Developer", "India")
            dt.Rows.Add(3, "Pratik Pansuriya", "LY Technology Pvt.Ltd", "Network Engineer", "India")
            dt.Rows.Add(4, "Vivek Ghadiya", "Atos", "Software Engineer", "India")
            dt.Rows.Add(5, "Sneha Patel", "Atos", "Software Engineer", "India")
            dt.Rows.Add(6, "Kishan Patel", "Infosys", "Application Developer", "India")
            dt.Rows.Add(7, "Sarah Frentco", "MasterCard", "Software Engineer", "India")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

Output

 

Now, it’s time to display Query String Values on the other Webpage at the time of Page Load.

HTML

<form id="form1" runat="server">
<table>
    <tr>
        <td>
            <b>Id</b>
        </td>
        <td>
            <asp:Label ID="lblId" runat="server"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <b>EmployeeName</b>
        </td>
        <td>
            <asp:Label ID="lblEmployeeName" runat="server"></asp:Label>
        </td>
    </tr>
        <tr>
        <td>
            <b>Company</b>
        </td>
        <td>
            <asp:Label ID="lblCompany" runat="server"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <b>Designation</b>
        </td>
        <td>
            <asp:Label ID="lblDesignation" runat="server"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <b>Country</b>
        </td>
        <td>
            <asp:Label ID="lblCountry" runat="server"></asp:Label>
        </td>
    </tr>
</table>
    </form>

C#

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            lblId.Text = HttpUtility.UrlDecode(Request.QueryString["Id"]);
            lblEmployeeName.Text = HttpUtility.UrlDecode(Request.QueryString["EmployeeName"]);
            lblCompany.Text = HttpUtility.UrlDecode(Request.QueryString["Company"]);
            lblDesignation.Text = HttpUtility.UrlDecode(Request.QueryString["Designation"]);
            lblCountry.Text = HttpUtility.UrlDecode(Request.QueryString["Country"]);
        }
    }

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            lblId.Text = HttpUtility.UrlDecode(Request.QueryString("Id"))
            lblEmployeeName.Text = HttpUtility.UrlDecode(Request.QueryString("EmployeeName"))
            lblCompany.Text = HttpUtility.UrlDecode(Request.QueryString("Company"))
            lblDesignation.Text = HttpUtility.UrlDecode(Request.QueryString("Designation"))
            lblCountry.Text = HttpUtility.UrlDecode(Request.QueryString("Country"))
        End If
    End Sub

Output

 

Summary

This article explained how you can pass a Value/Parameter from one webpage to another.