Điều khiển ASP.NET: Kiểm traBox, RadioButton, Danh sáchBox, Hộp văn bản, Nhãn
Jacob Lee
Thêm điều khiển ASP.Net vào biểu mẫu web
ASP.Net có khả năng thêm các điều khiển vào biểu mẫu như hộp văn bản và nhãn.
Hãy xem xét các điều khiển khác có sẵn cho biểu mẫu Web và xem một số thuộc tính chung của chúng.
Trong ví dụ này, chúng tôi sẽ tạo một biểu mẫu có chức năng sau.
- Khả năng cho người dùng nhập tên của mình.
- Tùy chọn để chọn thành phố nơi người dùng cư trú
- Khả năng người dùng nhập tùy chọn cho giới tính.
- Một tùy chọn để chọn một khóa học mà người dùng muốn học. Sẽ có sự lựa chọn cho cả hai C# và ASP.Net
Chúng ta hãy xem xét từng điều khiển một cách chi tiết. Hãy thêm chúng để xây dựng biểu mẫu với chức năng nêu trên.
Bước 1) Bước đầu tiên là mở Forms Designer cho biểu mẫu web Demo. Sau khi thực hiện, bạn sẽ có thể kéo các điều khiển từ hộp công cụ vào hình thức web.
Để mở biểu mẫu web Designer,
- Bấm chuột phải vào tệp Demo.aspx trong Solution Explorer và
- Chọn tùy chọn menu Xem Trình thiết kế.
Khi bạn thực hiện bước trên, bạn sẽ có thể thấy Trình thiết kế biểu mẫu của mình như hiển thị bên dưới.
Bây giờ hãy bắt đầu thêm từng điều khiển của chúng tôi
Kiểm soát nhãn
Điều khiển nhãn được sử dụng để hiển thị văn bản hoặc thông báo cho người dùng trên biểu mẫu. Điều khiển nhãn thường được sử dụng cùng với các điều khiển khác. Ví dụ phổ biến là khi nhãn được thêm vào cùng với điều khiển hộp văn bản. Nhãn cung cấp cho người dùng chỉ dẫn về những gì dự kiến sẽ điền vào hộp văn bản. Chúng ta hãy xem cách chúng ta có thể triển khai điều này bằng ví dụ được hiển thị bên dưới. Chúng ta sẽ sử dụng nhãn có tên là 'tên'. Nhãn này sẽ được sử dụng kết hợp với các điều khiển hộp văn bản, sẽ được thêm vào trong phần sau.
Bước 1) Bước đầu tiên là kéo điều khiển 'nhãn' vào Web Form từ hộp công cụ như hiển thị bên dưới.
Bước 2) Sau khi thêm nhãn, hãy làm theo các bước sau.
- Đi tới cửa sổ thuộc tính bằng cách nhấp chuột phải vào điều khiển nhãn
- Chọn tùy chọn menu Thuộc tính
Bước 3) Từ cửa sổ thuộc tính, đổi tên thuộc tính Văn bản thành Tên
Tương tự, cũng thay đổi giá trị thuộc tính ID của điều khiển thành lblName. Bằng cách chỉ định ID có ý nghĩa cho các điều khiển, việc truy cập chúng trong giai đoạn mã hóa sẽ trở nên dễ dàng hơn. Điều này được hiển thị dưới đây.
Sau khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Bạn sẽ thấy nhãn Tên xuất hiện trên Web Form.
Hộp văn bản
Hộp văn bản được sử dụng để cho phép người dùng nhập một số văn bản vào ứng dụng biểu mẫu Web. Chúng ta hãy xem cách chúng ta có thể triển khai điều này bằng ví dụ được hiển thị bên dưới. Chúng ta sẽ thêm một hộp văn bản vào biểu mẫu mà người dùng có thể nhập tên của mình.
Bước 1) Bước đầu tiên là kéo điều khiển hộp văn bản vào Web Form từ hộp công cụ như hình dưới đây
Dưới đây là cách nó sẽ trông như thế nào trong trình thiết kế biểu mẫu khi điều khiển Hộp văn bản nằm trên biểu mẫu
Bước 2) Sau khi thêm Textbox, bạn phải thay đổi thuộc tính ID.
- Đi đến cửa sổ thuộc tính bằng cách nhấp chuột phải vào điều khiển Textbox và
- Chọn thuộc tính sau đó
- Thay đổi thuộc tính id của hộp văn bản thành txtName.
Sau khi thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau.
Đầu ra: -
Hộp danh sách
Listbox được sử dụng để hiển thị danh sách các mục trên biểu mẫu Web. Hãy cùng xem cách chúng ta có thể triển khai điều này bằng ví dụ được hiển thị bên dưới. Chúng ta sẽ thêm một hộp danh sách vào biểu mẫu để lưu trữ một số vị trí thành phố.
Bước 1) Bước đầu tiên là kéo điều khiển hộp danh sách vào Web Form từ hộp công cụ như hình dưới đây
Bước 2) Khi bạn kéo hộp danh sách vào biểu mẫu, một menu bên riêng biệt sẽ xuất hiện. Trong menu này, hãy chọn menu 'Chỉnh sửa mục'.
Bước 3) Bây giờ bạn sẽ thấy một hộp thoại trong đó bạn có thể thêm các mục danh sách vào hộp danh sách.
- Bấm vào nút Thêm để thêm một mục danh sách.
- Đặt tên cho giá trị văn bản của mục danh sách – Trong trường hợp của chúng tôi là Mumbai. Lặp lại bước 1 và 2 để thêm các mục danh sách cho Mangalore và Hyderabad.
- Bấm vào nút OK
Bước 4) Đi tới cửa sổ thuộc tính và thay đổi giá trị thuộc tính ID của điều khiển thành lstVị trí.
Sau khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Từ kết quả đầu ra, bạn có thể thấy rõ Listbox đã được thêm vào biểu mẫu.
Nút radio
Nút Radio được sử dụng để hiển thị danh sách các mục mà người dùng có thể chọn một mục. Hãy xem cách chúng ta có thể triển khai điều này bằng ví dụ bên dưới. Chúng tôi sẽ thêm nút radio cho tùy chọn nam/nữ.
Bước 1) Bước đầu tiên là kéo nút điều khiển 'radiobutton' vào Web Form từ hộp công cụ. (xem hình ảnh bên dưới). Đảm bảo thêm 2 nút radio, một cho tùy chọn 'Nam' và nút còn lại cho 'Nữ'.
Bước 2) Sau khi thêm Radiobutton, hãy thay đổi thuộc tính 'text'.
- Đi tới cửa sổ thuộc tính bằng cách nhấp vào 'Điều khiển nút radio'.
- Thay đổi thuộc tính văn bản của nút Radio thành 'Nam'.
- Lặp lại bước tương tự để thay đổi thành 'Nữ'.
- Ngoài ra, hãy thay đổi thuộc tính ID của các điều khiển tương ứng thành rdMale và rdFemale.
Sau khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Từ đầu ra, bạn có thể thấy rõ nút radio đã được thêm vào biểu mẫu
Checkbox
Hộp kiểm được sử dụng để cung cấp danh sách các tùy chọn mà người dùng có thể chọn nhiều lựa chọn. Hãy cùng xem cách chúng ta có thể triển khai điều này bằng ví dụ được hiển thị bên dưới. Chúng ta sẽ thêm 2 hộp kiểm vào biểu mẫu Web của mình. Các hộp kiểm này sẽ cung cấp cho người dùng tùy chọn về việc họ có muốn tìm hiểu hay không C# hoặc ASP.Net.
Bước 1) Bước đầu tiên là kéo điều khiển hộp kiểm vào Web Form từ hộp công cụ như hình dưới đây
Bước 2) Sau khi đã thêm hộp kiểm, hãy thay đổi thuộc tính id của hộp kiểm thành 'chkASP'.
- Đi đến cửa sổ thuộc tính bằng cách nhấp vào điều khiển Hộp kiểm.
- Thay đổi thuộc tính ID của các điều khiển tương ứng thành 'chkC' và 'chkASP'.
Ngoài ra, hãy thay đổi thuộc tính text của điều khiển Checkbox thành 'C#'. Làm tương tự với điều khiển Checkbox khác và đổi thành 'ASP.Net'.
- Thay đổi thuộc tính ID của hộp kiểm thành 'chkASP'
- Thay đổi thuộc tính ID của hộp kiểm thành chkC
Sau khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Từ kết quả đầu ra, bạn có thể thấy rõ rằng Hộp kiểm đã được thêm vào biểu mẫu.
nút
Một nút được sử dụng để cho phép người dùng nhấp vào nút để bắt đầu xử lý biểu mẫu. Hãy xem cách chúng ta có thể triển khai điều này với ví dụ hiện tại như bên dưới. Chúng tôi sẽ thêm một nút đơn giản gọi là nút 'Gửi'. Điều này sẽ được sử dụng để gửi tất cả các thông tin trên biểu mẫu.
Bước 1) Bước đầu tiên là kéo nút điều khiển vào Web Form từ hộp công cụ như hình dưới đây
Bước 2) Khi nút đã được thêm, hãy chuyển đến cửa sổ thuộc tính bằng cách nhấp vào nút điều khiển. Thay đổi thuộc tính văn bản của điều khiển nút thành Gửi. Ngoài ra, hãy thay đổi thuộc tính ID của nút thành 'btnSubmit'.
Sau khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Từ đầu ra, bạn có thể thấy rõ rằng nút đã được thêm vào biểu mẫu.
Trình xử lý sự kiện trong ASP.Net
Khi làm việc với biểu mẫu web, bạn có thể thêm sự kiện vào điều khiển. Sự kiện là điều gì đó xảy ra khi một hành động được thực hiện. Có lẽ hành động phổ biến nhất là nhấp vào nút trên biểu mẫu.
Trong biểu mẫu web, bạn có thể thêm mã vào tệp aspx.cs tương ứng. Mã này có thể được sử dụng để thực hiện một số hành động nhất định khi nhấn nút trên biểu mẫu. Đây thường là sự kiện phổ biến nhất trong Biểu mẫu web. Hãy xem làm thế nào chúng ta có thể đạt được điều này.
Chúng tôi sẽ làm cho việc này trở nên đơn giản. Chỉ cần thêm một sự kiện vào nút điều khiển để hiển thị tên do người dùng nhập. Hãy làm theo các bước dưới đây để đạt được điều này.
Bước 1) Đầu tiên, bạn phải nhấp đúp vào Button trên Web Form. Thao tác này sẽ đưa ra mã sự kiện cho button trong Visual Studio.
Sự kiện btnSubmit_Click được Visual Studio tự động thêm vào khi bạn nhấp đúp vào nút trong trình thiết kế biểu mẫu web.
Bước 2) Bây giờ chúng ta hãy thêm mã vào sự kiện gửi để hiển thị giá trị hộp văn bản tên và vị trí do người dùng chọn.
protected void btnSubmit_Click(object sender,EventArgs e)
{
Response.Write(txtName.Text + "</br>");
Response.Write(lstLocation.SelectedItem.Text + "</br>");
lblName.Visible = false;
txtName.Visible = false;
lstLocation.Visible = false;
chkC.Visible = false;
chkASP.Visible = false;
rdFemale.Visible = false;
btnSubmit.Visible = false;
}
Giải thích mã: -
- Dòng mã trên thực hiện điều đơn giản nhất. Nó lấy giá trị của điều khiển hộp văn bản Name và gửi đến máy khách thông qua đối tượng Response. Vì vậy, nếu bạn muốn nhập chuỗi “Guru99” vào hộp văn bản name, giá trị của txtName. Một văn bản sẽ là 'Guru99'.
- Dòng mã tiếp theo lấy giá trị đã chọn của hộp danh sách thông qua thuộc tính 'lstLocation.SelectedItem.text'. Sau đó, nó ghi giá trị này thông qua phương thức Response.Write trở lại máy khách.
- Cuối cùng, chúng tôi biến tất cả các điều khiển trên biểu mẫu thành vô hình. Nếu chúng tôi không làm điều này, tất cả các điều khiển cộng với các giá trị phản hồi của chúng tôi sẽ được hiển thị cùng nhau. Thông thường, khi một người nhập tất cả thông tin trên biểu mẫu như Tên, vị trí, Giới tính, v.v. Trang tiếp theo được hiển thị cho người dùng chỉ nên có những thông tin chưa được nhập. Người dùng không muốn nhìn thấy lại các điều khiển Tên, Giới tính, vị trí. Nhưng ASP.Net không biết điều này và do đó, theo mặc định, nó sẽ lại hiển thị tất cả các điều khiển khi người dùng nhấp vào nút Gửi. Do đó, chúng ta cần viết mã để đảm bảo tất cả các điều khiển đều bị ẩn để người dùng chỉ nhìn thấy kết quả đầu ra mong muốn.
Khi bạn thực hiện những thay đổi trên, bạn sẽ thấy kết quả sau
Đầu ra: -
Trong màn hình Output, thực hiện các bước sau
- Đặt tên Guru99 vào hộp văn bản tên
- Chọn một vị trí trong hộp danh sách của Bangalore
- Bấm vào nút Gửi
Khi bạn thực hiện việc này, bạn sẽ thấy 'Guru99' và vị trí 'Bangalore' được hiển thị trên trang.
Tổng kết
- In ASP.Net, bạn có thể thêm các điều khiển chuẩn vào biểu mẫu như nhãn, hộp văn bản, hộp danh sách, v.v.
- Mỗi điều khiển có thể có một sự kiện liên quan đến nó. Sự kiện phổ biến nhất là sự kiện nhấn nút. Điều này được sử dụng khi thông tin cần được gửi đến máy chủ web.