Ngôn ngữ ASP.NET - Điều khiển ImageButton

Điều khiển ImageButton của Web Forms

Cũng giống như điều khiển Button, điều khiển ImageButton có thêm hình trên nút điều khiển, mặc định đều là các nút Submit Button, mỗi khi được nhấn vào sẽ PostBack về Server.

Cú pháp tạo nút điều khiển ImageButton phía Server:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/logo-hiepsiit.png" OnClick="ImageButton1_Click" />

Phía server xử lý code trên trả về cho trình duyệt dạng HTML:

  <input type="image" name="ImageButton1" id="ImageButton1" src="images/logo-hiepsiit.png" />

Bảng các thuộc tính thường dùng:

Thuộc tính Ý nghĩa
(ID) Qui định tên của điều khiển. Tên của điều khiển là duy nhất.
AccessKey Qui định ký tự để di chuyển nhanh đến điều khiển - ký tự xử lý phím nóng.
Attributes Tập hợp các thuộc tính của điều khiển HTML
BackColor Qui định màu nền của điều khiển.
BorderColor Qui định màu đường viền của điều khiển.
BorderStyle Qui định kiểu đường viền của điều khiển.
Text Hiển thị chuỗi ra Lable
CommandName Tên lệnh. Được sử dụng trong sự kiện Command
BorderWidth Qui định độ rộng của đường viền.
CssClass Qui định hình thức hiển thị của điều khiển qua tên CSS.
Enabled Qui định điều khiển có được hiển thị hay không. Giá trị mặc định của thuộc tính này là True – được phép hiển thị.
Font Qui định Font hiển thị cho điều khiển
ForeColor Qui định màu chữ hiển thị trên điều khiển
Height Qui định chiều cao của điều khiển
ToolTip Dòng chữ sẽ hiển thị khi rê chuột vào điều khiển.
Width Qui định độ rộng của điều khiển.
ImageUrl Đường dẫn đến tập tin image
ImageAlgin

Vị trí hiển thị giữa hình và nội dung văn bản.

Màn hình window thuộc tính của ImageButton:

Ví dụ: Tạo trang web ImageButton.aspx:

ImageButton.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        Ví dụ sử dụng nút điều khiển ImageButton<br />
        <br />
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/logo-hiepsiit.png" OnClick="ImageButton1_Click" />
        <br />
        <br />
    
    </div>
        <asp:Label ID="lblNotice" runat="server"></asp:Label>  
    </form>
</body>
</html>

Code behind

ImageButton.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ImageButton : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        lblNotice.Text = "Chào mừng các bạn đến website hiepsiit.com";
    }
}

Thực thi trang web cho kết quả:

Click vào image cho kết quả: