Silerken İstemci Tarafı Doğrulama Ekleme (C#)

tarafından Scott Mitchell

PDF'i indirin

Şu ana kadar oluşturduğumuz arabirimlerde, kullanıcı Düzenle düğmesine tıklamak için 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 mimarimiz ObjectDataSource'un ve veri Web denetimlerinin nasıl kullanıldığını 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 Delete düğmesinden oluşuyordu. Yöntem Delete() daha sonra İş Mantığı Katmanı'ndan yapılandırılan yöntemi çağırır ve bu, çağrıyı Veri Erişim Katmanı'na ileterek veritabanına gerçek DELETE ifadesinin gönderilmesini 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 yok. Bir kullanıcı Düzenle'ye tıklamak istediğinizde yanlışlıkla Sil düğmesine tıklarsa, güncelleştirmek istedikleri 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).

Şekil 1: JavaScript confirm(string) Metodu Bir Modal, Client-Side Mesaj Kutusu Görüntüler

İstemci tarafı olay işleyicisinden false değeri döndürülürse, form gönderimi sırasında 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. Daha fazla bilgi için, confirm() konusuna bakın.

Şablonlar kullanıldığında, gerekli istemci tarafı komutunun eklenmesi, CommandField kullanımı ile biraz farklılık gösterir. Bu nedenle, bu öğreticide hem FormView hem de GridView örneğine bakacağız.

Uyarı

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 biri belirli bir kullanıcı için doğru değilse, Sil düğmesine tıklandığında hemen geri gönderme işlemine neden olur (onay ileti kutusu görüntülenmez).

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

Önce ConfirmationOnDelete.aspx klasöründeki EditInsertDelete sayfasına bir FormView ekleyin ve bunu ProductsBLL sınıfındaki GetProducts() yöntemi üzerinden ürün bilgilerini geri çeken yeni bir ObjectDataSource'a bağlayın. Ayrıca ObjectDataSource'ı sınıf s ProductsBLL yönteminin DeleteProduct(productID) 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 Sayfalandırmayı Etkinleştir onay kutusunu işaretleyin.

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

<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ık 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 s ItemTemplate yalnızca Sil düğmesini sunar ve Yeni ve Güncelleştir düğmeleri eksiktir. Ancak, FormView bildirim temelli işaretlemesi, kaldırılabilir gereksiz EditItemTemplate ve InsertItemTemplate içerir. Biraz zaman ayırarak ItemTemplate öğesini özelleştirin, böylece ürün veri alanlarının yalnızca bir alt kümesini gösterirsiniz. Ürün adını, sağlayıcı ve kategori adlarının üzerinde 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ünleri birer birer değiştirmesine olanak tanıyan, 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.

Ş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: Sil düğmelerinin Client-Side onclick olayı üzerinden confirm(string) işlevini çağırma

FormView oluşturulduktan sonra, son adım Delete düğmesini ziyaretçi tarafından tıklandığında JavaScript confirm(string) işlevinin çağrılacağı şekilde yapılandırmaktır. Button, LinkButton veya ImageButton'ın istemci tarafı onclick olayına betik eklemek, ASP.NET 2.0'a yeni eklenen OnClientClick property kullanılarak 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şiklikten sonra, Delete LinkButton'ın bildirim temelli söz dizimi aşağıdakine benzer şekilde 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, postback işlemi devam eder ve ObjectDataSource Delete() yöntemi çağrılır, sonuçta veritabanı kaydı silinir.

Uyarı

JavaScript işlevine confirm(string) geçirilen dize, tırnak işaretleri yerine kesme işaretleri ile sınırlandırılır. JavaScript'te dizeler iki karakterden biri kullanılarak sınırlandırılabilir. Geçirilen dizenin confirm(string) sınır belirleyicilerinin, OnClientClick için kullanılan özellik değeri sınırlayıcılarıyla bir belirsizlik oluşturmaması için burada kesme işaretleri kullanıyoruz.

Şekil 3: Sil Düğmesine Tıklandığında Artık Bir Onay Görüntüleniyor (Tam boyutlu görüntüyü 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

Bir şablonda doğrudan Button, LinkButton veya ImageButton ile çalışırken, OnClientClick özelliğini JavaScript confirm(string) işlevinin sonuçlarını döndürecek şekilde yapılandırarak 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'un 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.

Uyarı

Delete button s OnClientClick özelliğini uygun DataBound olay işleyicisinde ayarlarken, geçerli kayda bağlı verilere erişimimiz olur. 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 bir GridView ekleyelim. Bu GridView'ı, FormView'un kullandığı ObjectDataSource denetimini kullanacak şekilde yapılandırın. Ayrıca GridView boundFields'i yalnızca ürün adını, kategorisini ve sağlayıcıyı içerecek şekilde sınırlayın. Son olarak GridView akıllı etiketinden Silmeyi Etkinleştir onay kutusunu işaretleyin. Bu işlem, GridView koleksiyonuna Columns özelliği ShowDeleteButton olarak ayarlanmış bir CommandField ekler.

Bu değişiklikleri yaptıktan sonra GridView bildirim temelli işaretlemeniz 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şvurulduktan sonra, OnClientClick özelliğini gerekli şekilde ayarlayabiliriz. Aşağıdaki kodu kullanarak olay için RowDataBound bir olay işleyicisi oluşturun:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // reference the Delete LinkButton
        LinkButton db = (LinkButton)e.Row.Cells[0].Controls[0];

        // Get information about the product bound to the row
        Northwind.ProductsRow product =
            (Northwind.ProductsRow) ((System.Data.DataRowView) e.Row.DataItem).Row;

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

Bu olay işleyicisi, Sil düğmesine sahip olacak veri satırlarıyla çalışır ve program aracılığıyla Sil düğmesine referans vererek başlar. Genel olarak aşağıdaki deseni kullanın:

ButtonType obj = (ButtonType) e.Row.Cells[commandFieldIndex].Controls[controlIndex];

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, CommandField'ın ButtonType propertyaracılığıyla özelleştirilebilir. commandFieldIndex, GridView koleksiyonundaki CommandField'in Columns sıralı dizinidir, controlIndex ise CommandField Controls koleksiyonundaki Sil düğmesinin dizinidir. controlIndex değeri, CommandField'daki diğer düğmelere göre düğmenin konumuna bağlıdır. Örneğin, CommandField'da görüntülenen tek düğme Sil düğmesiyse, 0 dizinini kullanın. Ancak, Sil düğmesinin önünde yer alan bir 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 0'dır. CommandField içindeki Sil düğmesi dışında başka düğme olmadığından 0'ın controlIndex değerini kullanırız.

CommandField'daki Sil düğmesine referans verdikten sonra, mevcut GridView satırına bağlı ürün hakkında bilgi edineceğiz. Son olarak Delete button 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ün adındaki kesme işaretleri "\'" ile kaçıştırılı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 iptal edilir ve böylece silme işleminin gerçekleşmesi engellenir.

Uyarı

Bu teknik, Bir 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şleyicisini DataBound oluşturmanız gerekir, çünkü DetailsView'da RowDataBound olayı yoktur.

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

TemplateField'leri kullanma

CommandField'in dezavantajlarından biri, düğmelerine dizin oluşturma yoluyla 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 eklerse (Düzenle düğmesi gibi) veya özelliği değiştirirse 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 özel durum veya beklenmeyen davranışa neden olabilir.

Alternatif bir yaklaşım, GridView ve DetailsView'ın CommandField'lerini 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üğmeler 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:

ButtonType obj = (ButtonType) e.Row.FindControl("controlID");

Burada controlID , düğme s ID özelliğinin değeridir. Bu desen yine de atama için sabit kodlanmış bir tür gerektirir, ancak 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önderme 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 tıklarsa işlev confirm(string) döndürür true; İptal'e tıklanması döndürür false. Bu işlev, bir tarayıcının, gönderim sürecinde bir olay işleyicisi false döndürdüğünde form gönderimini iptal etme davranışıyla birleşerek, bir kaydı silerken onay ileti kutusunu görüntülemek için kullanılabilir.

İşlev, Button Web denetiminin istemci tarafı confirm(string) olay işleyicisiyle onclick özelliği aracılığıyla ilişkilendirilebilir. Bir şablondaki Delete 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ışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.

ÖncekiSonraki