How to create a hyperlink that contains both Binary image and text elements

Aug 01, 2019
5 minutes to read

The How to create a hyperlink that contains both image and text elements example demonstrates how to show an image inside a hyperlink. If you want to show a binary image, it is necessary to convert it in the following manner:

ASPxHyperLink.Text = String.Format("<img src='data:image/png;base64,{0}'/>{1}", Convert.ToBase64String(this.image), this.text)

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxhyperlink-how-to-create-a-hyperlink-that-contains-both-binary-image-and-text-elements-t191115

using DevExpress.Web.ASPxClasses.Internal;
using DevExpress.Web.ASPxEditors;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ImageLink : System.Web.UI.UserControl
{
    private byte[] image;
    private string text;

    public string NavigateUrl { 
        get { return ASPxHyperLink.NavigateUrl; } 
        set { ASPxHyperLink.NavigateUrl = value; } 
    }

    public byte[] ImageSrc {
        get { return this.image; }
        set
        {
            this.image = value;
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", this.image, this.text);
        }
    }
    public string LinkText { 
        get { return this.text; } 
        set 
        {
            this.text = value;
            ASPxHyperLink.Text = String.Format("<img src='data:image/png;base64,{0}'/>{1}", Convert.ToBase64String(this.image), this.text);
            ASPxHyperLink.NavigateUrl = string.Format("javascript:alert('{0}');", this.text);
        } 
    }

    protected void ASPxHyperLink_Init(object sender, EventArgs e)
    {
        if (RenderUtils.Browser.IsFirefox)
            ((ASPxHyperLink)sender).CssClass = "hyperlink_ff";
        else
            ((ASPxHyperLink)sender).CssClass = "hyperlink";
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="ImageLink.ascx" TagName="ImageLink" TagPrefix="uc" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxHyperLink with text and image</title>
</head>
<body>
    <form id="form1" runat="server">
    <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ads"
        KeyFieldName="CategoryID">
        <Columns>
            <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
                <EditFormSettings Visible="False" />
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn VisibleIndex="2">
                <DataItemTemplate>
                             <uc:ImageLink runat="server" id="ImageLink" ImageSrc='<%# Eval("Picture")%>' LinkText='<%# Eval("CategoryName")%>' />
                </DataItemTemplate>
            </dx:GridViewDataTextColumn>
        </Columns>
    </dx:ASPxGridView>
    <asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description], [Picture] FROM [Categories]">
    </asp:AccessDataSource>
    </form>
</body>
</html>

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageLink.ascx.cs" Inherits="ImageLink" %>
<%@ Register assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<style>
.hyperlink_ff img {
    padding-bottom:2px;
}

.hyperlink img {
    padding-bottom:3px;
}

.hyperlink_ie img, 
.hyperlink_ff img,
.hyperlink img {
    vertical-align: bottom;
}

a.dxeHyperlink,
a.dxeHyperlink:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink:visited,
a.dxeHyperlink:visited:hover,
a.dxeHyperlink:visited img,
a.dxeHyperlink:visited:hover img {
    border-bottom-color: #ab59a6;
}

a.dxeHyperlink:hover,
a.dxeHyperlink:hover img {
    border-bottom-color: #5494ea;
}

a.dxeHyperlink_BlackGlass,
a.dxeHyperlink_BlackGlass:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink_BlackGlass:visited,
a.dxeHyperlink_BlackGlass:visited:hover,
a.dxeHyperlink_BlackGlass:visited img,
a.dxeHyperlink_BlackGlass:visited:hover img {
    border-bottom-color: #800080;
}

a.dxeHyperlink_BlackGlass:hover,
a.dxeHyperlink_BlackGlass:hover img {
    border-bottom-color: #ff9600;
}
</style>
<dx:ASPxHyperLink ID="ASPxHyperLink" EncodeHtml="false" runat="server" OnInit="ASPxHyperLink_Init">
</dx:ASPxHyperLink>

using DevExpress.Web.ASPxClasses.Internal;
using DevExpress.Web.ASPxEditors;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //This line is used for the demo purpose
      //  uc1.NavigateUrl = uc1.NavigateUrl +"?id="+ DateTime.Now.Millisecond.ToString();
    }
}

Imports DevExpress.Web.ASPxClasses.Internal
Imports DevExpress.Web.ASPxEditors
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        'This line is used for the demo purpose
      '  uc1.NavigateUrl = uc1.NavigateUrl +"?id="+ DateTime.Now.Millisecond.ToString();
    End Sub
End Class

Imports DevExpress.Web.ASPxClasses.Internal
Imports DevExpress.Web.ASPxEditors
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class ImageLink
    Inherits System.Web.UI.UserControl

    Private image() As Byte
    Private text As String

    Public Property NavigateUrl() As String
        Get
            Return ASPxHyperLink.NavigateUrl
        End Get
        Set(ByVal value As String)
            ASPxHyperLink.NavigateUrl = value
        End Set
    End Property

    Public Property ImageSrc() As Byte()
        Get
            Return Me.image
        End Get
        Set(ByVal value As Byte())
            Me.image = value
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", Me.image, Me.text)
        End Set
    End Property
    Public Property LinkText() As String
        Get
            Return Me.text
        End Get
        Set(ByVal value As String)
            Me.text = value
            ASPxHyperLink.Text = String.Format("<img src='data:image/png;base64,{0}'/>{1}", Convert.ToBase64String(Me.image), Me.text)
            ASPxHyperLink.NavigateUrl = String.Format("javascript:alert('{0}');", Me.text)
        End Set
    End Property

    Protected Sub ASPxHyperLink_Init(ByVal sender As Object, ByVal e As EventArgs)
        If RenderUtils.Browser.IsFirefox Then
            DirectCast(sender, ASPxHyperLink).CssClass = "hyperlink_ff"
        Else
            DirectCast(sender, ASPxHyperLink).CssClass = "hyperlink"
        End If
    End Sub
End Class

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Src="ImageLink.ascx" TagName="ImageLink" TagPrefix="uc" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxHyperLink with text and image</title>
</head>
<body>
    <form id="form1" runat="server">
    <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ads"
        KeyFieldName="CategoryID">
        <Columns>
            <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
                <EditFormSettings Visible="False" />
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
            </dx:GridViewDataTextColumn>
            <dx:GridViewDataTextColumn VisibleIndex="2">
                <DataItemTemplate>
                             <uc:ImageLink runat="server" id="ImageLink" ImageSrc='<%#Eval("Picture")%>' LinkText='<%#Eval("CategoryName")%>' />
                </DataItemTemplate>
            </dx:GridViewDataTextColumn>
        </Columns>
    </dx:ASPxGridView>
    <asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description], [Picture] FROM [Categories]">
    </asp:AccessDataSource>
    </form>
</body>
</html>

<%@ Control Language="vb" AutoEventWireup="true" CodeFile="ImageLink.ascx.vb" Inherits="ImageLink" %>
<%@ Register assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<style>
.hyperlink_ff img {
    padding-bottom:2px;
}

.hyperlink img {
    padding-bottom:3px;
}

.hyperlink_ie img, 
.hyperlink_ff img,
.hyperlink img {
    vertical-align: bottom;
}

a.dxeHyperlink,
a.dxeHyperlink:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink:visited,
a.dxeHyperlink:visited:hover,
a.dxeHyperlink:visited img,
a.dxeHyperlink:visited:hover img {
    border-bottom-color: #ab59a6;
}

a.dxeHyperlink:hover,
a.dxeHyperlink:hover img {
    border-bottom-color: #5494ea;
}

a.dxeHyperlink_BlackGlass,
a.dxeHyperlink_BlackGlass:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink_BlackGlass:visited,
a.dxeHyperlink_BlackGlass:visited:hover,
a.dxeHyperlink_BlackGlass:visited img,
a.dxeHyperlink_BlackGlass:visited:hover img {
    border-bottom-color: #800080;
}

a.dxeHyperlink_BlackGlass:hover,
a.dxeHyperlink_BlackGlass:hover img {
    border-bottom-color: #ff9600;
}
</style>
<dx:ASPxHyperLink ID="ASPxHyperLink" EncodeHtml="false" runat="server" OnInit="ASPxHyperLink_Init">
</dx:ASPxHyperLink>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode