How to create/add a hyperlink to the boundfield/Templatefield?

Question

we have created the web page with gridview and data binding from the database:

Now i wanted to add a hyperlink to the number column, so that i can be redirect to some other website. Below is the html code for the gridview:

<Columns>
                        <asp:BoundField DataField="type"
                            HeaderText="Type"
                            ReadOnly="true"
                            SortExpression="type" />
                        <asp:TemplateField HeaderText="Number" SortExpression="number">
                            <ItemTemplate>
                                <asp:TextBox ID="txtgrdNumber" runat="server" ReadOnly="true"
                                    Font-Names="Arial" Font-Size="10pt" Height="15px" Width="100%" BackColor="Transparent" BorderStyle="None" Text='<%# Bind("number") %>'></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>

i have gone through some material but didn't find the solution, could somebody help in this?

Answer 1

You don't show what the URL is supposed to look like.

In your example data, you have:

 45
 WORD123

So, what is the above 2 values "url" supposed to look like?

Maybe:

   www.somewebsite/Products?id=45

Perhaps there is a another column in the data that feeds the gv that contains the URL you want? (again, we don't know - more guessing game).

However, say the above was the final resulting URL you want when the row is clicked on?

Well, the NEXT BIG issue?

Is the URL to the current site, or is this 100% a link to some other external URL site?

If this is a link to current site, then using a HyperLink control.

If this is a 100% external link, then use a plain hyper link <a></a> syntax.

So, say 100% external, then this:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" CssClass="table table-hover" Width="45%">
    <Columns>
        <asp:BoundField DataField="Fighter" HeaderText="Fighter" />
        <asp:BoundField DataField="Engine" HeaderText="Engine" />
        <asp:BoundField DataField="Thrust" HeaderText="Thrust" />
        <asp:BoundField DataField="Description" HeaderText="Description" />
        <asp:TemplateField HeaderText="Preview">
            <ItemTemplate>
                <asp:Image ID="Image2" runat="server" Width="150px"
                    ImageUrl='<%# Eval("ImagePath")%>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <a href='<%# "https://www.somewebsite/Products?id=" + Eval("ID") %>'>
                View <%# Eval("Fighter") %>  
                </a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

So, a classic hyperlink has the "link" and then the text you want to display.

So with above, code to load, I have this:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        LoadGrid();

}

void LoadGrid()
{
    using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
    {
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * from Fighters ", conn))
        {
            conn.Open();
            DataTable rstData = new DataTable();
            rstData.Load(cmdSQL.ExecuteReader());
            GridView1.DataSource = rstData;
            GridView1.DataBind();
        }
    }
}

And now I see this:

And when I hover the cursor over say the 2nd row "link", then the browser shows that link to be sent to is this:

So, much of this answer will depend on if the url is internal to the current web site, or a 100% external link.