Pass DropDownList selected value as query string to HyperLink inside ASP.Net GridView using C# and VB.Net

Hi irshad1231,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="table table-bordered"
        DataKeyNames="ID">
        <Columns>
            <asp:TemplateField HeaderText="Chart Type">
                <ItemTemplate>
                    <asp:DropDownList ID="ddlchart" runat="server">
                        <asp:ListItem Value="0">Line Chart</asp:ListItem>
                        <asp:ListItem Value="1">Bar Chart</asp:ListItem>
                        <asp:ListItem Value="2">Column Chart</asp:ListItem>
                    </asp:DropDownList>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HiddenField ID="hfId" Value='<%# Eval("ID")%>' runat="server" />
                    <asp:HyperLink ID="hlDetails1" Text="View Report" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        var trs = $('[id*=GridView1]').find('tr:not(:has(th))');
        $.each(trs, function () {
            var id = $(this).find("[id*=hfId]").val();
            var chartType = $(this).find("[id*=ddlchart] option:selected").val();
            $(this).find("[id*=hlDetails1]").attr('href', "ReportDisplay.aspx?KPiID=" + id + "&charttype=" + chartType);
        });

        $('[id*=ddlchart]').on("change", function () {
            var tr = $(this).closest('tr')
            var id = $(tr).find("[id*=hfId]").val();
            var chartType = $(tr).find("[id*=ddlchart] option:selected").val();
            $(tr).find("[id*=hlDetails1]").attr('href', "ReportDisplay.aspx?KPiID=" + id + "&charttype=" + chartType);
        });
    });
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[1] { new System.Data.DataColumn("Id", typeof(int)) });
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        dt.Rows.Add(3);
        dt.Rows.Add(4);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn(0) {New System.Data.DataColumn("Id", GetType(Integer))})
        dt.Rows.Add(1)
        dt.Rows.Add(2)
        dt.Rows.Add(3)
        dt.Rows.Add(4)
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Screenshot