locked
Display hyperlink in template field RRS feed

  • Question

  • User350923160 posted

    Hello everyone,

    I have a gridview that has several columns and the last coulmn is template field for notes. The data coming back from the database may contain hyperlink code. But when I run it only display the text. Below is my template field code:

                            <asp:TemplateField>
                                <ItemTemplate>
                                    <div style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-wrap:normal">
                                         <%# Eval("Notes") %>
                                    </div>
                                </ItemTemplate>
                            </asp:TemplateField>

    One row in the database for Notes column contains "<a href="https://www.google.com/">Google</a>" but in the grid view it only displays Google and it is normal text not clickable. Any ideas on how I can get this to work?

    Thank you

    Friday, January 25, 2019 3:25 PM

Answers

  • User350923160 posted

    Changed the data in the database to "<a href="https://www.google.com" target="_blank">Google</a>" and now it works. It opens a new tab that points to Google.com without error. 

    Thanks everyone.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 25, 2019 6:53 PM

All replies

  • User475983607 posted

    The first step is to do a bit of troubleshooting.  Use the browser's developer tools (F12) to view the HTML.

    Friday, January 25, 2019 4:28 PM
  • User350923160 posted

    It looks wired when I use F12. It looks like this:

    Friday, January 25, 2019 5:01 PM
  • User475983607 posted

    The HTML is clearly invalid.  The next step is to trace through your code.   Write a query to verify the HTML stored in the table column correctly.  If the HTML within the table is unexpected, there is an issue in the code that saves the HTML.  If the HTML is valid then take a closer look at the code that fetches the data.

    Use the Visual Studio debugger to set break point to step through your code.   Keep in mind that we cannot see your code or reproduce the issue.  If you need the community to debug your code then you'll need to post a sample that reproduces the issue.

    Friday, January 25, 2019 5:13 PM
  • User-943250815 posted

    Alternatives can be:

    1) Use BoundField, set HTMLEncode and CssClass for style 
    <asp:BoundField HeaderText="Link" DataField="Notes" HtmlEncode="False" ItemStyle-CssClass ="linkformat" />

    2) Convert Boundfield to Template or make your own
    <asp:TemplateField HeaderText="Link"> 
      <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Notes") %>' Style="width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-wrap: normal"></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

    There was an 3th alternative it was your template with id and runat, forget about that.
    As already told there can be something incorrect on link definition

    Friday, January 25, 2019 5:19 PM
  • User475983607 posted

    It looks wired when I use F12. It looks like this:

    I built a simple test which builds a DataTable containing a hyperlink.

            <div>
                <asp:GridView ID="Countries" runat="server" OnRowDataBound="Countries_RowDataBound" OnDataBound="Countries_DataBound" AutoGenerateColumns="False">
                    <Columns>
                        <asp:BoundField DataField="Id" HeaderText="Id" />
                        <asp:TemplateField HeaderText="Item">
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Item") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Item") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Notes"> 
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Notes") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label2" runat="server" Text='<%# Bind("Notes") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
    
                    // Create a new table.
                    DataTable taskTable = new DataTable("Items");
    
                    // Create the columns.
                    taskTable.Columns.Add("Id", typeof(int));
                    taskTable.Columns.Add("Item", typeof(string));
                    taskTable.Columns.Add("Notes", typeof(string));
    
                    //Add data to the new table.
                    for (int i = 0; i < 10; i++)
                    {
                        DataRow tableRow = taskTable.NewRow();
                        tableRow["Id"] = i;
                        tableRow["Item"] = "Item " + (10 - i).ToString();
                        tableRow["Notes"] = "<a href='https://www.google.com'>Google " + i + "</a>";
                        taskTable.Rows.Add(tableRow);
                    }
                    Countries.DataSource = taskTable;
                    Countries.DataBind();
    
                }
            }

    The resulting HTML.

    <a href="https://www.google.com">Google 0</a>

    Friday, January 25, 2019 5:29 PM
  • User-943250815 posted

    @ aazizasp

    Look closely. It show "https:  www.google.com " it was supposed be "https://www.google.com" with "//" and no spaces

    Friday, January 25, 2019 5:37 PM
  • User350923160 posted

    I tried all of the suggestions and nothing worker. 

    I changed the data in the database to "<a href="www.google.com">Google</a>" and here is what I get in F12 with same behavior, the word Google and not clickable.

    In theory, what I want to achieve in the notes column, is that convert certain parts of the text to a clickable hyperlink.

    Friday, January 25, 2019 6:21 PM
  • User475983607 posted

    I tried all of the suggestions and nothing worker. 

    I changed the data in the database to "<a href="www.google.com">Google</a>" and here is what I get in F12

    As stated above, if the database content is correct then the bug is in the code that fetches the data.  I built an example that fetches HTML from a DB and still cannot reproduce your issue.

    My best guess is you have code that is manipulating XML or DOM in some manor.   Either debug you code or provide a sample that reproduces this issue.

    Friday, January 25, 2019 6:34 PM
  • User350923160 posted

    I closed my browser and ran VS again and changed the data in the database to "<a href="www.google.com" target="_blank">Google</a> but now it opens a new tab, which is what I expected, but it points to "localhost:[portnumber]/Content/www.google.com" instead of just google.com and the first two lines of the page says "

    HTTP Error 404.0 - Not Found

    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

    "

    We are getting somewhere now.

    Friday, January 25, 2019 6:50 PM
  • User350923160 posted

    Changed the data in the database to "<a href="https://www.google.com" target="_blank">Google</a>" and now it works. It opens a new tab that points to Google.com without error. 

    Thanks everyone.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 25, 2019 6:53 PM
  • User475983607 posted

    Changed the data in the database to "<a href="https://www.google.com" target="_blank">Google</a>" and now it works. It opens a new tab that points to Google.com without error. 

    So the problem was invalid HTML in the database the whole time.

    Friday, January 25, 2019 7:14 PM
  • User350923160 posted

    No, the Https was there but like I said something strange happened in my browser with so many localhost tabs open. As soon as I closed the browser and restarted VS I was getting different behavior.

    Friday, January 25, 2019 7:58 PM