Silerken İstemci Tarafı Doğrulama Ekleme (VB)

  • Makale

tarafından Scott Mitchell

PDF’yi İndir

Şu ana kadar oluşturduğumuz arabirimlerde, kullanıcı Düzenle düğmesine tıklamayı amaçladığında Sil düğmesine tıklayarak verileri yanlışlıkla silebilir. Bu öğreticide, Sil düğmesine tıklandığında görüntülenen bir istemci tarafı onay iletişim kutusu ekleyeceğiz.

Giriş

Son birkaç öğreticide ekleme, düzenleme ve silme özellikleri sağlamak için uygulama mimarimizi, ObjectDataSource'u ve veri Web denetimlerini nasıl kullanacağımızı gördük. Şimdiye kadar incelediğimiz silme arabirimleri, tıklandığında geri göndermeye neden olan ve ObjectDataSource Delete() yöntemini çağıran bir Sil düğmesinden oluşuyordu. Yöntemi Delete() daha sonra İş Mantığı Katmanı'ndan yapılandırılan yöntemi çağırır ve bu da çağrıyı Veri Erişim Katmanı'na yayarak veritabanına gerçek DELETE deyimini sağlar.

Bu kullanıcı arabirimi ziyaretçilerin GridView, DetailsView veya FormView denetimleri aracılığıyla kayıtları silmesini sağlarken, kullanıcı Sil düğmesine tıkladığında herhangi bir onay yokluğu vardır. Bir kullanıcı Düzenle'ye tıklamak istediğinizde yanlışlıkla Sil düğmesine tıklarsa, güncelleştirmek istediği kayıt silinir. Bunu önlemeye yardımcı olmak için, bu öğreticide Sil düğmesine tıklandığında görüntülenen bir istemci tarafı onay iletişim kutusu ekleyeceğiz.

JavaScript confirm(string) işlevi, dize giriş parametresini, tamam ve iptal olmak üzere iki düğmeyle birlikte gelen kalıcı bir iletişim kutusunun içindeki metin olarak görüntüler (bkz. Şekil 1). İşlev, confirm(string) tıklanan düğmeye bağlı olarak bir Boole değeri döndürür (truekullanıcı Tamam'a tıklarsa ve false İptal'e tıklarsa).

JavaScript confirm(string) Yöntemi Bir Kalıcı, Client-Side İleti Kutusu Görüntüler

Şekil 1: JavaScript confirm(string) Yöntemi Bir Kalıcı, Client-Side İleti Kutusu Görüntüler

Form gönderimi sırasında, değeri istemci tarafı olay işleyicisinden döndürülürse false , form gönderimi iptal edilir. Bu özelliği kullanarak Sil düğmesinin istemci tarafı onclick olay işleyicisinin çağrısının değerini döndürmesini confirm("Are you sure you want to delete this product?")sağlayabiliriz. Kullanıcı İptal'e confirm(string) tıklarsa false döndürür ve böylece form gönderiminin iptal edilmesine neden olur. Geri gönderme olmadan, Sil düğmesine tıklanan ürün silinmez. Ancak, kullanıcı onay iletişim kutusunda Tamam'a tıklarsa geri gönderme işlemi devam eder ve ürün silinir. Bu teknik hakkında daha fazla bilgi için Form Gönderimini Denetlemek için JavaScript confirm() Yöntemini Kullanma konusuna bakın.

Şablon kullanıldığında, gerekli istemci tarafı betiğini eklemek, CommandField kullanmaya göre biraz farklılık gösterir. Bu nedenle, bu öğreticide hem FormView hem de GridView örneğine bakacağız.

Not

Bu öğreticide ele alınanlar gibi istemci tarafı onay tekniklerini kullanmak, kullanıcılarınızın JavaScript'i destekleyen tarayıcılarla ziyaret ettiğini ve JavaScript'in etkinleştirildiğini varsayar. Bu varsayımlardan herhangi biri belirli bir kullanıcı için doğru değilse, Sil düğmesine tıklandığında hemen geri göndermeye neden olur (onay ileti kutusu görüntülenmez).

1. Adım: Silmeyi Destekleyen Bir FormView Oluşturma

Başlangıç olarak klasördeki ConfirmationOnDelete.aspxEditInsertDelete sayfaya bir FormView ekleyin ve sınıf yöntemi aracılığıyla ProductsBLL ürün bilgilerini geri çeken yeni bir ObjectDataSource'a GetProducts() bağlayın. Ayrıca ObjectDataSource'un ProductsBLL sınıf DeleteProduct(productID) yöntemini ObjectDataSource Delete() yöntemiyle eşlenmesi için yapılandırın; INSERT ve UPDATE sekmeleri açılan listelerinin (Yok) olarak ayarlandığından emin olun. Son olarak, FormView'un akıllı etiketinde Disk Belleğini Etkinleştir onay kutusunu işaretleyin.

Bu adımlardan sonra, yeni ObjectDataSource bildirim temelli işaretlemesi aşağıdaki gibi görünecektir:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    DeleteMethod="DeleteProduct" OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
    <DeleteParameters>
        <asp:Parameter Name="productID" Type="Int32" />
    </DeleteParameters>
</asp:ObjectDataSource>

İyimser eşzamanlılığı kullanmayan geçmiş örneklerimizde olduğu gibi, ObjectDataSource OldValuesParameterFormatString özelliğini temizlemek için biraz zaman ayırın.

Yalnızca silmeyi destekleyen bir ObjectDataSource denetimine bağlı olduğundan, FormView'lar ItemTemplate yalnızca Sil düğmesini sunar ve Yeni ve Güncelleştir düğmelerini kullanmaz. Ancak FormView'un bildirim temelli işaretlemesi, kaldırılabilir bir gereksiz EditItemTemplate ve InsertItemTemplateiçerir. öğesini özelleştirerek ItemTemplate ürün veri alanlarının yalnızca bir alt kümesini göstermesine dikkat edin. Kendi ürün adını tedarikçi ve kategori adlarının üzerindeki bir <h3> başlıkta (Sil düğmesiyle birlikte) gösterecek şekilde yapılandırdım.

<asp:FormView ID="FormView1" AllowPaging="True" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" runat="server">
    <ItemTemplate>
        <h3><i><%# Eval("ProductName") %></i></h3>
        <b>Category:</b>
        <asp:Label ID="CategoryNameLabel" runat="server"
            Text='<%# Eval("CategoryName") %>'>
        </asp:Label><br />
        <b>Supplier:</b>
        <asp:Label ID="SupplierNameLabel" runat="server"
            Text='<%# Eval("SupplierName") %>'>
        </asp:Label><br />
        <asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
            CommandName="Delete" Text="Delete">
        </asp:LinkButton>
    </ItemTemplate>
</asp:FormView>

Bu değişikliklerle, bir kullanıcının ürünler arasında teker teker geçiş yapmasını sağlayan, sil düğmesine tıklayarak bir ürünü silebilen tam işlevsel bir web sayfamız var. Şekil 2'de, tarayıcı üzerinden görüntülendiğinde ilerleme durumumuzun ekran görüntüsü gösterilmektedir.

FormView tek bir ürünle ilgili bilgileri gösterir

Şekil 2: FormView Tek Bir Ürün Hakkındaki Bilgileri Gösterir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: Düğme Sil Client-Side Tıklama Olayı'ndan confirm(string) İşlevini Çağırma

FormView oluşturulduktan sonra, son adım Delete düğmesini ziyaretçi tarafından tıklandığında JavaScript confirm(string) işlevi çağrılacak şekilde yapılandırmaktır. Bir Button, LinkButton veya ImageButton istemci tarafı olayına istemci tarafı onclick betiği ekleme işlemi, ASP.NET 2.0'da yeni olan uygulamasının OnClientClick propertykullanımıyla gerçekleştirilebilir. İşlevin değerinin confirm(string) döndürülmesini istediğimiz için bu özelliği şu şekilde ayarlamanız yeterlidir: return confirm('Are you certain that you want to delete this product?');

Bu değişiklik sonrasında Delete LinkButton bildirim temelli söz dizimi şöyle görünmelidir:

<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False"
    CommandName="Delete" Text="Delete"
    OnClientClick="return confirm('Are you certain you want to delete this product?');">
</asp:LinkButton>

Hepsi bu kadar! Şekil 3'te bu onayın ekran görüntüsü gösterilmektedir. Sil düğmesine tıkladığınızda onayla iletişim kutusu açılır. Kullanıcı İptal'e tıklarsa geri gönderme iptal edilir ve ürün silinmez. Ancak kullanıcı Tamam'a tıklarsa, geri gönderme devam eder ve ObjectDataSource'un Delete() yöntemi çağrılır ve bu da silinen veritabanı kaydında dolaba neden olur.

Not

JavaScript işlevine confirm(string) geçirilen dize, tırnak işaretleri yerine kesme işaretleriyle sınırlandırılır. JavaScript'te dizeler iki karakterden biri kullanılarak sınırlandırılabilir. Burada kesme işaretleri kullanırız, böylece içine geçirilen confirm(string) dizenin sınırlayıcıları özellik değeri için OnClientClick kullanılan sınırlayıcılarla bir belirsizlik oluşturmaz.

Sil Düğmesine Tıklandığında Artık Bir Onay Görüntüleniyor

Şekil 3: Sil Düğmesine Tıklandığında Artık Onay Görüntüleniyor (Tam boyutlu resmi görüntülemek için tıklayın)

3. Adım: CommandField'da Sil Düğmesi için OnClientClick Özelliğini Yapılandırma

Doğrudan bir şablonda Button, LinkButton veya ImageButton ile çalışırken, javascript confirm(string) işlevinin sonuçlarını döndürmek için özelliğini yapılandırarak OnClientClick onunla bir onay iletişim kutusu ilişkilendirilebilir. Ancak, Bir GridView veya DetailsView'a Sil düğmeleri alanı ekleyen CommandField' in bildirim temelli olarak ayarlanabilen bir OnClientClick özelliği yoktur. Bunun yerine, GridView veya DetailsView'ın uygun DataBound olay işleyicisindeki Sil düğmesine program aracılığıyla başvurmamız ve ardından özelliğini orada ayarlamamız OnClientClick gerekir.

Not

Delete düğmesinin OnClientClick özelliğini uygun DataBound olay işleyicisinde ayarlarken verilere erişimimiz geçerli kayda bağlıydı. Bu, onay iletisini belirli bir kayıtla ilgili ayrıntıları içerecek şekilde genişletebileceğimiz anlamına gelir; örneğin, "Chai ürününü silmek istediğinizden emin misiniz?" Bu tür özelleştirmeler, veri bağlama söz dizimi kullanılarak şablonlarda da mümkündür.

CommandField içindeki OnClientClick Sil düğmelerinin özelliğini ayarlama alıştırması yapmak için sayfaya gridview ekleyelim. Bu GridView'ı FormView'un kullandığı ObjectDataSource denetimini kullanacak şekilde yapılandırın. Ayrıca GridView BoundFields'ı yalnızca ürün adını, kategorisini ve tedarikçiyi içerecek şekilde sınırlayın. Son olarak GridView akıllı etiketinden Silmeyi Etkinleştir onay kutusunu işaretleyin. Bu işlem GridView Columns koleksiyonuna ShowDeleteButton özelliği olarak ayarlanmış truebir CommandField ekler.

Bu değişiklikleri yaptıktan sonra GridView'unuzun bildirim temelli işaretlemesi aşağıdaki gibi görünmelidir:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:CommandField ShowDeleteButton="True" />
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True"
            SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True"
            SortExpression="SupplierName" />
    </Columns>
</asp:GridView>

CommandField, GridView RowDataBound olay işleyicisinden program aracılığıyla erişilebilen tek bir Delete LinkButton örneği içerir. Başvuruldıktan sonra özelliğini buna göre ayarlayabiliriz OnClientClick . Aşağıdaki kodu kullanarak olay için RowDataBound bir olay işleyicisi oluşturun:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
    ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles GridView1.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        ' reference the Delete LinkButton
        Dim db As LinkButton = CType(e.Row.Cells(0).Controls(0), LinkButton)

        ' Get information about the product bound to the row
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)

        db.OnClientClick = String.Format( _
            "return confirm('Are you certain you want to delete the {0} product?');", _
            product.ProductName.Replace("'", "\'"))
    End If
End Sub

Bu olay işleyicisi veri satırlarıyla (Sil düğmesi olacak olanlar) çalışır ve Sil düğmesine program aracılığıyla başvurarak başlar. Genel olarak aşağıdaki deseni kullanın:

Dim obj As ButtonType = _
    CType(e.Row.Cells(commandFieldIndex).Controls(controlIndex), ButtonType)

ButtonType CommandField - Button, LinkButton veya ImageButton tarafından kullanılan düğme türüdür. Varsayılan olarak, CommandField LinkButtons kullanır, ancak bu KomutAlanı aracılığıyla ButtonType propertyözelleştirilebilir. commandFieldIndex, GridView koleksiyonundaki CommandField'in Columns sıralı dizinidir, controlIndex ise CommandField Controls koleksiyonundaki Delete düğmesinin dizinidir. controlIndex değeri, CommandField'deki diğer düğmelere göre düğmenin konumuna bağlıdır. Örneğin, CommandField'de görüntülenen tek düğme Sil düğmesiyse, 0 dizinini kullanın. Ancak, Sil düğmesinin önünde düzenle düğmesi varsa, 2 dizinini kullanın. 2 dizininin kullanılmasının nedeni, CommandField tarafından Sil düğmesinden önce iki denetim eklenmesidir: Düzenle düğmesi ve Düzenle ve Sil düğmeleri arasına biraz boşluk eklemek için kullanılan literalControl.

Özel örneğimizde, CommandField LinkButtons kullanır ve en soldaki alan olan commandFieldIndex değeri 0'dır. CommandField içindeki Sil düğmesinden başka düğme olmadığından 0 controlIndex kullanırız.

CommandField'deki Sil düğmesine başvurdıktan sonra, geçerli GridView satırına bağlı ürün hakkında bilgi alıyoruz. Son olarak Delete düğmesi s OnClientClick özelliğini ürün adını içeren uygun JavaScript olarak ayarlayacağız. İşleve geçirilen JavaScript dizesi kesme işaretleri kullanılarak sınırlandırıldığından confirm(string) , ürün adında görünen kesme işaretinden kurtulmamız gerekir. Özellikle, ürün adındaki kesme işaretleri "\'" ile kaçıştır.

Bu değişiklikler tamamlandıktan sonra GridView'da Sil düğmesine tıklanması özelleştirilmiş bir onay iletişim kutusu görüntüler (bkz. Şekil 4). FormView'dan onay ileti kutusunda olduğu gibi, kullanıcı Geri göndermeyi iptal et'e tıklarsa geri gönderme iptal edilir ve böylece silme işleminin gerçekleşmesi engellenir.

Not

Bu teknik, DetailsView içindeki CommandField içindeki Sil düğmesine program aracılığıyla erişmek için de kullanılabilir. Ancak DetailsView için olay işleyicisi DataBound oluşturursunuz çünkü DetailsView'da olay RowDataBound yoktur.

GridView'un Sil Düğmesine Tıklanması Özelleştirilmiş Onay İletişim Kutusu Görüntüler

Şekil 4: GridView'un Sil Düğmesine Tıklanması Özelleştirilmiş Onay İletişim Kutusu Görüntüler (Tam boyutlu görüntüyü görüntülemek için tıklayın)

TemplateFields Kullanma

CommandField'in dezavantajlarından biri, düğmelerine dizin oluşturma aracılığıyla erişilmesi ve sonuçta elde edilen nesnenin uygun düğme türüne (Düğme, LinkButton veya ImageButton) dönüştürülmesi gerektiğidir. "Sihirli sayılar" ve sabit kodlanmış türlerin kullanılması, çalışma zamanına kadar bulunamayan sorunları davet eder. Örneğin, siz veya başka bir geliştirici gelecekte bir noktada CommandField'e yeni düğmeler eklerseniz (Düzenle düğmesi gibi) veya özelliği değiştirirseniz ButtonType , var olan kod hatasız olarak derlenir, ancak kodunuzun nasıl yazıldığına ve hangi değişikliklerin yapıldığına bağlı olarak sayfayı ziyaret etmek bir özel duruma veya beklenmeyen davranışa neden olabilir.

Alternatif bir yaklaşım, GridView ve DetailsView'un CommandFields değerlerini TemplateFields'e dönüştürmektir. Bu, CommandField'deki her düğme için LinkButton (veya Düğme veya ImageButton) içeren bir ItemTemplate TemplateField oluşturur. Bu düğme OnClientClick özellikleri, FormView ile gördüğümüz gibi bildirim temelli olarak atanabilir veya aşağıdaki desen kullanılarak uygun DataBound olay işleyicisinde program aracılığıyla erişilebilir:

Dim obj As ButtonType = CType(e.Row.FindControl("controlID"), ButtonType)

Burada controlID , düğme s ID özelliğinin değeridir. Bu desen yine de atama için sabit kodlanmış bir tür gerektiriyor olsa da dizin oluşturma gereksinimini ortadan kaldırarak düzenin çalışma zamanı hatasına neden olmadan değişmesine olanak tanır.

Özet

JavaScript confirm(string) işlevi, form gönderimi iş akışını denetlemek için yaygın olarak kullanılan bir tekniktir. İşlev yürütülürken, Tamam ve İptal olmak üzere iki düğme içeren kalıcı, istemci tarafı bir iletişim kutusu görüntüler. Kullanıcı Tamam'a confirm(string) tıklarsa işlev döndürür true; İptal'e tıklanması döndürür false. Gönderme işlemi sırasında bir olay işleyicisi döndürürse false, bir tarayıcının form gönderimini iptal etme davranışıyla birleştirilmiş bu işlevsellik, kaydı silerken onay ileti kutusunu görüntülemek için kullanılabilir.

İşlev, confirm(string) denetim s OnClientClick özelliği aracılığıyla Button Web denetiminin istemci tarafı onclick olay işleyicisiyle ilişkilendirilebilir. Şablondaki bir Sil düğmesiyle çalışırken (FormView şablonlarından birinde veya DetailsView veya GridView'daki TemplateField'da) bu özellik, bu öğreticide gördüğümüz gibi bildirim temelli veya programlı olarak ayarlanabilir.

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 Saat içinde 2.0. Adresine adresinden veya adresinden ulaşabileceğiniz http://ScottOnWriting.NETblogu aracılığıyla ulaşabilirsinizmitchell@4GuysFromRolla.com.

ÖncekiSonraki