¿Cómo crear un enlace que contiene una imagen y texto?

Question

Necesito crear un enlace para una página ASP.NET que tenga un texto de imagen &, que al hacer clic activará un evento en el servidor web.

Esto es lo que el enlace tendrá el siguiente aspecto:

Este es el código HTML para lo que el enlace se vería como si no estuviera trabajando con ASP.NET:

<a id='PdfLink' href='#'> 
    <img src="App_Themes/.../Images/PDF.gif" alt="Click for fact sheet PDF"/> 
    <span>Latest Performance</span> 
</a> 

El problema con esto es que quiero poder hacer clic en esto y desencadenar un evento del lado del servidor, pero no sé si puedo hacerlo con simples controles HTML.

Con ASP.NET puedo ver que hay varios controles tales como ImageButton & HyperLink pero no veo cómo puedo tener un hipervínculo & un ImageButton como parte del mismo control puede hacer clic.

¿Cuál es la mejor manera de obtener un enlace similar a la imagen que está vinculada a la funcionalidad del lado del servidor?

Answer 1

Se puede hacer como ..

<asp:LinkButton ID="LinkButton1" runat="server" 
Text="<img src='App_Themes/.../Images/PDF.gif' /> PdfLink"></asp:LinkButton> 

Answer 2

para hacer lo que quiere hacer en ASP .NET que había necesidad de hacer algo como esto:

<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton> 
<asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton> 

A continuación, podría escribir un control de servidor personalizado o usuario para encapsular los controles por lo que sólo exponen las propiedades que desea establecer una vez, como el evento al hacer clic.

Answer 3

Yo no haría esto mediante el uso de una mezcla de los controles.

me gustaría utilizar un control

<asp:LinkButton id="LinkButton1" runat="server" OnClick="ButtonClick_Event" CssClass="latest-performance">Latest Performance</asp:LinkButton> 

<asp:LinkButton> Entonces me gustaría utilizar el CssClass "última actuación" para darle estilo a la relación.

p. Ej.

.latest-performance{ 
    display: block; 
    padding-left: 20px; 
    background: url(url-to-the-pdf-icon) no-repeat left center; 
} 

Tendrá que tweek el estilo para adaptarse a lo que necesita, pero esto básicamente se verá exactamente igual que lo que necesita. También mantiene su código limpio y separa el estilo.

Answer 4

Puede hacer esto, esta respuesta es correcta.

<asp:HyperLink ID="hyperlink1" runat="server" NavigateUrl="Default.aspx" Target="_parent"><img src="Images/1.jpg"/>click</asp:HyperLink> 

Answer 5

<a href="../default.aspx" target="_blank"> 
<img src="../images/1.png" border="0" alt="Submission Form" /> 
    <br /> 
<asp:Literal ID="literalID" runat="server">Some text</asp:Literal></a> 

El beneficio de esto es que asp: literal es ligero. También puede cambiar el texto mediante programación en el asp: Literal, utilizando literalID.Text en el código que está detrás, si es necesario. Me gusta esto porque solo necesita usar un solo control dentro de una etiqueta simple. Puedes asignarle cualquier href, target e img que quieras. Espero que esto ayude.