Onay Kutularından Oluşan GridView Sütunu Ekleme (C#)

Makale
03/05/2024

Bu öğreticide, kullanıcıya GridView'un birden çok satırını seçmenin sezgisel bir yolunu sağlamak için GridView denetimine onay kutuları sütunu ekleme işlemi ele alır.

Giriş

Önceki öğreticide, belirli bir kaydı seçmek amacıyla GridView'a radyo düğmelerinden oluşan bir sütunun nasıl ekleneceğini inceledik. Radyo düğmelerinden oluşan bir sütun, kullanıcı kılavuzdan en fazla bir öğe seçmekle sınırlı olduğunda uygun bir kullanıcı arabirimidir. Ancak bazen kullanıcının kılavuzdan rastgele sayıda öğe seçmesine izin vermek isteyebiliriz. Örneğin, web tabanlı e-posta istemcileri genellikle bir onay kutusu sütunu olan iletilerin listesini görüntüler. Kullanıcı rastgele sayıda ileti seçebilir ve ardından e-postaları başka bir klasöre taşıma veya silme gibi bazı eylemler gerçekleştirebilir.

Bu öğreticide bir onay kutusu sütunu eklemeyi ve geri göndermede hangi onay kutularının denetlendiğini belirlemeyi öğreneceksiniz. Özellikle web tabanlı e-posta istemcisi kullanıcı arabirimini yakından taklit eden bir örnek oluşturacağız. Örneğimizde, veritabanı tablosundaki ürünleri listeleyen ve her satırda Products onay kutusu bulunan bir sayfalanmış GridView yer alır (bkz. Şekil 1). Tıklandığında Seçili Ürünleri Sil düğmesi seçili ürünleri siler.

Şekil 1: Her Ürün Satırı Bir Onay Kutusu içerir (tam boyutlu resmi görüntülemek için tıklayın)

1. Adım: Ürün Bilgilerini Listeler Bir Paged GridView Ekleme

Onay kutularından oluşan bir sütun ekleme konusunda endişelenmeden önce, önce ürünleri sayfalandırmayı destekleyen bir GridView içinde listelemeye odaklanalım. Başlangıç olarak, klasörü içindeki sayfayı CheckBoxField.aspx açın ve Toolbox'tan bir GridView'u Tasarım Aracı sürükleyip olarak ayarlayınProductsID.EnhancedGridView Ardından, GridView'u adlı ProductsDataSourceyeni bir ObjectDataSource'a bağlamayı seçin. ObjectDataSource'u sınıfını ProductsBLL kullanacak şekilde yapılandırın ve verileri döndürmek için yöntemini çağırın GetProducts() . Bu GridView salt okunur olacağından, UPDATE, INSERT ve DELETE sekmelerindeki açılan listeleri (Yok) olarak ayarlayın.

Şekil 2: Adlı ProductsDataSource Yeni Bir ObjectDataSource Oluşturma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 3: ObjectDataSource'unu Yöntemi Kullanarak GetProducts() Veri Alacak Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 4: UPDATE, INSERT ve DELETE Sekmelerindeki Drop-Down Listeler (Yok) olarak ayarlayın (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Veri Kaynağını Yapılandırma sihirbazını tamamladıktan sonra Visual Studio, ürünle ilgili veri alanları için otomatik olarak BoundColumns ve CheckBoxColumn oluşturur. Önceki öğreticide yaptığımız gibi, , CategoryNameve BoundFields dışında ProductNametümünü kaldırın ve UnitPrice özellikleri Product, Category ve Price olarak değiştirinHeaderText. BoundField değerini UnitPrice para birimi olarak biçimlendirilsin diye yapılandırın. Ayrıca akıllı etiketten Disk Belleğini Etkinleştir onay kutusunu işaretleyerek GridView'ı disk belleğini destekleyecek şekilde yapılandırın.

Seçili ürünleri silmek için kullanıcı arabirimini de ekleyelim. GridView'un altına bir Düğme Web denetimi ekleyerek denetimi ve Text özelliğini Seçili Ürünleri Sil olarak ayarlayın.IDDeleteSelectedProducts Bu örnekte, veritabanındaki ürünleri silmek yerine silinmiş olabilecek ürünleri belirten bir ileti göstereceğiz. Buna uyum sağlamak için Düğme'nin altına bir Etiket Web denetimi ekleyin. Kimliğini olarak DeleteResultsayarlayın, özelliğini temizleyin Text ve ve EnableViewState özelliklerini olarak falseayarlayınVisible.

Bu değişiklikleri yaptıktan sonra GridView, ObjectDataSource, Button ve Label bildirim temelli işaretlemeleri aşağıdakine benzer olmalıdır:

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Sayfayı tarayıcıda görüntülemek için biraz zaman ayırın (bkz. Şekil 5). Bu noktada ilk on ürünün adını, kategorisini ve fiyatını görmeniz gerekir.

Şekil 5: İlk On Ürünün Adı, Kategorisi ve Fiyatı Listelenir (Tam boyutlu resmi görüntülemek için tıklayın)

2. Adım: Onay Kutuları Sütunu Ekleme

ASP.NET 2.0 bir CheckBoxField içerdiğinden, GridView'a onay kutuları sütunu eklemek için kullanılabileceğini düşünebilirsiniz. CheckBoxField bir Boole veri alanıyla çalışacak şekilde tasarlandığından ne yazık ki bu durum geçerli değildir. Başka bir ifadeyle, CheckBoxField'ı kullanabilmek için, işlenen onay kutusunun işaretli olup olmadığını belirlemek için değerine başvurulacak temel veri alanını belirtmemiz gerekir. CheckBoxField'ı yalnızca işaretlenmemiş onay kutularının bir sütununu eklemek için kullanamayız.

Bunun yerine, bir TemplateField eklemeli ve denetimine ItemTemplatebir CheckBox Web denetimi eklemeliyiz. Devam edin ve GridView'a Products bir TemplateField ekleyin ve bunu ilk (en sol) alan yapın. GridView'un akıllı etiketinden Şablonları Düzenle bağlantısına tıklayın ve araç kutusundan içine bir CheckBox ItemTemplateWeb denetimi sürükleyin. Bu CheckBox s ID özelliğini olarak ProductSelectorayarlayın.

Şekil 6: TemplateField'lere ItemTemplate Adlı ProductSelector Bir CheckBox Web Denetimi Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

TemplateField ve CheckBox Web denetimi eklendiğinde, her satır artık bir onay kutusu içerir. Şekil 7'de, TemplateField ve CheckBox eklendikten sonra tarayıcı üzerinden görüntülendiğinde bu sayfa gösterilir.

Şekil 7: Her Ürün Satırı Artık Bir Onay Kutusu Içeriyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: Geri göndermede hangi onay kutularının işaretlendiğini belirleme

Bu noktada onay kutularından oluşan bir sütun var ancak geri göndermede hangi onay kutularının denetlendiğini belirlemenin bir yolu yok. Ancak Seçili Ürünleri Sil düğmesine tıklandığında, bu ürünleri silmek için hangi onay kutularının işaretlendiğini bilmemiz gerekir.

GridView s Rows özelliği GridView'daki veri satırlarına erişim sağlar. Bu satırlar arasında yineleme yapabilir, CheckBox denetimine program aracılığıyla erişebilir ve ardından CheckBox'ın seçilip seçilmediğini belirlemek için özelliğine başvurabiliriz Checked .

Button Web denetimi Click olayı için DeleteSelectedProducts bir olay işleyicisi oluşturun ve aşağıdaki kodu ekleyin:

protected void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
    bool atLeastOneRowDeleted = false;
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null && cb.Checked)
        {
            // Delete row! (Well, not really...)
            atLeastOneRowDeleted = true;
            // First, get the ProductID for the selected row
            int productID = 
                Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);
            // "Delete" the row
            DeleteResults.Text += string.Format(
                "This would have deleted ProductID {0}<br />", productID);
        }
    }
    // Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted;
}

özelliği, Rows GridView'un veri satırlarını oluşturan bir örnek koleksiyonu GridViewRow döndürür. foreach Buradaki döngü bu koleksiyonu numaralandırır. Her GridViewRow nesne için, satırdaki CheckBox'a kullanılarak program aracılığıyla erişilir row.FindControl("controlID"). CheckBox işaretliyse, satıra karşılık gelen ProductID değer koleksiyondan DataKeys alınır. Bu alıştırmada, yalnızca Etiket'te DeleteResults bilgilendirici bir ileti görüntüleyeceğiz, ancak çalışan bir uygulamada bunun yerine sınıfın ProductsBLLDeleteProduct(productID) yöntemine bir çağrı yaparız.

Bu olay işleyicisinin eklenmesiyle, Seçili Ürünleri Sil düğmesine tıklanması artık seçili ürünlerin s öğesini görüntüler ProductID .

Şekil 8: Seçili Ürünleri Sil Düğmesine Tıklandığında Seçili Ürünler ProductID Listelenir (Tam boyutlu resmi görüntülemek için tıklayın)

4. Adım: Tümünü Denetle ve Tüm Düğmelerin İşaretlerini Kaldır'ı ekleme

Bir kullanıcı geçerli sayfadaki tüm ürünleri silmek istiyorsa, on onay kutusunun her birini denetlemesi gerekir. Tıklandığında kılavuzdaki tüm onay kutularını seçen bir Tümünü Denetle düğmesi ekleyerek bu işlemi hızlandırmaya yardımcı olabilirsiniz. Tümünün Işaretini Kaldır düğmesi de aynı derecede yararlı olabilir.

Sayfaya iki Düğme Web denetimi ekleyerek Bunları GridView'un üzerine yerleştirin. İlkini ID olarak CheckAll ve Text özelliğini Tümünü Denetle olarak ayarlayın; ikincisini ID olarak UncheckAll , özelliğini de Tümünün İşaretini Text Kaldır olarak ayarlayın.

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Ardından, çağırıldığında GridView koleksiyonunu Rows numaralandırır Products ve her CheckBox s Checked özelliğini checkState parametresinde geçirilen değeriyle ayarlar adlı ToggleCheckState(checkState) arka kod sınıfında bir yöntem oluşturun.

private void ToggleCheckState(bool checkState)
{
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null)
            cb.Checked = checkState;
    }
}

Ardından ve UncheckAll düğmeleri için CheckAll olay işleyicileri oluşturunClick. S olay işleyicisinde CheckAll , içinde çağrısı UncheckAllToggleCheckState(false)yapmanız yeterlidirToggleCheckState(true).

protected void CheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(true);
}
protected void UncheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(false);
}

Bu kodla, Tümünü Denetle düğmesine tıklanması geri göndermeye neden olur ve GridView'daki tüm onay kutularını denetler. Benzer şekilde, Tümünün işaretini kaldır'a tıklanması tüm onay kutularının seçimini kaldırır. Şekil 9'da Tümünü Denetle düğmesi işaretlendikten sonra ekran gösterilir.

Şekil 9: Tümünü Denetle Düğmesine tıklanması Tüm Onay Kutularını Seçer (Tam boyutlu resmi görüntülemek için tıklayın)

Not

Onay kutularının bir sütununu görüntülerken, tüm onay kutularını seçmek veya seçimini kaldırmak için bir yaklaşım üst bilgi satırındaki bir onay kutusu üzerinden yapılır. Ayrıca, geçerli Tümünü Denetle / Tüm uygulamanın işaretini kaldır bir geri gönderme gerektirir. Ancak, onay kutuları tamamen istemci tarafı betik aracılığıyla denetlenebilir veya işaretlerini kaldırılabilir, böylece daha hızlı bir kullanıcı deneyimi sağlar. İstemci tarafı tekniklerini kullanmayla ilgili tartışmanın yanı sıra Tümünü Denetle ve Tümünü İşaretle onay kutularının üst bilgi satırı kullanılarak incelenmesi için, Client-Side Betiği ve Tümünü Denetle Onay Kutusunu Kullanarak GridView'da Tüm Onay Kutularını Denetleme'yi gözden geçirin.

Özet

Devam etmeden önce kullanıcıların GridView'dan rastgele sayıda satır seçmesine izin vermeniz gereken durumlarda, onay kutularından oluşan bir sütun eklemek bir seçenektir. Bu öğreticide gördüğümüz gibi, GridView'da bir onay kutusu sütunu dahil olmak üzere, CheckBox Web denetimine sahip bir TemplateField eklemeyi gerektirir. Bir Web denetimi kullanarak (önceki öğreticide yaptığımız gibi işaretlemeyi doğrudan şablona ekleme yerine) ASP.NET geri göndermede checkBox'ların ne olduğunu ve işaretlenmediğini otomatik olarak hatırlar. Belirli bir Onay Kutusunun işaretli olup olmadığını belirlemek veya işaretli durumu değiştirmek için koddaki Onay Kutularına program aracılığıyla da erişebiliriz.

Bu öğreticide ve sonuncusunda GridView'a satır seçici sütunu ekleme konusuna bakılıyordu. Sonraki öğreticimizde, biraz çalışmayla GridView'a ekleme özelliklerini nasıl ekleyebileceğimizi 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 Saat içinde 2.0. Adresine adresinden veya adresinden ulaşabileceğiniz http://ScottOnWriting.NETblogu aracılığıyla ulaşabilirsinizmitchell@4GuysFromRolla.com.

Önceki Sonraki