In this article I will explain with an example, how to populate (bind) UserControl inside GridView control in ASP.Net using C# and VB.Net.
This article also explains how to pass data to UserControl and also find, access and get value from Web UserControl inside the GridView control in ASP.Net using C# and VB.Net.
 
 
HTML Markup
The HTML Markup of the page consists of an ASP.Net GridView control. The GridView consists of an ASP.Net UserControl inside its ItemTemplate.
The GridView control will be populated from code behind and the value of the Country field has been assigned to the UserControl.
Page
<%@ Register Src="~/UserControls/Country.ascx" TagName="Country" TagPrefix="uc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
        runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
            <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
            <asp:TemplateField HeaderText="Country">
                <ItemTemplate>
                    <uc:Country ID="ucCountry" runat="server" Country='<%# Eval("Country") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button Text="Get Details" runat="server" OnClick="GetDetails" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>
 
WebUserControl
The following WebUserControl used inside the GridView control discussed above. The HTML Markup of the UserControl consists of an ASP.Net Label control.
<asp:Label ID = "lblCountry" Text="" runat="server" />
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the GridView control
Inside the Page Load event, the GridView control is populated using a DataTable with some dummy records.
Note: You can learn more about this technique in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        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(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Property to get and set from the WebUserControl
The following Public property is used inside the UserControl which allows one to get or set the value of the Label control.
C#
public string Country
{
    get
    {
        return lblCountry.Text;
    }
    set
    {
        lblCountry.Text = value;
    }
}
 
VB.Net
Public Property Country() As String
    Get
        Return lblCountry.Text
    End Get
    Set(value As String)
        lblCountry.Text = value
    End Set
End Property
 
 
Find and access WebUserControl inside the GridView control on Button Click
When the Button inside the GridView control is clicked, first the reference of the Button which is clicked is determined and then using the reference of the Button, the reference of the GridView Row is determined.
Then the values of the Id and Name are fetched from the first and second cells of the GridView row while the value of the Country is fetched by finding the UserControl inside the GridView Row.
Finally the fetched values of the Id, Name and Country are displayed using JavaScript Alert message box.
C#
protected void GetDetails(object sender, EventArgs e)
{
    GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
    string id = "Id: " + row.Cells[0].Text;
    string name = "Name: " + row.Cells[1].Text;
    string country = "Country: " + (row.FindControl("ucCountry") as UserControls_Country).Country;
    string message = string.Format("{0}\\n{1}\\n{2}", id, name, country);
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
 
VB.Net
Protected Sub GetDetails(sender As Object, e As EventArgs)
    Dim row As GridViewRow = TryCast(TryCast(sender, Button).NamingContainer, GridViewRow)
    Dim id As String = "Id: " + row.Cells(0).Text
    Dim name As String = "Name: " + row.Cells(1).Text
    Dim country As String = "Country: " + TryCast(row.FindControl("ucCountry"), UserControls_Country).Country
    Dim message As String = String.Format("{0}\n{1}\n{2}", id, name, country)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", (Convert.ToString("alert('") & message) + "');", True)
End Sub
 
 
Screenshot
Bind UserControl inside GridView control in ASP.Net
 
 
Demo
View Demo
 
 
Downloads