Điều khiển ASP.NET: Kiểm traBox, RadioButton, Danh sáchBox

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 thành phần điều khiển vào biểu mẫu, chẳng hạn như hộp văn bản và nhãn.

Hãy cùng xem xét các thành phần điều khiển khác có sẵn cho Web Forms và 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.

1. Khả năng cho người dùng nhập tên của mình.
2. Tùy chọn cho phép người dùng chọn thành phố nơi họ sinh sống.
3. Khả năng người dùng nhập tùy chọn cho giới tính.
4. 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 thiết kế trên web:

• Nhấp 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ờ chúng ta hãy bắt đầu thêm từng thành phần điều khiển một.

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. Một ví dụ phổ biến là khi một 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 biết những gì cần điền vào hộp văn bản. Hãy xem cách chúng ta có thể triển khai điều này với ví dụ được hiển thị bên dưới. Chúng ta sẽ sử dụng một nhãn có tên là 'name'. Nhãn này sẽ được sử dụng cùng với các điều khiển hộp văn bản, sẽ được thêm vào ở phần sau.

Bước 1) Bước đầu tiên là kéo điều khiển 'label' từ hộp công cụ vào Web Form như hình bên dưới.

Bước 2) Sau khi thêm nhãn, hãy làm theo các bước sau.

1. Mở 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.
2. Chọn tùy chọn Thuộc tính trong menu.

Bước 3) Trong cửa sổ thuộc tính, hãy thay đổi giá trị của 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 thực hiện các thay đổi trên, bạn sẽ thấy kết quả như 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 Biểu mẫu Web từ hộp công cụ như hình bên dưới.

Dưới đây là hình ảnh minh họa cách nó sẽ trông như thế nào trong trình thiết kế biểu mẫu sau khi điều khiển Textbox được thêm vào biểu mẫu.

Bước 2) Sau khi thêm Textbox, bạn phải thay đổi thuộc tính ID.

• Mở 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 Biểu mẫu Web từ hộp công cụ như hình bên dưới.

Bước 2) Sau khi bạn kéo hộp danh sách vào biểu mẫu, một menu phụ sẽ hiện ra. 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.

1. Bấm vào nút Thêm để thêm một mục danh sách.
2. Đặt tên cho giá trị văn bản của mục trong danh sách – trong trường hợp này là Mumbai. Lặp lại bước 1 và 2 để thêm các mục cho Mangalore và Hyderabad.
3. Bấm vào nút OK.

Bước 4) Vào 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 lstLocation.

Sau khi thực hiện các thay đổi trên, bạn sẽ thấy kết quả như sau.

Đầu ra: -

Từ kết quả hiển thị, bạn có thể thấy rõ ràng rằng 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 điều khiển 'radiobutton' từ hộp công cụ vào Biểu mẫu Web (xem hình bên dưới). Hãy chắc chắn thêm 2 nút radio, một cho tùy chọn 'Nam' và một 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 các bước tương tự để đổ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 thực hiện các thay đổi trên, bạn sẽ thấy kết quả như sau.

Đầu ra: -

Từ kết quả hiển thị, bạn có thể thấy rõ ràng rằng nút chọn đã được thêm vào biểu mẫu.

Checkbox

Hộp kiểm được sử dụng để cung cấp một 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 xem cách chúng ta có thể triển khai điều này với một 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 học 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 Biểu mẫu Web từ hộp công cụ như hình bên dưới.

Bước 2) Sau khi đã thêm các hộp kiểm, hãy thay đổi thuộc tính ID của hộp kiểm.

• Đ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'.

1. Thay đổi thuộc tính ID của hộp kiểm thành 'chkASP'.

2. Thay đổi thuộc tính ID của hộp kiểm thành chkC.

Sau khi thực hiện các thay đổi trên, bạn sẽ thấy kết quả như sau.

Đầu ra: -

Từ kết quả hiển thị, bạn có thể thấy rõ ràng rằng các ô chọn (Checkbox) đã được thêm vào biểu mẫu.

nút

Nút bấm được sử dụng để cho phép người dùng nhấp vào nút khác, từ đó bắt đầu quá trình 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 ta sẽ thêm một nút đơn giản có tên là nút 'Gửi'. Nút này sẽ được sử dụng để gửi tất cả thông tin trong biểu mẫu.

Bước 1) Bước đầu tiên là kéo điều khiển nút từ hộp công cụ vào Biểu mẫu Web như hình bên dưới.

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 thực hiện các thay đổi trên, bạn sẽ thấy kết quả như 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;
}

Code Giải trình:-

1. Dòng mã trên thực hiện thao tác đơn giản nhất. Nó lấy giá trị của điều khiển hộp văn bản Tên và gửi giá trị đó đế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 “GuruNếu nhập "99" vào ô văn bản tên, giá trị của txtName.Text sẽ là 'Guru99 '.
2. Dòng mã tiếp theo lấy giá trị được chọn từ hộp danh sách thông qua thuộc tính 'lstLocation.SelectedItem.Text'. Sau đó, nó ghi giá trị này trở lại máy khách thông qua phương thức Response.Write.
3. Cuối cùng, chúng ta ẩn tất cả các điều khiển trên biểu mẫu. Nếu không làm vậy, tất cả các điều khiển cùng với giá trị phản hồi sẽ được hiển thị cùng nhau. Thông thường, khi một người nhập đầy đủ thông tin vào biểu mẫu như Tên, địa điểm, Giới tính, v.v., trang tiếp theo hiển thị cho người dùng chỉ nên chứa 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à địa điểm. Nhưng ASP.Net không biết điều này, và do đó, theo mặc định, nó sẽ hiển thị lại tất cả các điều khiển khi người dùng nhấp vào nút Gửi. Vì vậy, chúng ta cần viết mã để đảm bảo tất cả các điều khiển đều được ẩn đi để người dùng chỉ thấy kết quả mong muốn.

Sau khi thực hiện các thay đổi trên, bạn sẽ thấy kết quả như sau.

Đầu ra: -

Trong màn hình Kết quả, hãy thực hiện các bước sau:

1. Hãy nêu tên của GuruNhập 99 vào ô tên.
2. Chọn một địa điểm trong danh sách địa điểm của Bangalore.
3. Bấm vào nút Gửi.

Sau khi làm điều này, bạn sẽ thấy 'Guru99' và vị trí 'Bangalore' được hiển thị trên trang.

Câu Hỏi Thường Gặp