Как создать ссылку, которая содержит изображение и текст?

Question

Мне нужно создать ссылку на страницу ASP.NET с изображением и текстом, которая при нажатии вызывает событие на веб-сервере.

Вот как должна выглядеть ссылка:

Это HTML-код ссылки, если бы я не работал с ASP.NET:

.

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

Проблема с этим заключается в том, что я хочу иметь возможность щелкнуть это и вызвать событие на стороне сервера, но я не знаю, смогу ли я сделать это с простыми старыми элементами управления HTML.

С ASP.NET я вижу, что существуют различные элементы управления, такие как ImageButton & HyperLink, но я не вижу, как я могу иметь гиперссылку и ImageButton как часть одного и того же интерактивного элемента управления.

Какой лучший способ для меня получить ссылку, подобную изображению, которая связана с функциональностью на стороне сервера?

Answer 1

Я бы не стал делать это, используя смесь элементов управления.

Я бы использовал <asp:LinkButton> элемент управления

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

Тогда я бы использовал CssClass "последней производительности"для стилизации ссылки.

например,

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

Вам придется настроить стиль, чтобы соответствовать тому, что вам нужно, но это в основном будет выглядеть точно так же, как вам нужно.Он также поддерживает ваш код в чистоте и выделяет стиль.

Answer 2

Вы можете сделать как ..

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

Answer 3

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

Преимущество этого заключается в том, что asp: Literal имеет малый вес.Вы также можете программно изменить текст внутри asp: Literal, используя literalID.Text в коде, если это необходимо.Мне это нравится, потому что вам нужно использовать только один элемент управления внутри простого тега.Вы можете дать ему любой href, target и img.Надеюсь, это поможет.

Answer 4

Чтобы сделать то, что вы хотите сделать в ASP .NET, вам нужно сделать что-то вроде этого:

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

Затем можно написать собственный сервер или пользовательский элемент управления для инкапсуляции этих элементов управления, чтобы они отображали только те свойства, которые вы хотите установить один раз, например событие при нажатии.

Answer 5

Вы можете сделать это, этот ответ правильный.

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