DataList’in Düzenleme Arabirimine Doğrulama Denetimleri Ekleme (C#)

Makale
07/13/2023

Bu öğreticide, daha kusursuz bir düzenleme kullanıcı arabirimi sağlamak için DataList'in EditItemTemplate'sine doğrulama denetimleri eklemenin ne kadar kolay olduğunu göreceğiz.

Giriş

DataList düzenleme öğreticilerinde şu ana kadar datalists düzenleme arabirimleri, eksik ürün adı veya negatif fiyat gibi geçersiz kullanıcı girişi bir özel durumla sonuçlanmasına rağmen proaktif kullanıcı girişi doğrulaması eklemedi. Önceki öğreticide, oluşturulan özel durumlar hakkındaki bilgileri yakalamak ve düzgün bir şekilde görüntülemek için DataList'in UpdateCommand olay işleyicisine özel durum işleme kodunun nasıl ekleneceğini inceledik. Ancak ideal olarak, düzenleme arabirimi kullanıcının bu tür geçersiz verileri girmesini ilk etapta engellemek için doğrulama denetimleri içerir.

Bu öğreticide, daha kusursuz bir düzenleme kullanıcı arabirimi sağlamak için DataList'lere EditItemTemplate doğrulama denetimleri eklemenin ne kadar kolay olduğunu göreceğiz. Özellikle, bu öğretici önceki öğreticide oluşturulan örneği alır ve düzenleme arabirimini uygun doğrulamayı içerecek şekilde genişleter.

1. Adım:Örneği BLL ve DAL-Level Özel Durumlarını İşlemeden Çoğaltma

BLL- ve DAL-Level Özel Durumlarını İşleme öğreticisinde, iki sütunlu, düzenlenebilir bir DataList'te ürünlerin adlarını ve fiyatlarını listeleyen bir sayfa oluşturduk. Bu öğreticinin amacı DataList'in düzenleme arabirimini doğrulama denetimlerini içerecek şekilde artırmaktır. Özellikle doğrulama mantığımız şunları yapacaktır:

Ürün adının sağlanmasını gerektir
Fiyat için girilen değerin geçerli bir para birimi biçimi olduğundan emin olun
Negatif UnitPrice bir değer geçersiz olduğundan fiyat için girilen değerin sıfırdan büyük veya sıfıra eşit olduğundan emin olun

Önceki örneği doğrulamayı içerecek şekilde artırmaya göz atabilmek için önce örneği klasördeki EditDeleteDataList sayfadan ErrorHandling.aspx bu öğreticinin UIValidation.aspxsayfasına çoğaltmamız gerekir. Bunu başarmak için hem sayfanın bildirim temelli işaretlemesinin hem de kaynak kodunun ErrorHandling.aspx üzerine kopyalamamız gerekir. Aşağıdaki adımları gerçekleştirerek bildirim temelli işaretlemenin üzerine ilk olarak kopyalayın:

Visual Studio'da sayfayı ErrorHandling.aspx açma
Sayfanın bildirim temelli işaretlemesine gidin (sayfanın altındaki Kaynak düğmesine tıklayın)
Şekil 1'de gösterildiği gibi ve </asp:Content> etiketlerinin <asp:Content> içindeki metni (satır 3 ile 32 arasında) kopyalayın.

Şekil 1: Denetimdeki <asp:Content> Metni Kopyalama (tam boyutlu resmi görüntülemek için tıklayın)

Sayfayı UIValidation.aspx açma
Sayfanın bildirim temelli işaretlemesine gitme
Denetimin içindeki metni yapıştırın <asp:Content> .

Kaynak kodun üzerine kopyalamak için sayfayı ErrorHandling.aspx.vb açın ve yalnızca sınıfın EditDeleteDataList_ErrorHandlingiçindeki metni kopyalayın. yöntemiyle DisplayExceptionDetails birlikte üç olay işleyicisini (Products_EditCommand, Products_CancelCommandve Products_UpdateCommand) kopyalayın, ancak sınıf bildirimini veya using deyimlerini kopyalamayın. Kopyalanan metni içindeki sınıfının UIValidation.aspx.vbiçineEditDeleteDataList_UIValidation yapıştırın.

uygulamasından öğesine içerik ve kod ErrorHandling.aspxUIValidation.aspxüzerinden geçtikten sonra, tarayıcıdaki sayfaları test etmek için biraz zaman ayırın. Aynı çıkışı görmeniz ve bu iki sayfanın her birinde aynı işlevi görmeniz gerekir (bkz. Şekil 2).

Şekil 2: Sayfa İşlevselliği UIValidation.aspxErrorHandling.aspx Taklit Eder (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: Doğrulama Denetimlerini DataList'in EditItemTemplate'sine Ekleme

Veri girişi formları oluştururken, kullanıcıların gerekli alanları girmesi ve sağlanan tüm girişlerin yasal, düzgün biçimlendirilmiş değerler olması önemlidir. Kullanıcının girişlerinin geçerli olduğundan emin olmak için ASP.NET, tek bir giriş Web denetiminin değerini doğrulamak için tasarlanmış beş yerleşik doğrulama denetimi sağlar:

RequiredFieldValidator bir değerin sağlanmasını sağlar
CompareValidator bir değeri başka bir Web denetimi değerine veya sabit bir değere karşı doğrular veya değerin biçiminin belirtilen veri türü için yasal olmasını sağlar
RangeValidator değerin bir değer aralığı içinde olmasını sağlar
RegularExpressionValidator bir değeri normal ifadeye göre doğrular
CustomValidator , bir değeri özel, kullanıcı tanımlı bir yöntemle doğrular

Bu beş denetim hakkında daha fazla bilgi için Düzenleme ve Arabirim Ekleme öğreticisine Doğrulama Denetimleri Ekleme öğreticisine bakın veya ASP.NET Hızlı Başlangıç Öğreticileri'nin Doğrulama Denetimleri bölümüne bakın.

Öğreticimizde, ürün adı için bir değerin sağlandığından emin olmak için RequiredFieldValidator ve girilen fiyatın 0'dan büyük veya buna eşit bir değere sahip olduğundan ve geçerli bir para birimi biçiminde sunulduğundan emin olmak için bir CompareValidator kullanmanız gerekir.

Not

ASP.NET 1.x'te bu beş doğrulama denetimi olsa da, ASP.NET 2.0 bir dizi geliştirme eklemiştir. Ana ikisi Internet Explorer'a ek olarak tarayıcılar için istemci tarafı betik desteği ve sayfadaki doğrulama denetimlerini doğrulama gruplarına bölümleme özelliğidir. 2.0'daki yeni doğrulama denetimi özellikleri hakkında daha fazla bilgi için bkz. ASP.NET 2.0'da Doğrulama Denetimlerini Kesme.

DataList'in öğesine gerekli doğrulama denetimlerini ekleyerek başlayalım EditItemTemplate. Bu görev, DataList'in akıllı etiketinden Şablonları Düzenle bağlantısına tıklayarak veya bildirim temelli söz dizimi aracılığıyla Tasarım Aracı aracılığıyla gerçekleştirilebilir. Şimdi Tasarım görünümündeki Şablonları Düzenle seçeneğini kullanarak işlemde adım adım ilerleyelim. DataList'leri düzenlemeyi seçtikten sonra, Araç Kutusu'ndan EditItemTemplateşablon düzenleme arabirimine sürükleyip TextBox'ın arkasına ProductName yerleştirerek bir RequiredFieldValidator ekleyin.

Şekil 3: TextBox'a EditItemTemplate AfterProductName RequiredFieldValidator ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Tüm doğrulama denetimleri, tek bir ASP.NET Web denetiminin girişini doğrulayarak çalışır. Bu nedenle, yeni eklediğimiz RequiredFieldValidator'ın TextBox'a göre ProductName doğrulanması gerektiğini belirtmemiz gerekir; bu, doğrulama denetimi s ControlToValidate özelliğiniID uygun Web denetiminin (ProductNamebu örnekte) değerine ayarlayarak yapılır. Ardından, özelliği Olarak ayarlayın Ürünün adını sağlamanız gerekir ve Text özelliği * olarak ayarlayınErrorMessage. Text Özellik değeri (sağlanırsa), doğrulama başarısız olursa doğrulama denetimi tarafından görüntülenen metindir. ErrorMessage Gerekli olan özellik değeri ValidationSummary denetimi tarafından kullanılır; Text özellik değeri atlanırsa, ErrorMessage özellik değeri geçersiz girişte doğrulama denetimi tarafından görüntülenir.

RequiredFieldValidator'ın bu üç özelliğini ayarladıktan sonra ekranınız Şekil 4'e benzer görünmelidir.

Şekil 4: RequiredFieldValidator'ın ControlToValidate, ErrorMessageve Text Özelliklerini ayarlama (Tam boyutlu görüntüyü görüntülemek için tıklayın)

RequiredFieldValidator öğesine eklendiğinde EditItemTemplategeriye kalan tek şey ürünün fiyatı textBox için gerekli doğrulamayı eklemektir. UnitPrice bir kaydı düzenlerken isteğe bağlı olduğundan RequiredFieldValidator eklememiz gerekmez. Ancak, sağlanırsa değerinin para birimi olarak düzgün biçimlendirildiğinden UnitPriceve 0'dan büyük veya buna eşit olduğundan emin olmak için bir CompareValidator eklememiz gerekir.

içine CompareValidator EditItemTemplate ekleyin ve özelliğini olarak UnitPriceayarlayınControlToValidate. ErrorMessage Özelliği, fiyatın sıfırdan büyük veya buna eşit olması gerekir ve para birimi simgesini ve Text özelliğini * olarak içeremez. Değerin UnitPrice 0'dan büyük veya buna eşit olması gerektiğini belirtmek için CompareValidator s Operator özelliğiniGreaterThanEqualolarak ValueToCompare , özelliğini 0, Type özelliğiniCurrencyolarak ayarlayın.

Bu iki doğrulama denetimini ekledikten sonra DataList'in EditItemTemplate bildirim temelli söz dizimi aşağıdakine benzer olmalıdır:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

Bu değişiklikleri yaptıktan sonra sayfayı tarayıcıda açın. Bir ürünü düzenlerken adı atlamayı veya geçersiz bir fiyat değeri girmeyi denerseniz, metin kutusunun yanında bir yıldız işareti görünür. Şekil 5'te gösterildiği gibi, 19,95 TL gibi para birimi simgesini içeren bir fiyat değeri geçersiz kabul edilir. CompareValidator s CurrencyType , basamak ayırıcılarına (kültür ayarlarına bağlı olarak virgül veya nokta gibi) ve baştaki artı veya eksi işaretine izin verir, ancak para birimi simgesine izin vermez . Düzenleme arabirimi şu anda para birimi biçimini kullanarak işledikçe UnitPrice bu davranış kullanıcıları şaşırtabilir.

Şekil 5: Geçersiz Girişli Metin Kutularının Yanında Yıldız Işareti Görünüyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Doğrulama olduğu gibi çalışsa da, kayıt düzenlenirken kullanıcının para birimi simgesini el ile kaldırması gerekir ve bu kabul edilemez. Ayrıca, düzenleme arabiriminde geçersiz girişler varsa, tıkladığınızda Güncelleştir veya İptal düğmeleri geri göndermeyi çağırmaz. İdeal olarak İptal düğmesi, kullanıcı girişlerinin geçerliliğinden bağımsız olarak DataList'i düzenleme öncesi durumuna döndürür. Ayrıca, doğrulama denetimleri istemci tarafı mantığı tarayıcıları JavaScript'i desteklemeyen veya desteği devre dışı bırakılmış kullanıcılar tarafından atlandığından, DataList'in UpdateCommand olay işleyicisindeki ürün bilgilerini güncelleştirmeden önce sayfa verilerinin geçerli olduğundan emin olmamız gerekir.

EditItemTemplate'ın UnitPrice TextBox'ından Para Birimi Simgesini Kaldırma

CompareValidator'ı Currency``Typekullanırken, doğrulanan giriş herhangi bir para birimi simgesi içermemelidir. Bu tür simgelerin varlığı CompareValidator'ın girişi geçersiz olarak işaretlemesine neden olur. Ancak, düzenleme arabirimimiz şu anda TextBox'ta UnitPrice bir para birimi simgesi içeriyor, yani kullanıcının değişikliklerini kaydetmeden önce para birimi simgesini açıkça kaldırması gerekiyor. Bunu düzeltmek için üç seçeneğimiz vardır:

EditItemTemplateUnitPrice TextBox değerini para birimi olarak biçimlendirilmeyecek şekilde yapılandırın.
CompareValidator'ı kaldırıp düzgün biçimlendirilmiş para birimi değerini denetleen bir RegularExpressionValidator ile değiştirerek kullanıcının para birimi simgesi girmesine izin verin. Buradaki zorluk, bir para birimi değerini doğrulamaya ilişkin normal ifadenin CompareValidator kadar basit olmaması ve kültür ayarlarını dahil etmek istediğimizde kod yazmanız gerekmesidir.
Doğrulama denetimini tamamen kaldırın ve GridView RowUpdating olay işleyicisinde özel sunucu tarafı doğrulama mantığına güvenin.

Bu öğretici için 1. seçeneği kullanalım. Şu anda içindeki UnitPrice TextBox EditItemTemplateiçin veri bağlama ifadesi nedeniyle para birimi değeri olarak biçimlendirilmiştir: <%# Eval("UnitPrice", "{0:c}") %>. deyimini EvalEval("UnitPrice", "{0:n2}")olarak değiştirin. Bu, sonucu iki basamaklı duyarlıklı bir sayı olarak biçimlendirir. Bu doğrudan bildirim temelli söz dizimi aracılığıyla veya DataList'in EditItemTemplateiçindeki TextBox'tan UnitPrice DataBindings'i Düzenle bağlantısına tıklayarak yapılabilir.

Bu değişiklikle, düzenleme arabirimindeki biçimlendirilmiş fiyat grup ayırıcısı olarak virgül ve ondalık ayırıcı olarak nokta içerir, ancak para birimi simgesini bırakır.

Not

Düzenlenebilir arabirimden para birimi biçimini kaldırırken, para birimi simgesini TextBox'ın dışına metin olarak yerleştirmeyi yararlı buluyorum. Bu, kullanıcıya para birimi simgesini sağlaması gerekmediğine dair bir ipucu görevi görür.

İptal Düğmesini Düzeltme

Varsayılan olarak, doğrulama Web denetimleri istemci tarafında doğrulama gerçekleştirmek için JavaScript'i yayar. Bir Düğme, LinkButton veya ImageButton'a tıklandığında, geri gönderme gerçekleşmeden önce sayfadaki doğrulama denetimleri istemci tarafında denetleniyor. Geçersiz veri varsa geri gönderme iptal edilir. Ancak belirli Düğmeler için verilerin geçerliliği önemli olmayabilir; böyle bir durumda, geçersiz veriler nedeniyle geri göndermenin iptal edilmesi sorun oluşturur.

İptal düğmesi böyle bir örnektir. Bir kullanıcının ürün adını atlayarak geçersiz veriler girdiğinizi ve sonra da ürünü kaydetmek istemediğine karar verdikten sonra İptal düğmesine bastığını düşünün. Şu anda İptal düğmesi, sayfada ürün adının eksik olduğunu bildiren ve geri göndermeyi önleyen doğrulama denetimlerini tetikler. Kullanıcımızın düzenleme işlemini iptal etmek için TextBox'a metin ProductName yazması gerekiyor.

Neyse ki Button, LinkButton ve ImageButton düğmelerinin, Düğme'ye tıklamanın doğrulama mantığını başlatıp başlatmayacağını belirtebilen bir CausesValidation özelliği vardır (varsayılan olarak Trueolarak kullanılır). İptal Düğmesi özelliğini CausesValidation olarak Falseayarlayın.

Girişlerin UpdateCommand Olay İşleyicisinde Geçerli Olduğundan Emin Etme

Doğrulama denetimleri tarafından yayılan istemci tarafı betiği nedeniyle, kullanıcı geçersiz giriş girerse, doğrulama denetimleri Button, LinkButton veya ImageButton denetimleri tarafından başlatılan ve özellikleri True (varsayılan) olan CausesValidation geri göndermeleri iptal eder. Ancak, bir kullanıcı eski bir tarayıcıyla veya JavaScript desteği devre dışı bırakılmış bir tarayıcıyla ziyaret ederse, istemci tarafı doğrulama denetimleri yürütülmeyecektir.

Tüm ASP.NET doğrulama denetimleri, geri gönderme sonrasında doğrulama mantığını hemen yineler ve özelliği aracılığıyla Page.IsValidsayfa girişlerinin genel geçerliliğini bildirir. Ancak, sayfa akışı değerine bağlı olarak herhangi bir şekilde kesintiye uğramaz veya durdurulmaz Page.IsValid. Geliştiriciler olarak, geçerli giriş verilerini kabul eden koda geçmeden önce özelliğin True değerine sahip olduğundan emin olmak Page.IsValid bizim sorumluluğumuzdadır.

Bir kullanıcı JavaScript'i devre dışı bırakmışsa sayfamızı ziyaret eder, bir ürünü düzenler, Çok pahalı bir fiyat değeri girer ve Güncelleştir düğmesine tıklarsa istemci tarafı doğrulaması atlanır ve geri gönderme uygulanır. Geri göndermede, ASP.NET sayfasının UpdateCommand olay işleyicisi yürütülür ve bir için çok pahalı olan ayrıştırmaya çalışılırken bir Decimalözel durum oluşur. Özel durum işlememiz olduğundan, böyle bir özel durum düzgün bir şekilde işlenir, ancak yalnızca değerine Truesahipse Page.IsValid olay işleyicisine devam UpdateCommand ederek geçersiz verilerin ilk etapta kaymasını önleyebiliriz.

Aşağıdaki kodu, bloğun hemen önüne olay işleyicisinin UpdateCommand başlangıcına Try ekleyin:

if (!Page.IsValid)
    return;

Bu eklemeyle, ürün yalnızca gönderilen veriler geçerli olduğunda güncelleştirilmeye çalışılır. Doğrulama denetimleri istemci tarafı betikleri nedeniyle kullanıcıların çoğu geçersiz verileri geri gönderemez, ancak tarayıcıları JavaScript'i desteklemeyen veya JavaScript desteği devre dışı bırakılmış kullanıcılar istemci tarafı denetimlerini atlayabilir ve geçersiz veri gönderebilir.

Not

Astute okuyucu, GridView ile verileri güncelleştirirken sayfamızın arkadaki kod sınıfındaki özelliği açıkça denetlememize Page.IsValid gerek olmadığını hatırlayacaktır. Bunun nedeni GridView'un özelliğine Page.IsValid bizim için başvurması ve güncelleştirmeye yalnızca değerini döndürmesi durumunda devam ediyor olmasıdır True.

3. Adım: Veri Girişi Sorunlarını Özetleme

Beş doğrulama denetimine ek olarak, ASP.NET geçersiz veri algılayan doğrulama denetimlerinin s'lerini görüntüleyen ErrorMessageValidationSummary denetimini içerir. Bu özet verileri web sayfasında veya kalıcı, istemci tarafı ileti kutusu aracılığıyla metin olarak görüntülenebilir. Bu öğreticiyi, doğrulama sorunlarını özetleyen bir istemci tarafı ileti kutusu içerecek şekilde geliştirelim.

Bunu yapmak için, Araç Kutusundan bir ValidationSummary denetimini Tasarım Aracı sürükleyin. ValidationSummary denetiminin konumu önemli değildir, çünkü bunu yalnızca özeti ileti kutusu olarak görüntüleyecek şekilde yapılandıracağız. Denetimi ekledikten sonra, özelliğini olarakFalse, özelliğini Trueolarak ShowMessageBox ayarlayınShowSummary. Bu eklemeyle, tüm doğrulama hataları istemci tarafı ileti kutusunda özetlenir (bkz. Şekil 6).

Şekil 6: Doğrulama Hataları Client-Side İleti Kutusunda Özetlenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

Bu öğreticide, güncelleştirme iş akışında kullanmaya çalışmadan önce kullanıcı girişlerimizin geçerli olduğundan proaktif olarak emin olmak için doğrulama denetimlerini kullanarak özel durum olasılığının nasıl azaltıldığını gördük. ASP.NET, belirli bir Web denetiminin girişini incelemek ve girişin geçerliliğini yeniden raporlamak için tasarlanmış beş doğrulama Web denetimi sağlar. Bu öğreticide, ürünün adının sağlandığından ve fiyatın sıfırdan büyük veya sıfıra eşit bir değere sahip bir para birimi biçimine sahip olduğundan emin olmak için RequiredFieldValidator ve CompareValidator denetimlerinden ikisini kullandık.

DataList'in düzenleme arabirimine doğrulama denetimleri eklemek, bunları Araç Kutusu'ndan öğesine EditItemTemplate sürükleyip birkaç özellik ayarlamak kadar kolaydır. Varsayılan olarak, doğrulama denetimleri istemci tarafı doğrulama betiğini otomatik olarak yayar; ayrıca geri göndermede sunucu tarafı doğrulama sağlar ve kümülatif sonucu özelliğinde Page.IsValid depolar. Bir Button, LinkButton veya ImageButton tıklandığında istemci tarafı doğrulamasını atlamak için düğmenin CausesValidation özelliğini olarak Falseayarlayın. Ayrıca, geri göndermede gönderilen verilerle herhangi bir görevi gerçekleştirmeden önce özelliğinin döndürdüğünden Page.IsValidTrueemin olun.

Şimdiye kadar incelediğimiz tüm DataList düzenleme öğreticileri, ürün adı için bir TextBox ve fiyat için başka bir metin kutusu çok basit düzenleme arabirimlerine sahipti. Ancak düzenleme arabirimi DropDownLists, Calendars, RadioButtons, CheckBoxes gibi farklı Web denetimlerinin bir karışımını içerebilir. Sonraki öğreticimizde çeşitli Web denetimleri kullanan bir arabirim oluşturmayı inceleyeceğiz.

Mutlu Programlama!

Yazar hakkında

Yedi ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışmaktadır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Adresine adresinden veya adresinden ulaşabileceğiniz http://ScottOnWriting.NETblogu aracılığıyla ulaşabilirsinizmitchell@4GuysFromRolla.com.

Özel Teşekkürler

Bu öğretici serisi birçok yararlı gözden geçiren tarafından gözden geçirildi. Bu öğreticinin baş gözden geçirenleri Dennis Patterson, Ken Pespisa ve Liz Shulok oldu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana adresinden bir satır mitchell@4GuysFromRolla.combırakın.

Önceki Sonraki