Cách tạo liên kết chứa hình ảnh & văn bản?

Question

Tôi cần tạo liên kết cho trang ASP.NET có văn bản hình ảnh &, khi được nhấp vào sẽ kích hoạt sự kiện trên máy chủ web.

Đây là những gì liên kết nên hình như:

Đây là HTML cho những gì liên kết sẽ trông như thế nào nếu tôi không làm việc với ASP.NET:

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

Vấn đề với đây là tôi muốn có thể nhấp vào điều này và kích hoạt sự kiện phía máy chủ, nhưng tôi không biết liệu tôi có thể thực hiện điều đó bằng các điều khiển HTML cũ thuần túy hay không.

Với ASP.NET tôi có thể thấy rằng có nhiều điều khiển khác nhau như ImageButton & Siêu liên kết nhưng tôi không thấy cách tôi có thể có một siêu liên kết & một ImageButton như một phần của cùng một điều khiển có thể nhấp.

Cách tốt nhất để tôi có được liên kết tương tự như hình ảnh bị ràng buộc với chức năng phía máy chủ là gì?

Answer 1

Bạn có thể làm như ..

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

Answer 2

Để làm những gì bạn muốn làm trong ASP NET bạn cần phải làm điều gì đó như thế này:

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

Sau đó, bạn có thể viết một máy chủ tùy chỉnh hoặc sử dụng kiểm soát để đóng gói những điều khiển để họ chỉ lộ các thuộc tính bạn muốn đặt một lần, chẳng hạn như sự kiện khi được nhấp.

Answer 3

tôi sẽ không làm điều này bằng cách sử dụng một hỗn hợp của các điều khiển.

Tôi sẽ sử dụng một <asp:LinkButton> kiểm soát

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

Sau đó, tôi sẽ sử dụng CssClass "mới nhất hiệu suất" để tạo kiểu lên liên kết.

ví dụ:

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

Bạn sẽ phải xoay tròn phong cách để phù hợp với những gì bạn cần, nhưng về cơ bản, nó trông giống hệt như những gì bạn cần. Nó cũng giữ mã của bạn sạch sẽ, và tách ra phong cách.

Answer 4

Bạn có thể làm như thế này, câu trả lời này là chính xác.

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

Lợi ích của việc này là asp rằng: Literal là nhẹ. Bạn cũng có thể thay đổi chương trình văn bản bên trong asp: Literal, bằng cách sử dụng literalID.Text trong đoạn mã phía sau, nếu bạn cần. Tôi thích điều này bởi vì bạn chỉ cần sử dụng một điều khiển bên trong một thẻ đơn giản. Bạn có thể cung cấp cho nó bất kỳ href, mục tiêu và img nào bạn muốn. Hi vọng điêu nay co ich.