ASP.NET Denetimleri: Kontrol EtBox, Radyo Düğmesi, ListeBox

Web Formlarına ASP.Net Denetimleri Ekleme

ASP.Net, formlara metin kutuları ve etiketler gibi kontroller ekleme özelliğine sahiptir.

Web Formları için mevcut diğer kontrolleri inceleyelim ve bunların bazı ortak özelliklerine bakalım.

Örneğimizde aşağıdaki işlevselliğe sahip bir form oluşturacağız.

1. Kullanıcının adını girme yeteneği.
2. Kullanıcının ikamet ettiği şehri seçme seçeneği.
3. Kullanıcının cinsiyet için bir seçenek girebilmesi.
4. Kullanıcının öğrenmek istediği dersi seçme seçeneği. İkisi için de seçimler olacak C# ve ASP.Net.

Her bir kontrole ayrıntılı olarak bakalım. Yukarıda belirtilen işlevselliğe sahip formu oluşturmak için bunları ekleyelim.

) 1 Adım İlk adım Demo web formu için Form Tasarımcısını açmaktır. Bunu yaptıktan sonra araç kutusundan denetimleri sürükleyip bırakabileceksiniz. internet formu.

Tasarımcı web formunu açmak için:

• Çözüm Gezgini'nde Demo.aspx dosyasına sağ tıklayın ve
• Tasarımcıyı Görüntüle menü seçeneğini seçin.

Yukarıdaki adımı gerçekleştirdiğinizde Form Tasarımcınızı aşağıda gösterildiği gibi görebileceksiniz.

Şimdi kontrollerimizi tek tek eklemeye başlayalım.

Etiket Kontrolü

Etiket denetimi, formda kullanıcıya bir metin veya mesaj göstermek için kullanılır. Etiket denetimi genellikle diğer denetimlerle birlikte kullanılır. Yaygın bir örnek, bir etiketin metin kutusu denetimiyle birlikte eklenmesidir. Etiket, kullanıcıya metin kutusuna ne yazması gerektiği konusunda bir ipucu verir. Aşağıda gösterilen örnekle bunu nasıl uygulayabileceğimizi görelim. 'Ad' adlı bir etiket kullanacağız. Bu, daha sonraki bölümde eklenecek olan metin kutusu denetimleriyle birlikte kullanılacaktır.

) 1 Adım İlk adım, aşağıdaki resimde gösterildiği gibi araç kutusundan 'etiket' kontrolünü Web Formuna sürüklemektir.

) 2 Adım Etiket eklendikten sonra aşağıdaki adımları izleyin.

1. Etiket denetimine sağ tıklayarak özellikler penceresine gidin.
2. Özellikler menü seçeneğini seçin.

) 3 Adım Özellikler penceresinden, Metin özelliğinin değerini Ad olarak değiştirin.

Benzer şekilde, kontrolün ID özelliği değerini de lblName olarak değiştirin. Kontrollere anlamlı bir ID belirtilerek kodlama aşamasında bunlara erişim kolaylaşır. Bu aşağıda gösterilmiştir.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Web Formunda Ad etiketinin göründüğünü göreceksiniz.

Metin kutusu

Bir metin kutusu, bir kullanıcının Web form uygulamasında bir miktar metin girmesine izin vermek için kullanılır. Aşağıda gösterilen bir örnekle bunu nasıl uygulayabileceğimizi görelim. Kullanıcının adını girebileceği bir metin kutusunu forma ekleyeceğiz.

) 1 Adım İlk adım, aşağıdaki resimde gösterildiği gibi araç kutusundan metin kutusu denetimini Web Formuna sürüklemektir.

Aşağıda, Textbox denetimi forma eklendikten sonra form tasarımcısında nasıl görüneceği gösterilmiştir.

) 2 Adım Textbox eklendikten sonra ID özelliğini değiştirmeniz gerekiyor.

• Textbox denetimine sağ tıklayarak özellikler penceresine gidin ve
• Özellikler'i seçin, ardından
• Metin kutusunun ID özelliğini txtName olarak değiştirin.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Liste kutusu

Bir Listbox, Web formundaki öğelerin bir listesini sergilemek için kullanılır. Aşağıda gösterilen bir örnekle bunu nasıl uygulayabileceğimizi görelim. Forma bazı şehir konumlarını depolamak için bir liste kutusu ekleyeceğiz.

) 1 Adım İlk adım, aşağıdaki resimde gösterildiği gibi, araç kutusundan liste kutusu denetimini Web Formuna sürüklemektir.

) 2 Adım Liste kutusunu forma sürüklediğinizde ayrı bir yan menü görünecektir. Bu menüde 'Öğeleri Düzenle' menüsünü seçin.

) 3 Adım Şimdi liste öğelerini liste kutusuna ekleyebileceğiniz bir iletişim kutusu karşınıza çıkacak.

1. Bir liste öğesi eklemek için Ekle düğmesine tıklayın.
2. Liste öğesinin metin değeri için bir ad verin – bizim örneğimizde Mumbai. Mangalore ve Hyderabad için liste öğeleri eklemek üzere 1. ve 2. adımları tekrarlayın.
3. Tamam düğmesine tıklayın.

) 4 Adım Özellikler penceresine gidin ve denetimin ID özelliğinin değerini lstLocation olarak değiştirin.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Çıktıdan da açıkça görülebileceği gibi, Listbox forma eklendi.

RadioButton

Kullanıcının aralarından birini seçebileceği öğelerin listesini görüntülemek için Radyo düğmesi kullanılır. Aşağıda gösterilen örnekle bunu nasıl uygulayabileceğimizi görelim. Erkek/kadın seçeneği için bir radyo düğmesi ekleyeceğiz.

) 1 Adım İlk adım, araç kutusundan 'radyo düğmesi' kontrolünü Web Formuna sürüklemektir (aşağıdaki resme bakın). 'Erkek' ve 'Kadın' seçenekleri için iki radyo düğmesi eklediğinizden emin olun.

) 2 Adım Radyo düğmesi eklendikten sonra 'text' özelliğini değiştirin.

• 'Radyodüğmesi kontrolü'ne tıklayarak özellikler penceresine gidin.
• Radyo düğmesinin metin özelliğini 'Erkek' olarak değiştirin.
• Aynı adımı tekrarlayarak 'Kadın' olarak değiştirin.
• Ayrıca ilgili kontrollerin kimlik özelliklerini rdMale ve rdFemale olarak değiştirin.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Çıktıdan da açıkça görülebildiği gibi, radyo düğmesi forma eklendi.

Onay Kutusu

Onay kutusu, kullanıcının birden fazla seçenek arasından seçim yapabileceği bir seçenek listesi sunmak için kullanılır. Aşağıda gösterilen örnekle bunu nasıl uygulayabileceğimizi görelim. Web Formlarımıza 2 onay kutusu ekleyeceğiz. Bu onay kutuları, kullanıcıya öğrenmek isteyip istemediği konusunda bir seçenek sunacaktır. C# veya ASP.Net.

) 1 Adım İlk adım, aşağıdaki resimde gösterildiği gibi, onay kutusu denetimini araç kutusundan Web Formuna sürüklemektir.

) 2 Adım Onay kutuları eklendikten sonra, onay kutusu kimliği özelliğini değiştirin.

• Onay Kutusu denetimine tıklayarak özellikler penceresine gidin.
• İlgili kontrollerin kimlik özelliklerini 'chkC' ve 'chkASP' olarak değiştirin.

Ayrıca, Checkbox denetiminin text özelliğini 'C#' olarak değiştirin. Diğer Checkbox denetimi için de aynısını yapın ve onu 'ASP.Net' olarak değiştirin.

1. Onay kutusunun ID özelliğini 'chkASP' olarak değiştirin.

2. Onay kutusunun ID özelliğini chkC olarak değiştirin.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Çıktıdan da açıkça görülebileceği gibi, onay kutuları forma eklenmiştir.

düğme

Kullanıcının bir düğmeye tıklayarak formun işlenmesini başlatmasını sağlamak için bir düğme kullanılır. Aşağıda gösterildiği gibi mevcut örneğimizde bunu nasıl uygulayabileceğimizi görelim. 'Gönder' düğmesi adında basit bir düğme ekleyeceğiz. Bu düğme, formdaki tüm bilgileri göndermek için kullanılacaktır.

) 1 Adım İlk adım, aşağıdaki resimde gösterildiği gibi, düğme denetimini araç kutusundan Web Formuna sürüklemektir.

) 2 Adım Düğme eklendikten sonra düğme kontrolüne tıklayarak özellikler penceresine gidin. Düğme denetiminin metin özelliğini Gönder olarak değiştirin. Ayrıca düğmenin ID özelliğini 'btnSubmit' olarak değiştirin.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Çıktıdan butonun forma eklendiğini açıkça görebilirsiniz.

ASP.Net'te Olay İşleyicisi

Bir web formuyla çalışırken kontrollere etkinlik ekleyebilirsiniz. Bir olay, bir eylem gerçekleştirildiğinde meydana gelen bir şeydir. Muhtemelen en yaygın eylem, formdaki bir düğmenin tıklatılmasıdır.

Web formlarında ilgili aspx.cs dosyasına kod ekleyebilirsiniz. Bu kod, formda bir düğmeye basıldığında belirli eylemleri gerçekleştirmek için kullanılabilir. Bu genellikle Web Formlarında en yaygın olaydır. Bunu nasıl başarabileceğimizi görelim.

Bunu basitleştireceğiz. Kullanıcı tarafından girilen adı görüntülemek için düğme kontrolüne bir etkinlik eklemeniz yeterlidir. Bunu başarmak için aşağıdaki adımları takip edelim.

) 1 Adım Öncelikle Web Formu'ndaki Button'a çift tıklamanız gerekiyor. Bu, Visual Studio'daki button için olay kodunu getirecektir.

Visual Studio, web formları tasarımcısında düğmeye çift tıkladığınızda btnSubmit_Click olayını otomatik olarak ekler.

) 2 Adım Şimdi submit olayına kullanıcı tarafından seçilen isim metin kutusu değerini ve konumu görüntüleyen kodu ekleyelim.

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 Açıklama:-

1. Yukarıdaki kod satırı en basit işlemi yapar. İsim metin kutusu denetiminin değerini alır ve Yanıt nesnesi aracılığıyla istemciye gönderir. Yani "Guruİsim metin kutusunda "99" ifadesi yer alıyorsa, txtName.Text'in değeri 'Guru99 '.
2. Sonraki kod satırı, 'lstLocation.SelectedItem.Text' özelliği aracılığıyla liste kutusunun seçili değerini alır. Ardından bu değeri Response.Write yöntemiyle istemciye geri yazar.
3. Son olarak, formdaki tüm kontrolleri görünmez hale getiriyoruz. Bunu yapmazsak, tüm kontroller ve yanıt değerlerimiz birlikte görüntülenecektir. Normalde, bir kişi ad, konum, cinsiyet vb. gibi tüm bilgileri forma girdiğinde, kullanıcıya gösterilen bir sonraki sayfada yalnızca girilmeyen bilgiler yer almalıdır. Kullanıcı ad, cinsiyet ve konum kontrollerini tekrar görmek istemez. Ancak ASP.Net bunu bilmiyor ve bu nedenle, varsayılan olarak, kullanıcı Gönder düğmesine tıkladığında tüm kontrolleri tekrar gösterecektir. Bu nedenle, kullanıcının yalnızca istenen çıktıyı görmesi için tüm kontrollerin gizlenmesini sağlayacak kod yazmamız gerekiyor.

Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz.

Çıktı:-

Çıktı ekranında aşağıdaki adımları uygulayın:

1. Bir isim verin Guruİsim kutusuna 99 yazın.
2. Bangalore'un bulunduğu liste kutusundan bir konum seçin.
3. Gönder düğmesine tıklayın.

Bunu yaptıktan sonra şunu göreceksiniz:GuruSayfada '99' ve 'Bangalore' konumu gösteriliyor.

SSS