How to create a link that contains an image & text?

I need to create a link for an ASP.NET page that has an image & text, which when clicked will trigger an event on the webserver.

This is what the link should look like:

This is the HTML for what the link would look like if I wasn't working with ASP.NET:

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

The problem with this is that I want to be able to click this and trigger an server-side event, but I don't know if I can do开发者_运维百科 that with plain old HTML controls.

With ASP.NET I can see that there are various controls such as ImageButton & HyperLink but I don't see how I can have a Hyperlink & an ImageButton as part of the same clickable control.

What's the best way for me to get a link similar to the image that is bound to server-side functionality?

I wouldn't do this by using a mixture of controls.

I would use a <asp:LinkButton> control

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

Then I would use the CssClass "latest-performance" to style up the link.

e.g.

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

You will have to tweek the style to fit with what you need, but this will basically look exactly the same as what you need. It also keeps your code clean, and separates out the style.

You can do like..

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

To do what you want to do in ASP .NET you'd need to do something like this:

<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>

You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.

<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>

The benefit of this is that asp:Literal is lightweight. You can also programmatically change the text inside the asp:Literal, by using literalID.Text in the code behind, if you need to. I like this because you only need to use a single control inside of a simple tag. You can give it whichever href, target, and img you want. Hope this helps.

You can do like this, this answer is correct.

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