HTMLTextBox
Kullanıcının biçimlendirilmiş metin girebileceği nesnedir. Üstündeki araç çubuğu ile kalın, italik, renk, liste, bağlantı, tablo gibi biçimlendirmeler yapılır ve değer HTML olarak saklanır.
Değer tipi: string (HTML içeriği)
Ne zaman kullanılır?
Düz metnin yetmediği, kullanıcının metni biçimlendirmesi gereken alanlar için idealdir: açıklama notu, duyuru gövdesi, e-posta taslağı, zengin içerikli yorum. Tek satırlık düz metin için TextBox, biçimsiz çok satırlı metin için TextArea daha uygundur.
Tasarımcı özellikleri
Bir HTMLTextBox seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.
General
| Özellik | Açıklama |
|---|---|
Name | Nesnenin koddaki adı (ör. HTMLTextBox1). Koddan bu adla erişirsiniz. |
Field Name | Veritabanındaki alanın adı. |
Behavior
| Özellik | Açıklama |
|---|---|
ReadOnly | Alanı salt okunur yapar; kullanıcı içeriği değiştiremez. |
Required | Alanı zorunlu yapar; boşsa form kaydedilmez. |
MaxLength | En fazla kaç karakter girilebileceğini sınırlar. |
CharCounterMax | Karakter sayacının üst sınırını belirler; bu değere yaklaşıldığında sayaç uyarır. |
Height | Editörün yüksekliği (piksel). |
ToolbarType | Araç çubuğunun tipini belirler (hangi biçimlendirme düğmelerinin görüneceği). |
ToolbarBottom | Araç çubuğunu üst yerine alta yerleştirir. |
Tab Index | Tab tuşuyla geçiş sırasını belirler. |
Is Secret Data | Değeri hassas veri sayar; loglarda gizlenir. |
DefaultValue | Nesnenin başlangıç değeri. |
MultiLanguage Text | Çok dilli metin değerini tutar. |
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ı. |
Text Align | Yazının hizası (sola / ortaya / sağa). |
Enable MultiLanguage Text | Çok dilli değer girişini açar. |
Show Character Counter | Karakter sayacını gösterir. |
Title | Nesnenin üzerine gelince çıkan başlık (tooltip). |
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. HTMLTextBox'ı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. |
OnValidating | Form kaydedilirken alan doğrulanırken. |
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 HTMLTextBox'a üç yerden erişebilirsiniz. Değer her zaman HTML metnidir. 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 icerik = HTMLTextBox1.Value.ToString();
// Yaz (HTML olarak)
HTMLTextBox1.Value = "<b>Önemli:</b> Lütfen formu kontrol ediniz.";
HTMLTextBox1.Text = "<b>Önemli:</b> Lütfen formu kontrol ediniz.";
Akış (Flow) kodu (C#, sunucu)
Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:
// Oku
string icerik = Document1.Controls["HTMLTextBox1"].Value.ToString();
// Yaz
Document1.Controls["HTMLTextBox1"].Value = "<p>Talebiniz onaylandı.</p>";
Document1.Controls["HTMLTextBox1"].Text = "<p>Talebiniz onaylandı.</p>";
İ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.HTMLTextBox1.value = "<b>Merhaba</b>";
this.HTMLTextBox1.text = "<b>Merhaba</b>";
.Value saklanan HTML değeridir, .Text ekranda görünen metindir. HTMLTextBox için ikisi de HTML string'idir; yazarken biçimlendirmeyi etiketlerle (<b>, <p>, <ul> gibi) eklersiniz. Düz metin yazarsanız da çalışır.
Örnek: boş içerik kontrolü (OnValueChanging)
OnValueChanging değer değişmeden hemen önce çalışır; istemediğiniz bir değeri burada iptal edebilirsiniz. Aşağıdaki örnekte sadece boşluk içeren (gerçek metni olmayan) bir giriş engellenir.
İstemci (TypeScript):
async HTMLTextBox1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<string>) {
// HTML etiketlerini ayıklayıp gerçek metni kontrol et
const duzMetin = (args.newValue ?? "").replace(/<[^>]*>/g, "").trim();
if (duzMetin == "") {
args.cancel = true; // Boş içeriği engeller
this.showMessage("Uyarı", "Açıklama boş bırakılamaz.", "Validation");
}
}
Sunucu (C#):
void HTMLTextBox1_OnValueChanging(object sender, PropertyChangingEventArgs<string> e)
{
string duzMetin = System.Text.RegularExpressions.Regex.Replace(
e.NewValue ?? "", "<[^>]*>", "").Trim();
if (duzMetin == "")
{
e.Cancel = true;
ShowMessage("Uyarı", "Açıklama boş bırakılamaz.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}
İpuçları
- Değer HTML içerdiği için başka bir yerde göstereceğinizde (rapor, e-posta gövdesi) HTML olarak işleyin; düz metin gibi basarsanız etiketler görünür.
- Gerçek metin uzunluğunu kontrol ederken HTML etiketlerini ayıkladıktan sonra ölçün; aksi halde
<p></p>gibi etiketler de uzunluğa dahil olur. - Sadece kalın/italik gibi temel biçimler isteniyorsa
ToolbarTypeile sadeleştirilmiş bir araç çubuğu seçin; kullanıcıyı gereksiz düğmelerle yormayın. - Biçimlendirmeye hiç ihtiyaç yoksa HTMLTextBox yerine TextArea kullanın; daha hafif ve hızlıdır.
Tüm tasarımcı özellikleri (tam liste)
General: Name, Field Name
Behavior: ReadOnly, Required, MaxLength, CharCounterMax, Height, ToolbarType, ToolbarBottom, Tab Index, Is Secret Data, DefaultValue, MultiLanguage Text
Appearance: Visible, Client Visible, Enabled, Client Enabled, Placeholder, Text Align, Enable MultiLanguage Text, Show Character Counter, Title, Text, Value
Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnPropertyChanging, OnPropertyChanged, OnClick, OnDoubleClick, OnDataLoad, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged
Olaylar (Server): OnInit, OnLoad, OnRender, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating, OnMultiLanguageTextChanging, OnMultiLanguageTextChanged