How to bind the URL of a GridView HyperLinkField when the bound value contains a colon?

I’m trying to bind a GridView HyperLinkField such that the bound column is used as a parameter value in the URL. Pretty standard stuff – nothing fancy, but the binding fails when the bound column contains a colon, i.e. :. I’m my particular case, this value is a string representing a duration of time, e.g. “14:35”, or “1:07:19”.

Here’s my GridView, with the time value bound to the HyperLinkField url.

<asp:GridView ID="ResultsGridView" runat="server" AutoGenerateColumns="False" 
    DataSourceID="ResultsDataSource" EnableModelValidation="True" 
        AllowPaging="True">
    <Columns>
        <asp:BoundField DataField="Year" HeaderText="Year" SortExpression="Year" />
        <asp:HyperLinkField DataNavigateUrlFields="RunTime" 
            DataTextField="RunTime" HeaderText="Hyperlink" 
            DataNavigateUrlFormatString="LinkedPage.aspx?param={0}" />
        <asp:BoundField DataField="RunTime" HeaderText="Time" 
            SortExpression="RunTime" />
        <asp:BoundField DataField="FullName" HeaderText="Name" 
            SortExpression="FullName" ReadOnly="True" />
    </Columns>
</asp:GridView>

It produces HTML like this. Note that the <a> tags have no href attribute.

<tr>
    <td>2010</td><td><a>34:58</a></td><td>34:58</td><td>Joe Schmoe</td>
</tr><tr>
    <td>2010</td><td><a>35:30</a></td><td>35:30</td><td>Rod Krueger</td>
</tr><tr>
    <td>2010</td><td><a>35:38</a></td><td>35:38</td><td>Mike Johnson</td>
</tr>

But if I switch the bound field from RunTime to Year, i.e. to a column that doesn’t contain a colon in the values, it works as expected. Take the GridView above, and change the DataNavigateUrlFields attribute of the HyperLinkField, like so:

    <asp:HyperLinkField DataNavigateUrlFields="Year" 
        DataTextField="RunTime" HeaderText="Hyperlink" 
        DataNavigateUrlFormatString="LinkedPage.aspx?param={0}" />

And now the HTML output is correct, like this:

<tr>
    <td>2010</td><td><a href="LinkedPage.aspx?param=2010" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">34:58</a></td><td>34:58</td><td>Joe Schmoe</td>
</tr><tr>
    <td>2010</td><td><a href="LinkedPage.aspx?param=2010" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">35:30</a></td><td>35:30</td><td>Rod Krueger</td>
</tr><tr>
    <td>2010</td><td><a href="LinkedPage.aspx?param=2010" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">35:38</a></td><td>35:38</td><td>Mike Johnson</td>
</tr><tr>

So the nut of my question is this: how do I bind a data column with values that contain a colon to the URL of a HyperLinkField? Or, failing that, create the same bound hyperlink by another method?

Changing the format of the data to not include a colon would be a last resort, because LinkedPage.aspx expects the parameter value in that format, and it’s already written, tested and in use.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

<asp:TemplateField HeaderText="Hyperlink">
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" 
                NavigateUrl='<%# Eval("RunTime", @"LinkedPage.aspx?param={0:hh:mm}") %>' 
                Text='<%# Eval("RunTime", @"{0:hh:mm}") %>'></asp:HyperLink>
        </ItemTemplate>
    </asp:TemplateField>

Method 2

Wow, very strange, worse comes to worse, as a very last step, you can always tap into RowDataBound, and set the cell text to hyperlink HTML yourself, but in the meantime, try tapping into RowDataBound and examining the results there. Maybe you can encode the value at binding time, so that if there is an issue with :, encoding probably will resolve it?

You may also want to submit that as a bug to connect.microsoft.com…

HTH.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0