ASP.NET Denetimleri: Kontrol EtBox, Radyo Düğmesi, ListeBox, Metin kutusu, Etiket
Yakup Lee
Web Formlarına ASP.Net Denetimleri Ekleme
ASP.Net, bir forma metin kutuları ve etiketler gibi kontroller ekleme olanağına sahiptir.
Web formları için kullanılabilen diğer kontrollere bakalım ve bunların bazı ortak özelliklerini görelim.
Örneğimizde aşağıdaki işlevselliğe sahip bir form oluşturacağız.
- Kullanıcının adını girme yeteneği.
- Kullanıcının ikamet ettiği şehri seçme seçeneği
- Kullanıcının cinsiyet için bir seçenek girebilmesi.
- 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,
- Solution Explorer'da 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, kullanıcıya formda bir metin veya mesaj göstermek için kullanılır. Etiket denetimi normalde diğer denetimlerle birlikte kullanılır. Yaygın örneklerden biri, metin kutusu denetimiyle birlikte bir etiketin eklenmesidir. Etiket, kullanıcıya metin kutusunun neyle doldurulması gerektiği konusunda bir gösterge verir. Aşağıda gösterilen bir örnekle bunu nasıl uygulayabileceğimizi görelim. 'name' adlı bir etiket kullanacağız. Bu, sonraki bölümde eklenecek olan metin kutusu denetimleriyle birlikte kullanılacaktır.
) 1 Adım İlk adım, aşağıda gösterildiği gibi araç kutusundan 'label' denetimini Web Form'a sürüklemektir.
) 2 Adım Etiket eklendikten sonra aşağıdaki adımları izleyin.
- Etiket kontrolüne sağ tıklayarak özellikler penceresine gidin
- Özellikler menü seçeneğini seçin
) 3 Adım Özellikler penceresinden Metin özelliğinin adını 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ğıda gösterildiği gibi araç kutusundan metin kutusu denetimini Web Formuna sürüklemektir
Aşağıda, Textbox denetimi form üzerinde olduğunda bunun form tasarımcısında nasıl görüneceği gösterilmektedir
) 2 Adım Textbox eklendikten sonra ID özelliğini değiştirmeniz gerekiyor.
- Textbox denetimine sağ tıklayarak özellikler penceresine gidin ve
- Daha sonra özellikleri seçin
- Textbox'ın 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ğıda 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ü belirecektir. 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.
- Bir liste öğesi eklemek için Ekle düğmesine tıklayın.
- Liste öğesinin metin değerine bir ad verin – Bizim durumumuzda Mumbai. Mangalore ve Haydarabad için liste öğeleri eklemek üzere 1. ve 2. adımları tekrarlayın.
- OK düğmesine tıklayın
) 4 Adım Özellikler penceresine gidin ve kontrolün ID özellik değerini şu şekilde değiştirin: lstKonum.
Yukarıdaki değişiklikleri yaptıktan sonra aşağıdaki çıktıyı göreceksiniz
Çıktı:-
Çıktıdan Listbox'ların forma eklendiğini açıkça görebilirsiniz.
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' denetimini Web Formuna sürüklemektir. (aşağıdaki resme bakın). 2 tane radyo düğmesi eklediğinizden emin olun, biri 'Erkek' seçeneği için, diğeri 'Kadın' için.
) 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.
- 'Kadın' olarak değiştirmek için aynı adımı tekrarlayın.
- 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 radyo düğmesinin forma eklendiğini açıkça görebilirsiniz.
Onay Kutusu
Bir onay kutusu, kullanıcının birden fazla seçeneği seçebileceği bir seçenek listesi sağlamak için kullanılır. Aşağıda gösterilen bir ö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ğine dair bir seçenek sunacaktır. C# veya ASP.Net.
) 1 Adım İlk adım, aşağıda 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 'chkASP' olarak 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.
- Onay kutusunun kimlik özelliğini 'chkASP' olarak değiştirin
- 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, Checkbox'ların forma eklendiğini açıkça görebilirsiniz.
düğme
Kullanıcının daha sonra formun işlenmesini başlatacak bir düğmeye tıklamasına izin vermek için bir düğme kullanılır. Aşağıda gösterildiği gibi mevcut örneğimizle bunu nasıl uygulayabileceğimizi görelim. 'Gönder' butonu adında basit bir buton ekleyeceğiz. Bu, formdaki tüm bilgilerin gönderilmesi için kullanılacaktır.
) 1 Adım İlk adım, düğme denetimini aşağıda gösterildiği gibi 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.
btnSubmit_Click olayı, web form tasarımcısında butona çift tıkladığınızda Visual Studio tarafından otomatik olarak eklenir.
) 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;
}
Kod Açıklaması:-
- Yukarıdaki kod satırı en basit şeyi yapar. Name metin kutusu denetiminin değerini alır ve Response nesnesi aracılığıyla istemciye gönderir. Yani name metin kutusuna “Guru99” dizesini girmek istiyorsanız, txtName değeri. Bir metin 'Guru99' olurdu.
- Kodun bir sonraki satırı, 'lstLocation.SelectedItem.text' özelliği aracılığıyla liste kutusunun seçili değerini alır. Daha sonra bu değeri Response.Write yöntemi aracılığıyla istemciye geri yazar.
- Son olarak form üzerindeki tüm kontrolleri görünmez hale getiriyoruz. Bunu yapmazsak tüm kontroller artı yanıt değerlerimiz birlikte görüntülenecektir. Normalde bir kişi forma Ad, konum, Cinsiyet vb. tüm bilgileri girdiğinde kullanıcıya bir sonraki sayfa gösterilir. yalnızca girilmemiş bilgilere sahip olmalıdır. Kullanıcı Ad, Cinsiyet, Konum kontrollerini tekrar görmek istemez. Ancak ASP.Net bunu bilmiyor ve dolayısıyla kullanıcı Gönder düğmesini tıklattığında varsayılan olarak tüm kontrolleri yeniden gösterecektir. Bu nedenle, kullanıcının yalnızca istenen çıktıyı görebilmesi için tüm kontrollerin gizlendiğinden emin olmak için kod yazmamız gerekir.
Yukarıdaki değişiklikleri yaptığınızda aşağıdaki çıktıyı göreceksiniz
Çıktı:-
Çıktı ekranında aşağıdaki adımları uygulayın
- İsim metin kutusuna Guru99 adını verin
- Bangalore liste kutusundan bir konum seçin
- Gönder düğmesine tıklayın
Bunu yaptığınızda, 'Guru99'u göreceksiniz ve sayfada 'Bangalore' konumu görüntülenecektir.
ÖZET
- In ASP.Net, etiketler, metin kutuları, liste kutuları vb. gibi standart kontrolleri bir forma ekleyebilirsiniz.
- Her kontrolün kendisiyle ilişkilendirilmiş bir olayı olabilir. En yaygın olay, düğme tıklama olayıdır. Bu, bilgilerin web sunucusuna gönderilmesi gerektiğinde kullanılır.
