TextBox
Kullanıcının alfanumerik veri girişi yapabileceği nesnedir. Ad, açıklama, başlık ya da kısa kod gibi tek satırlık alanlar için kullanılır.
Ne zaman kullanılır?
Kısa ve tek satırlık metinler için idealdir: ad soyad, başlık, açıklama, kod. Daha uzun metinlerde TextArea, belirli bir biçim gereken alanlarda MaskInput, şifre alanlarında Password daha uygundur.
Tasarımcı özellikleri
Bir TextBox seçildiğinde Özellik Görüntüleyici beş sekmeye ayrılır.
General
| Özellik | Açıklama |
|---|---|
Name | Nesnenin koddaki adı (ör. TextBox1). Koddan bu adla erişirsiniz. |
Field Name | Veritabanındaki alanın adı. |
Size | Alanın veritabanındaki uzunluğu. Varsayılan 50. |
Label
Nesnenin yanındaki etiketi yönetir.
| Özellik | Açıklama |
|---|---|
Caption / Text | Etiketin yazısı (çok dilli olabilir). |
Position | Etiketin yeri: solda (Left) veya üstte (Top). |
Width / Height | Etiketin boyutu. |
Font | Yazı tipi, kalın / italik / altı çizili. |
Show Colon | Etiketin sonuna iki nokta (:) ekler. |
Horizontal Align / Vertical Align | Etiketin hizası. |
Visible | Etiketi gösterir veya gizler. |
Behavior
| Özellik | Açıklama |
|---|---|
ReadOnly | Alanı salt okunur yapar. |
Client ReadOnly | Sadece tarayıcı tarafında salt okunur yapar. |
Required | Alanı zorunlu yapar; boşsa form kaydedilmez. |
MaxLength | En fazla kaç karakter girilebileceğini sınırlar. |
Tab Index | Tab tuşuyla geçiş sırasını belirler. |
Is Secret Data | Değeri hassas veri sayar; loglarda gizlenir. |
Appearance
| Özellik | Açıklama |
|---|---|
Visible / Client Visible | Nesnenin görünürlüğü. |
Enabled / Client Enabled | Nesnenin aktif olup olmadığı. |
Placeholder | Alan boşken görünen soluk ipucu yazısı. |
Background Color | Arka plan rengi. |
Text Align | Yazının hizası. |
Enable MultiLanguage Text | Çok dilli değer girişini açar. |
Show Character Counter | Karakter sayacını gösterir. |
Size Type | Genişlik davranışı (sabit / esnek). |
Olaylar
Bir nesne açılırken olaylar belirli bir sırayla tetiklenir; kullanıcı alana dokununca da ayrı olaylar çalışır. Doğru kodu doğru olaya yazmak için bu sırayı bilmek işinizi kolaylaştırır.
Açılış sırası: OnInit → OnLoad → OnDataLoad → OnPreRender → OnRender
Kullanıcı yazarken: OnTextChanging → OnTextChanged, alandan çıkınca OnValueChanging → OnValueChanged
Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda. TextBox'ın iki tarafta sunduğu olaylar farklıdır.
Sunucu olayları (Server)
| Olay | Ne zaman çalışır |
|---|---|
OnInit | Form açılırken nesne oluşturulduğunda, en başta. |
OnLoad | OnInit'in hemen ardından, nesne yüklenince. |
OnRender | Nesne ekrana çizilirken. |
OnTextChanging | Kullanıcı yazarken, metin değişmeden hemen önce. |
OnTextChanged | Metin değiştikten hemen sonra. |
OnValueChanging | Değer değişmeden hemen önce (iptal edilebilir). |
OnValueChanged | Kullanıcı alandan çıkıp değer kesinleştiğinde. En sık kullanılan olaydır. |
OnMultiLanguageTextChanging / OnMultiLanguageTextChanged | Çok dilli metin değişmeden önce / sonra. |
İstemci olayları (Client)
Sunucudaki olaylara ek olarak tarayıcı tarafında şunlar da vardır:
| Olay | Ne zaman çalışır |
|---|---|
OnDataLoad | Nesnenin verisi yüklendiğinde. |
OnPreRender | Nesne ekrana çizilmeden hemen önce. |
OnClick / OnDoubleClick | Nesneye tıklanınca / çift tıklanınca. |
OnPropertyChanging / OnPropertyChanged | Bir özellik kodla değiştirilmeden önce / sonra. |
OnValueChanging / OnTextChanging olaylarının parametresi (args TS, e C#) şunları taşır:
newValue/NewValue— girilmek istenen yeni değeroldValue/OldValue— önceki değercancel/Cancel—trueyapılırsa değişiklik iptal edilir (yalnızcaChangingolaylarında)
Changed olaylarında cancel yoktur (değişiklik artık gerçekleşmiştir).
Kod örnekleri
Bir TextBox'a üç yerden erişebilirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.
Form kodu (C#, sunucu)
Form kodunda nesneye doğrudan adıyla erişirsiniz:
// Oku
string ad = TextBox1.Value.ToString();
// Yaz
TextBox1.Value = "Ahmet Yılmaz";
TextBox1.Text = "Ahmet Yılmaz";
Akış (Flow) kodu (C#, sunucu)
Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:
// Oku
string ad = Document1.Controls["TextBox1"].Value.ToString();
// Yaz
Document1.Controls["TextBox1"].Value = "Ahmet Yılmaz";
Document1.Controls["TextBox1"].Text = "Ahmet Yılmaz";
İstemci kodu (TypeScript, tarayıcı)
İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır (value, text):
this.TextBox1.value = "";
this.TextBox1.text = "";
.Value saklanan değerdir, .Text ekranda görünen metindir. TextBox için ikisi de string'tir; yazarken ikisini de aynı yazıyla set etmeye özen gösterin.
Örnek: değeri doğrulama (OnValueChanging)
OnValueChanging değer değişmeden hemen önce çalışır; istemediğiniz bir değeri burada iptal edebilirsiniz. Aşağıdaki örnekte "Kırmızı" girilmesi engellenir.
İstemci (TypeScript):
async TextBox1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<string>) {
if (args.newValue == "Kırmızı") {
args.cancel = true; // Yazı değişimini iptal eder
this.showMessage("Uyarı", "Sadece Sarı yazılabilir.", "Validation");
args.newValue = ""; // İptal edilen değeri boşaltır
}
}
Sunucu (C#):
void TextBox1_OnValueChanging(object sender, PropertyChangingEventArgs<string> e)
{
if (e.NewValue == "Kırmızı")
{
e.Cancel = true;
ShowMessage("Uyarı", "Sadece Sarı değeri girilebilir.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}
İpuçları
- Nesnenin
Requiredözelliğini kullanarak kod ile boş/dolu kontrolü yapmanıza gerek kalmaz. - Telefon ya da TC kimlik gibi belirli bir biçim isteyen alanlarda TextBox yerine MaskInput kullanın.
Tüm tasarımcı özellikleri (tam liste)
General: Name, Field Name, Size
Label: Caption, Text, Position, Left, Width, Height, Font (Bold / Italic / Underline), Ellipsis, Visible, Show Colon, Horizontal Align, Vertical Align, Mark Char, Mark Position
Behavior: ReadOnly, Client ReadOnly, Tab Index, Required, MaxLength, Is Secret Data
Appearance: Visible, Client Visible, Enabled, Client Enabled, Background Color, Title, ClassName, Placeholder, Text Align, Enable MultiLanguage Text, Text, Show Character Counter, Size Type
Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnPropertyChanging, OnPropertyChanged, OnClick, OnDoubleClick, OnDataLoad, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged
Olaylar (Server): OnInit, OnLoad, OnRender, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged