Radyo Düğmelerinden Oluşan GridView Sütunu Ekleme (VB)

tarafından Scott Mitchell

PDF'i indirin

Bu öğreticide, kullanıcıya GridView'un tek bir satırını seçmenin daha sezgisel bir yolunu sağlamak için GridView denetimine radyo düğmeleri sütunu ekleme adımları ele alınıyor.

Giriş

GridView denetimi çok sayıda yerleşik işlevsellik sunar. Metin, resim, köprü ve düğmeleri görüntülemek için bir dizi farklı alan içerir. Daha fazla özelleştirme için şablonları destekler. Farenin birkaç tıklamasıyla, her satırın bir düğme aracılığıyla seçilebileceği bir GridView yapmak veya düzenleme veya silme özelliklerini etkinleştirmek mümkündür. Sağlanan özelliklerin bol olmasına rağmen, genellikle ek, desteklenmeyen özelliklerin eklenmesi gereken durumlar olacaktır. Bu öğreticide ve sonraki iki öğreticide, GridView'un işlevselliğini ek özellikler içerecek şekilde nasıl geliştirebileceğimizi inceleyeceğiz.

Bu öğreticide ve bir sonrakinde satır seçimi işlemini geliştirmeye odaklanılır. Details DetailView ile Seçilebilir Ana Kılavuz Görünümü Kullanarak Ana/Ayrıntı Bölümünde incelendiği gibi, GridView'a Seç düğmesi içeren bir CommandField ekleyebiliriz. Tıklama sonrası bir geri gönderme başlatılır ve GridView'in SelectedIndex özelliği, Seç düğmesine tıklanan satırın dizinine güncellenir. Seçilebilir Bir Ana GridView Kullanarak Ana/Ayrıntı ve Ayrıntılar DetailView öğretisinde, seçilen GridView satırının ayrıntılarını görüntülemek için bu özelliği nasıl kullanacağımızı gördük.

Seç düğmesi birçok durumda çalışsa da, diğerleri için de çalışmayabilir. Düğme kullanmak yerine, seçim için yaygın olarak iki kullanıcı arabirimi öğesi daha kullanılır: radyo düğmesi ve onay kutusu. GridView'ı genişleterek Seç düğmesi yerine her satırın bir radyo düğmesi veya onay kutusu içermesini sağlayabiliriz. Kullanıcının GridView kayıtlarından yalnızca birini seçebildiği senaryolarda, radyo düğmesi Seç düğmesi yerine tercih edilebilir. Kullanıcının web tabanlı e-posta uygulaması gibi birden çok kaydı seçebileceği durumlarda, kullanıcının onay kutusunu silmek için birden çok ileti seçmek isteyebileceği durumlarda Seç düğmesi veya radyo düğmesi kullanıcı arabirimlerinden kullanılamayan işlevler sunar.

Bu öğreticide GridView'a radyo düğmeleri sütunu ekleme adımları anlatılıyor. Devam eden öğreticide onay kutularının kullanımı incelenir.

1. Adım: GridView Web Sayfalarını Geliştirme

GridView'u radyo düğmelerinden oluşan bir sütun içerecek şekilde geliştirmeye başlamadan önce, web sitesi projemizde bu öğretici ve sonraki ikisi için ihtiyacımız olacak ASP.NET sayfalarını oluşturmak için biraz zaman ayıralım. adlı EnhancedGridViewyeni bir klasör ekleyerek başlayın. Ardından, aşağıdaki ASP.NET sayfaları bu klasöre ekleyerek her sayfayı ana sayfayla ilişkilendirdiğinizden Site.master emin olun:

• Default.aspx
• RadioButtonField.aspx
• CheckBoxField.aspx
• InsertThroughFooter.aspx

Şekil 1: SqlDataSource-Related Öğreticileri için ASP.NET Sayfaları Ekleme

Diğer klasörlerde olduğu gibi Default.aspx klasöründeki EnhancedGridView, bölümündeki öğretici listelenir. Kullanıcı Denetimi'nin SectionLevelTutorialListing.ascx bu işlevi sağladığını hatırlayın. Bu nedenle, bu Kullanıcı Denetimini Default.aspx Çözüm Gezgini sayfanın Tasarım görünümüne sürükleyerek öğesine ekleyin.

Şekil 2: Kullanıcı Denetimini ekleme SectionLevelTutorialListing.ascxDefault.aspx (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Son olarak, bu dört sayfayı dosyaya Web.sitemap girdi olarak ekleyin. Özellikle, Using the SqlDataSource Control <siteMapNode>'dan sonra aşağıdaki işaretlemeyi ekleyin:

<siteMapNode 
    title="Enhancing the GridView" 
    url="~/EnhancedGridView/Default.aspx" 
    description="Augment the user experience of the GridView control.">
    <siteMapNode 
        url="~/EnhancedGridView/RadioButtonField.aspx" 
        title="Selection via a Radio Button Column" 
        description="Explore how to add a column of radio buttons in the GridView." />
    <siteMapNode 
        url="~/EnhancedGridView/CheckBoxField.aspx" 
        title="Selection via a Checkbox Column" 
        description="Select multiple records in the GridView by using a column of 
            checkboxes." />
    <siteMapNode 
        url="~/EnhancedGridView/InsertThroughFooter.aspx" 
        title="Add New Records through the Footer" 
        description="Learn how to allow users to add new records through the 
            GridView's footer." />
</siteMapNode>

güncelleştirdikten Web.sitemapsonra, öğreticiler web sitesini bir tarayıcı üzerinden görüntülemek için biraz bekleyin. Soldaki menüde artık düzenleme, ekleme ve silme öğreticileri için öğeler bulunur.

Şekil 3: Site Haritası Artık GridView Öğreticilerini Geliştirme için Girdiler Içeriyor

2. Adım: GridView'da Tedarikçileri Görüntüleme

Bu öğretici için, her GridView satırının bir radyo düğmesi sağladığı, ABD'den tedarikçileri listeleyen bir GridView oluşturalım. Radyo düğmesi aracılığıyla bir sağlayıcı seçtikten sonra, kullanıcı bir düğmeye tıklayarak tedarikçinin ürünlerini görüntüleyebilir. Bu görev önemsiz gibi görünse de, özellikle karmaşık hale getiren birkaç incelik vardır. Bu incelikleri keşfetmeden önce önce tedarikçileri listeleyen bir GridView alalım.

Tasarımcı'da RadioButtonField.aspx sayfasını, Araç Kutusu'ndan bir GridView sürükleyerek klasörün içindeki EnhancedGridView dosyasında açarak başlayın. GridView'in IDSuppliers olarak ayarlandığından emin olun ve akıllı etiketinden yeni bir veri kaynağı oluşturmayı seçin. Özellikle, SuppliersDataSource nesnesinin verilerini çeken SuppliersBLL adlı bir ObjectDataSource oluşturun.

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

Şekil 5: ObjectDataSource'ı Sınıfı Kullanacak SuppliersBLL Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Yalnızca ABD'deki tedarikçileri listelemek istediğimizden, SELECT sekmesindeki açılan listeden yöntemi seçin GetSuppliersByCountry(country) .

Şekil 6: ObjectDataSource'ı Sınıfı Kullanacak SuppliersBLL Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GÜNCELLEŞTIR sekmesinden (Yok) seçeneğini belirleyin ve İleri'ye tıklayın.

Şekil 7: ObjectDataSource'ı Sınıfı Kullanacak SuppliersBLL Şekilde Yapılandırma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

GetSuppliersByCountry(country) yöntemi bir parametreyi kabul ettiğinden, Veri Kaynağını Yapılandırma sihirbazı bu parametrenin kaynağını sorar. Sabit kodlanmış bir değer belirtmek için (ABD, bu örnekte), Parametre kaynağı açılan listesini Yok olarak bırakın ve metin kutusuna varsayılan değeri girin. Sihirbazı tamamlamak için Son'a tıklayın.

Şekil 8: Parametre için country Varsayılan Değer olarak ABD kullanma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sihirbazı tamamladıktan sonra GridView, sağlayıcı veri alanlarının her biri için bir BoundField içerir. CompanyName, City ve Country BoundFields dışındakileri kaldırın ve CompanyName BoundFields HeaderText özelliğini Supplier olarak yeniden adlandırın. Bunu yaptıktan sonra GridView ve ObjectDataSource bildirim temelli söz dizimi aşağıdakine benzer olmalıdır.

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliersByCountry" TypeName="SuppliersBLL">
    <SelectParameters>
        <asp:Parameter DefaultValue="USA" Name="country" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

Bu öğreticide, kullanıcının seçilen sağlayıcının ürünlerini sağlayıcı listesiyle aynı sayfada veya farklı bir sayfada görüntülemesine izin verelim. Buna uyum sağlamak için sayfaya iki Düğme Web denetimi ekleyin. Bu iki düğmenin ID ve ListProducts s'lerini ayarladım; SendToProducts tıklanınca bir geri gönderme gerçekleşecek ve seçilen sağlayıcının ürünleri aynı sayfada listelenecek, ancak ListProducts tıklandığında kullanıcı ürünleri listeleyen başka bir sayfaya yönlendirilecek.

Bir tarayıcı üzerinden görüntülendiğinde Şekil 9, GridView ve iki Düğme Web denetimini göstermektedir.

Şekil 9: ABD'den Bu Tedarikçiler Adları, Şehirleri ve Ülke Bilgileri Listelenmiştir (Tam boyutlu görüntüyü görüntülemek için tıklayınız)

3. Adım: Radyo Düğmeleri Sütunu Ekleme

Bu noktada Suppliers GridView'da, ABD'deki her tedarikçinin şirket adını, şehrini ve ülkesini gösteren üç BoundField bulunur. Bununla birlikte, hala bir radyo düğmesi sütunu yok. Ne yazık ki GridView yerleşik bir RadioButtonField içermez, aksi takdirde bunu grid'e ekler ve işimiz bitmiş olurdu. Bunun yerine bir TemplateField ekleyebilir ve bunu ItemTemplate bir radyo düğmesini işleyecek şekilde yapılandırarak her GridView satırı için bir radyo düğmesi elde edebiliriz.

Başlangıçta, istenen kullanıcı arabiriminin TemplateField'a RadioButton Web denetimi ItemTemplate eklenerek uygulanabileceğini varsayabiliriz. Bu, GridView'un her satırına tek bir radyo düğmesi ekler ancak radyo düğmeleri gruplandırılamaz ve bu nedenle birbirini dışlamaz. Diğer bir ifadeyle, bir son kullanıcı GridView'dan aynı anda birden çok radyo düğmesi seçebilir.

RadioButton Web denetimlerinin TemplateField'inin kullanılması ihtiyacımız olan işlevselliği sunmasa da, sonuçta elde edilen radyo düğmelerinin neden gruplandırılmadığını incelemeye değer olduğundan bu yaklaşımı uygulayalım. Suppliers GridView'a bir TemplateField ekleyerek başlayın ve bunu en soldaki alan yapın. Ardından, GridView'ın akıllı etiketinden Şablonları Düzenle bağlantısına tıklayın ve Araç Kutusu'ndan bir RadioButton web denetimini TemplateField içindeki ItemTemplate alanına sürükleyin (bkz. Şekil 10). RadioButton'un ID özelliğini RowSelector olarak ve GroupName özelliğini SuppliersGroup olarak ayarlayın.

Şekil 10: Öğesine RadioButton Web Denetimi ItemTemplate Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Tasarımcı aracılığıyla bu eklemeleri yaptıktan sonra GridView işaretlemeniz aşağıdakine benzer görünmelidir:

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButton ID="RowSelector" runat="server" 
                    GroupName="SuppliersGroup" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>

RadioButton s GroupName özelliği , bir dizi radyo düğmesini gruplandırmak için kullanılan özelliktir. Aynı GroupName değere sahip tüm RadioButton denetimleri gruplandırılmış olarak kabul edilir; bir gruptan aynı anda yalnızca bir radyo düğmesi seçilebilir. Bu GroupName özelliği, işlenen radyo butonunun name özniteliğinin değerini belirtir. Tarayıcı, radyo düğmesi gruplandırmalarını belirlemek için radyo düğmeleri name özniteliklerini inceler.

RadioButton Web denetimi ItemTemplate öğesine eklendikten sonra, bu sayfayı tarayıcı üzerinden ziyaret edin ve kılavuzun satırlarındaki radyo düğmelerine tıklayın. Radyo düğmelerinin nasıl gruplandırılmadığına ve bu nedenle tüm satırların seçilebileceğine Şekil 11'de dikkat edin.

Şekil 11: GridView Radyo Düğmeleri Gruplandırılmıyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Radyo düğmelerinin gruplandırılmama nedeni, aynı name özellik ayarına sahip olmasına rağmen işlenen GroupName özniteliklerinin farklı olmasıdır. Bu farkları görmek için tarayıcıdan bir Görünüm/Kaynak yapın ve radyo düğmesi işaretlemesini inceleyin:

<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl04_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl04$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl05_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl05$SuppliersGroup" 
    type="radio" value="RowSelector" />

Hem name hem de id özniteliklerinin Özellikler penceresinde belirtilen tam değerler olmadığını, ancak bir dizi başka ID değerle önceden eklendiğine dikkat edin. Önüne eklenen ek ID değerler, radyo düğmelerinin id ebeveyn denetimleri nameID'lar, GridView GridViewRow'lar, İçerik denetimi ID'lar ve Web Formu ID'ların değerleridir. Bunlar ID , GridView'da işlenen her Web denetiminin benzersiz id ve name değerlere sahip olması için eklenir.

Her işlenen kontrol, tarayıcının istemci tarafında her bir kontrolü benzersiz olarak tanımlayabilmesi ve geri göndermede hangi eylemin veya değişikliğin gerçekleştiğini web sunucusuna bildirilebilmesi için farklı name ve id gerektirir. Örneğin, RadioButton'ın işaretli durumu her değiştirildiğinde sunucu tarafı kodu çalıştırmak istediğimizi düşünün. RadioButton s AutoPostBack özelliğini True olarak ayarlayarak ve olay için CheckChanged bir olay işleyicisi oluşturarak bunu gerçekleştirebiliriz. Ancak, tüm radyo düğmeleri için işlenen name ve id değerler aynıysa, geri göndermede hangi RadioButton'a tıklandığını belirleyemedik.

Kısacası RadioButton Web denetimini kullanarak GridView'da radyo düğmelerinden oluşan bir sütun oluşturamıyoruz. Bunun yerine, her GridView satırına uygun işaretlemenin eklenmesini sağlamak için oldukça arkaik teknikler kullanmalıyız.

Uyarı

RadioButton Web denetiminde olduğu gibi, bir şablona eklendiğinde radyo düğmesi HTML denetimi de benzersiz name özniteliği içerir ve kılavuzdaki radyo düğmeleri birbirinden bağımsız hale gelir. HTML denetimlerini bilmiyorsanız, özellikle de ASP.NET 2.0'da HTML denetimleri nadiren kullanıldığından bu notu göz ardı edebilirsiniz. Ancak daha fazla bilgi edinmek istiyorsanız bkz. K. Scott Allen'ın blog girdisi Web Denetimleri ve HTML Denetimleri.

Literal Kontrolü Kullanarak Radyo Düğmesi İşaretlemeleri Eklemek

GridView içindeki tüm radyo düğmelerini doğru bir şekilde gruplandırmak için, radyo düğmelerinin HTML kodunu ItemTemplate içine manuel olarak eklememiz gerekir. Her radyo düğmesi aynı name özniteliğe ihtiyaç duyar, ancak benzersiz id bir özniteliğe sahip olmalıdır (istemci tarafı betiği aracılığıyla bir radyo düğmesine erişmek istememiz durumunda). Kullanıcı bir radyo düğmesini seçip sayfayı geri gönderdikten sonra, tarayıcı seçilen radyo düğmesi value özniteliğinin değerini geri gönderir. Bu nedenle, her radyo düğmesinin benzersiz value bir özniteliği olması gerekir. Son olarak, geri göndermede özniteliği seçilen checked bir radyo düğmesine eklediğinizden emin olmamız gerekir, aksi takdirde kullanıcı bir seçim yaptıktan ve geri gönderdikten sonra radyo düğmeleri varsayılan durumuna döner (tümü seçilmemiş).

Şablona düşük düzeyli işaretleme eklemek için kullanılabilecek iki yaklaşım vardır. Bunlardan biri, işaretleme ve code-behind sınıfında tanımlanan biçimlendirme yöntemlerine çağrı yapmanın birleşimini gerçekleştirmektir. Bu teknik ilk olarak GridView Denetimi öğreticisindeki TemplateField'leri Kullanma bölümünde ele alınmıştı. Bizim durumumuzda şuna benzer olabilir:

<input type="radio" id='<%# GetUniqueRadioButtonID(...) %>' 
    name='SuppliersGroup' value='<%# GetRadioButtonValue(...) %>' ... />

GetUniqueRadioButton Burada ve GetRadioButtonValue her radyo düğmesi için uygun id ve value öznitelik değerlerini döndüren arka kod sınıfında tanımlanan yöntemler olabilir. Bu yaklaşım id ve value özniteliklerini atamak için iyi çalışır, ancak checked özniteliği değerini belirtmek gerektiğinde yetersiz kalır; çünkü veri bağlama söz dizimi yalnızca veriler ilk kez GridView'a bağlandığında yürütülür. Bu nedenle, GridView görünüm durumu etkinse, biçimlendirme yöntemleri yalnızca sayfa ilk yüklendiğinde (veya GridView açıkça veri kaynağına yeniden bağlandığında) tetiklenir. Dolayısıyla, checked özniteliğini ayarlayan işlev geri gönderimde çağrılmaz. Bu oldukça ince bir sorun ve bu makalenin kapsamının biraz ötesinde, bu yüzden bunu burada bırakıyorum. Ancak, yukarıdaki yaklaşımı kullanmayı denemenizi ve takılıp kalabileceğiniz noktaya kadar çalışmanızı tavsiye ederim. Böyle bir alıştırma sizi çalışan bir sürüme yaklaştırmasa da GridView ve veri bağlama yaşam döngüsünü daha iyi anlamanıza yardımcı olur.

Şablona özel, düşük düzeyli işaretleme eklemenin alternatif bir yolu, bu öğreticide kullanacağımız yöntem olan, şablon içine bir Literal kontrolü eklemektir. Ardından, GridView s RowCreated veya RowDataBound olay işleyicisinde Literal denetimine program aracılığıyla erişilebilir ve program aracılığıyla Text özelliği, çıktı olarak verilecek işaretlemeye ayarlanabilir.

TemplateField'den ItemTemplateRadioButton'ı kaldırarak başlayın ve yerine Literal kontrol ekleyin. Literal kontrolünü IDRadioButtonMarkup olarak ayarlayın.

Şekil 12: Bir Literal Denetimi ItemTemplate ekleyin (Tam boyutlu görüntüyü görmek için tıklayın)

Ardından GridView RowCreated olayı için bir olay işleyicisi oluşturun. Eklenen her satır için, verilerin GridView'a yeniden bağlanması gerekip gerekmediğine bakılmaksızın RowCreated olayı bir kez tetiklenir. Bu, şu anlama gelir ki, RowCreated olayı, veriler görünüm durumundan yeniden yüklendiğinde, postback sırasında bile tetiklenir ve RowCreated'yı kullanmamızın nedeni budur (veriler yalnızca veri Web kontrolüne açıkça bağlandığında tetiklenir).

Bu olay işleyicisinde, yalnızca bir veri satırıyla ilgileniyorsak devam etmek istiyoruz. Her veri satırı için RadioButtonMarkup Değişmez Değer denetimine programlı olarak başvurmak ve Text özelliğini çıkarılacak işaretleme olarak ayarlamak istiyoruz. Aşağıdaki kodda gösterildiği gibi, yayılan işaretleme, name özniteliği SuppliersGroup olarak ayarlanmış, id özniteliği RowSelectorX olarak ayarlanmış, ve özniteliği GridView satırının dizini olarak ayarlanmış bir radyo düğmesi oluşturur. Burada value, GridView satırının dizinidir.

Protected Sub Suppliers_RowCreated(sender As Object, e As GridViewRowEventArgs) _
    Handles Suppliers.RowCreated
    
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' Grab a reference to the Literal control
        Dim output As Literal = _
            CType(e.Row.FindControl("RadioButtonMarkup"), Literal)
        ' Output the markup except for the "checked" attribute
        output.Text = String.Format( _
            "<input type="radio" name="SuppliersGroup" " & _
            "id="RowSelector{0}" value="{0}" />", e.Row.RowIndex)
    End If
End Sub

GridView satırı seçildiğinde ve geri çağırma gerçekleştiğinde, seçilen sağlayıcının SupplierID ile ilgileniyoruz. Bu nedenle, her radyo düğmesinin değerinin gerçek SupplierID olması gerektiğini düşünebilirsiniz (GridView satırının dizini yerine). Bu, belirli durumlarda işe yarasa da, bir SupplierID körü körüne kabul etmek ve işlemek güvenlik riski olacaktır. Örneğin GridView'umuzda yalnızca ABD'deki tedarikçiler listelenir. Ancak, SupplierID doğrudan radyo düğmesinden geçerse, yaramaz bir kullanıcının geri göndermede SupplierID değerini işlemesini durdurmak için ne gerekir? value öğesi olarak satır dizinini kullanarak ve geri gönderim sırasında SupplierID koleksiyonundan DataKeys değerini alarak, kullanıcının sadece GridView satırlarından biriyle ilişkili olan SupplierID değerlerinden birini kullandığını garanti edebiliriz.

Bu olay işleyici kodunu ekledikten sonra, sayfayı tarayıcıda test etmek için bir dakika bekleyin. İlk olarak, kılavuzda aynı anda yalnızca bir radyo düğmesinin seçilebileceğini unutmayın. Ancak, bir radyo düğmesi seçip düğmelerden birine tıklandığında bir geri gönderme gerçekleşir ve radyo düğmelerinin tümü ilk durumlarına döner (yani, geri göndermede, seçili radyo düğmesi artık seçili değildir). Bunu düzeltmek için, olay işleyicisini artırarak postback sonrası sunucudan gönderilen seçili radyo düğmesi dizinini incelemesini ve satır dizini eşleştiğinde yayılan işaretlemeye RowCreated özniteliğini eklemesini sağlamamız gerekir.

Geri gönderme gerçekleştiğinde, tarayıcı, seçili radyo düğmesinin name ve value öğesini geri gönderir. Değer, Request.Form("name") program aracılığıyla kullanılarak alınabilir. Request.Form özelliği, form değişkenlerini temsil eden bir NameValueCollection sağlar. Form değişkenleri, web sayfasındaki form alanlarının adları ve değerleridir ve bir geri gönderme gönderildiğinde web tarayıcısı tarafından geri gönderilir. GridView'daki radyo düğmelerinin işlenmiş name özniteliği SuppliersGroup olduğundan, web sayfası geri gönderildiğinde tarayıcı, diğer form alanlarıyla birlikte SuppliersGroup=valueOfSelectedRadioButton'i web sunucusuna geri gönderir. Daha sonra bu bilgilere Request.Form özelliği kullanılarak erişilebilir: Request.Form("SuppliersGroup").

Seçilen radyo düğmesi indeksini yalnızca RowCreated olay işleyicisinde değil, aynı zamanda Düğme Web denetimlerinin Click olay işleyicilerinde de belirlememiz gerekeceğinden, arka plandaki kod sınıfına radyo düğmesi seçilmemişse SuppliersSelectedIndex değerini ve radyo düğmelerinden biri seçilmişse seçili indeksi döndüren bir -1 özelliği ekleyelim.

Private ReadOnly Property SuppliersSelectedIndex() As Integer
    Get
        If String.IsNullOrEmpty(Request.Form("SuppliersGroup")) Then
            Return -1
        Else
            Return Convert.ToInt32(Request.Form("SuppliersGroup"))
        End If
    End Get
End Property

Bu özellik eklendiğinde, checked="checked" ile RowCreated eşit olduğunda SuppliersSelectedIndex işaretlemesini e.Row.RowIndex olay işleyicisine eklememiz gerektiğini biliyoruz. Olay işleyicisini şu mantığı içerecek şekilde güncelleştirin:

Protected Sub Suppliers_RowCreated(sender As Object, e As GridViewRowEventArgs) _
    Handles Suppliers.RowCreated
    
    If e.Row.RowType = DataControlRowType.DataRow Then
        ' Grab a reference to the Literal control
        Dim output As Literal = _
            CType(e.Row.FindControl("RadioButtonMarkup"), Literal)
        ' Output the markup except for the "checked" attribute
        output.Text = String.Format( _
            "<input type="radio" name="SuppliersGroup" " & _
            "id="RowSelector{0}" value="{0}"", e.Row.RowIndex)
        ' See if we need to add the "checked" attribute
        If SuppliersSelectedIndex = e.Row.RowIndex Then
            output.Text &= " checked="checked""
        End If
        ' Add the closing tag
        output.Text &= " />"
    End If
End Sub

Bu değişiklikle, seçilen radyo düğmesi geri göndermeden sonra seçili kalır. Artık hangi radyo düğmesinin seçildiğini belirtme özelliğine sahip olduğumuza göre, sayfa ilk ziyaret edildiğinde ilk GridView satırının radyo düğmesi seçilecek şekilde (geçerli davranış olan varsayılan olarak hiçbir radyo düğmesi seçilmemesi yerine) davranışı değiştirebiliriz. İlk radyo düğmesinin varsayılan olarak seçilmesi için deyimini If SuppliersSelectedIndex = e.Row.RowIndex Then şu şekilde değiştirmeniz yeterlidir: If SuppliersSelectedIndex = e.Row.RowIndex OrElse (Not Page.IsPostBack AndAlso e.Row.RowIndex = 0) Then.

Bu noktada, GridView'a, yalnızca bir GridView satırının seçilmesini ve sayfa güncellemeleri sırasında hatırlanmasını sağlayan gruplandırılmış radyo düğmelerinden oluşan bir sütun ekledik. Sonraki adımlarımız, seçilen tedarikçi tarafından sağlanan ürünleri görüntülemektir. Adım 4'te kullanıcıyı başka bir sayfaya yönlendirmeyi ve seçili SupplierID ile birlikte göndermeyi göreceğiz. 5. Adım'da, seçilen sağlayıcının ürünlerini aynı sayfada GridView'da nasıl görüntüleyebileceğimizi göreceğiz.

Uyarı

TemplateField kullanmak yerine (bu uzun Adım 3'ün odağı), uygun kullanıcı arabirimini ve işlevselliğini işleyen özel DataControlField bir sınıf oluşturabiliriz. DataControlField sınıfı, BoundField, CheckBoxField, TemplateField ve diğer yerleşik GridView ve DetailsView alanlarının türetildiği temel sınıftır. Özel DataControlField bir sınıf oluşturmak, radyo düğmeleri sütununun yalnızca bildirim temelli söz dizimi kullanılarak eklenebileceği ve ayrıca diğer web sayfalarında ve diğer web uygulamalarında işlevselliğin çoğaltılması önemli ölçüde daha kolay hale getirebileceği anlamına gelir.

Bununla birlikte, ASP.NET'de özel, derlenmiş denetimler oluşturduysanız, bunu yapmanın makul miktarda ayak işi gerektirdiğini ve dikkatli bir şekilde işlenmesi gereken bir çok incelik ve uç olay taşıdığını biliyorsunuz. Bu nedenle, şimdilik özel DataControlField bir sınıf olarak radyo düğmelerinden oluşan bir sütun uygulamayı bırakacağız ve TemplateField seçeneğiyle devam edeceğiz. Belki de gelecekteki bir öğreticide özel DataControlField sınıflar oluşturma, kullanma ve dağıtmayı keşfetme fırsatımız olacak!

4. Adım: Seçili SağlayıcıNın Ürünlerini Ayrı Bir Sayfada Görüntüleme

Kullanıcı bir GridView satırı seçtikten sonra seçilen sağlayıcının ürünlerini göstermemiz gerekir. Bazı durumlarda, bu ürünleri ayrı bir sayfada görüntülemek isteyebiliriz, bazı durumlarda da aynı sayfada yapmayı tercih edebiliriz. Öncelikle ürünlerin ayrı bir sayfada nasıl görüntüleneceğini inceleyelim; 5. Adımda, seçili sağlayıcının ürünlerini görüntülemek için gridview RadioButtonField.aspx ekleme işlemini inceleyeceğiz.

Sayfada ListProducts ve SendToProducts adında iki Web Düğmesi denetimi bulunmaktadır. Düğmeye SendToProducts tıklandığında, kullanıcıyı adresine ~/Filtering/ProductsForSupplierDetails.aspxgöndermek istiyoruz. Bu sayfa, İki Sayfada Ana/Ayrıntı Filtreleme öğreticisinde oluşturulmuştur ve SupplierID adlı sorgu dizesi alanından iletilen sağlayıcının SupplierID ürünlerini görüntüler.

Bu işlevi sağlamak için Button s SendToProducts olayı için Click bir olay işleyicisi oluşturun. 3. Adım'da, radyo düğmesi seçili olan satırın dizinini döndüren özelliğini ekledik SuppliersSelectedIndex . GridView'in SupplierID koleksiyonundan karşılık gelen DataKeys alınabilir ve ardından kullanıcı ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID kullanılarak Response.Redirect("url") adresine gönderilebilir.

Protected Sub SendToProducts_Click(sender As Object, e As EventArgs) _
    Handles SendToProducts.Click
    
    ' Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    Dim supplierID As Integer = _
        Convert.ToInt32(Suppliers.DataKeys(SuppliersSelectedIndex).Value)
    Response.Redirect( _
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" & _
        supplierID)
End Sub

GridView'dan radyo düğmelerinden biri seçili olduğu sürece bu kod harika çalışır. Başlangıçta GridView'da hiçbir radyo düğmesi seçili değilse ve kullanıcı SendToProducts düğmesine tıklarsa, SuppliersSelectedIndex-1 olur, bu da -1 koleksiyonun DataKeys dizin aralığının dışında olduğu için bir istisna oluşmasına neden olur. Bununla birlikte, GridView'daki ilk radyo düğmesinin RowCreated başlangıçta seçili olması için 3. Adımda açıklandığı gibi olay işleyicisini güncelleştirmeye karar verdiyseniz, bu bir sorun değildir.

SuppliersSelectedIndex değerindeki -1 değerini barındırmak için sayfadaki GridView'un üst kısmına bir Etiket Web denetimi ekleyin. ID özelliğini ChooseSupplierMsg, CssClass özelliğini Warning, EnableViewState ve Visible özelliklerini False, ve Text özelliğini Lütfen kılavuzdan bir sağlayıcı seçin olarak ayarlayın. CSS sınıfı Warning metni kırmızı, italik, kalın, büyük bir yazı tipiyle görüntüler ve içinde Styles.csstanımlanır. EnableViewState ve Visible özellikleri False olarak ayarlandığında, Etiket yalnızca denetimin Visible özelliği program aracılığıyla True olarak ayarlanmış olduğu geri göndermeler dışında işlenmez.

Şekil 13: GridView'un Üzerine Etiket Web Denetimi Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Ardından, Click sıfırdan küçükse ChooseSupplierMsg Etiketi'ni göstermek ve aksi takdirde kullanıcıyı SuppliersSelectedIndex konumuna yönlendirmek için ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID olay işleyicisini genişletin.

Protected Sub SendToProducts_Click(sender As Object, e As EventArgs) _
    Handles SendToProducts.Click
    
    ' make sure one of the radio buttons has been selected
    If SuppliersSelectedIndex < 0 Then
        ChooseSupplierMsg.Visible = True
    Else
        ' Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        Dim supplierID As Integer = _
            Convert.ToInt32(Suppliers.DataKeys(SuppliersSelectedIndex).Value)
        Response.Redirect( _
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" & _
            supplierID)
    End If
End Sub

Tarayıcıda sayfayı ziyaret edin ve GridView'dan bir sağlayıcı seçmeden önce düğmeye tıklayın SendToProducts . Şekil 14'te gösterildiği gibi, ChooseSupplierMsg etiketi gösterir. Ardından bir sağlayıcı seçin ve düğmeye SendToProducts tıklayın. Bu, sizi seçilen sağlayıcı tarafından sağlanan ürünleri listeleyen bir sayfaya ilerler. Şekil 15'te, Bigfoot Breweries sağlayıcısının seçildiği ProductsForSupplierDetails.aspx sayfa gösterilmektedir.

Şekil 14: ChooseSupplierMsg Sağlayıcı Seçilmediyse Etiket Görüntülenir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Şekil 15: Seçili Sağlayıcı Ürünleri'nin Görüntülendiği ProductsForSupplierDetails.aspx Yer (Tam boyutlu görüntüyü görüntülemek için tıklayın)

5. Adım: Seçili Sağlayıcı Ürünlerini Aynı Sayfada Görüntüleme

4. Adımda, seçilen sağlayıcının ürünlerini görüntülemek için kullanıcıyı başka bir web sayfasına nasıl gönderebileceğimizi gördük. Alternatif olarak, seçilen tedarikçinin ürünleri aynı sayfada görüntülenebilir. Bunu göstermek için, seçilen tedarikçinin ürünlerini görüntülemek için başka RadioButtonField.aspx bir GridView ekleyeceğiz.

Ürünlerin bu GridView'unun yalnızca bir tedarikçi seçildikten sonra görüntülenmesini istediğimiz için, GridView'un altına bir Suppliers Panel Web denetimi ekleyin ve ID özelliğini ProductsBySupplierPanel, Visible özelliğini ise False olarak ayarlayın. Panel'in içine Seçili Sağlayıcı için Ürünler metnini ve ardından ProductsBySupplier adlı bir GridView ekleyin. GridView'un akıllı etiketinden bunu adlı ProductsBySupplierDataSourceyeni bir ObjectDataSource'a bağlamayı seçin.

Şekil 16: GridView'ı ProductsBySupplier Yeni ObjectDataSource'a bağlama (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Ardından ObjectDataSource'ı sınıfını ProductsBLL kullanacak şekilde yapılandırın. Yalnızca seçilen sağlayıcı tarafından sağlanan ürünleri almak istediğimizden, ObjectDataSource'un verilerini almak için yöntemini çağırması GetProductsBySupplierID(supplierID) gerektiğini belirtin. UPDATE, INSERT ve DELETE sekmelerindeki açılan listelerden (Hiçbiri) öğesini seçin.

Şekil 17: ObjectDataSource'un Yöntemini Kullanacak Şekilde Yapılandırılması GetProductsBySupplierID(supplierID) (Tam boyutlu görüntüyü görüntülemek için tıklayın)

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

SELECT, UPDATE, INSERT ve DELETE sekmelerini yapılandırdıktan sonra İleri'ye tıklayın. GetProductsBySupplierID(supplierID) yöntemi bir giriş parametresi beklediğinden, Veri Kaynağı Oluşturma sihirbazı parametre değeri için kaynağı belirtmemizi ister.

Parametre değerinin kaynağını belirtmek için burada birkaç seçeneğiniz vardır. Varsayılan Parameter nesnesini kullanabilir ve özelliğin SuppliersSelectedIndex değerini ObjectDataSource DefaultValue olay işleyicisindeki Parameter s Selecting özelliğine program aracılığıyla atayabiliriz. ObjectDataSource'nin parametrelerine program aracılığıyla değer atanması konusunda bilgilerinizi tazelemek için ObjectDataSource'un Parametre Değerlerini Program Aracılığıyla Ayarlama dersine yeniden göz atın.

Alternatif olarak, bir ControlParameter kullanabilir ve GridView s SuppliersSelectedValue başvurabiliriz (bkz. Şekil 19). GridView s SelectedValue özelliği, DataKeySelectedIndex karşılık gelen değeri döndürür. Bu seçeneğin çalışması için, düğmeye tıklandığında SelectedIndex GridView s ListProducts özelliğini seçilen satıra program aracılığıyla ayarlamamız gerekir. Ek bir fayda olarak, SelectedIndex öğesini ayarlayarak, seçili kayıt, SelectedRowStyle Teması'nda tanımlanan (sarı arka plan) DataWebControls kullanılacaktır.

Şekil 19: GridView'un SelectedValue değerini Parametre Kaynağı Olarak Belirtmek için ControlParameter Kullanma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Sihirbazı tamamladıktan sonra Visual Studio, ürün veri alanları için alanları otomatik olarak ekler. ProductName, CategoryName ve UnitPrice BoundField'leri dışındaki tüm alanları kaldırın ve HeaderText özelliklerini Ürün, Kategori ve Fiyat olarak değiştirin. UnitPrice BoundField'i değerinin para birimi olarak biçimlendirilmesi için yapılandırın. Bu değişiklikleri yaptıktan sonra Panel, GridView ve ObjectDataSource bildirim temelli işaretleme aşağıdaki gibi görünmelidir:

<asp:Panel runat="server" ID="ProductsBySupplierPanel" Visible="False">
    <h3>
        Products for the Selected Supplier</h3>
    <p>
        <asp:GridView ID="ProductsBySupplier" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="ProductsBySupplierDataSource" 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="ProductsBySupplierDataSource" runat="server" 
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
            <SelectParameters>
                <asp:ControlParameter ControlID="Suppliers" Name="supplierID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
</asp:Panel>

Bu alıştırmayı tamamlamak için, SelectedIndex düğmesine tıklandığında, GridView s SelectedSuppliersIndex özelliğini ProductsBySupplierPanel ve Visible Panel s True özelliğini ListProducts olarak ayarlamamız gerekir. Bunu başarmak için ListProducts Button Web denetimi Click etkinliği için bir olay işleyicisi oluşturun ve aşağıdaki kodu ekleyin:

Protected Sub ListProducts_Click(sender As Object, e As EventArgs) _
    Handles ListProducts.Click
    
    ' make sure one of the radio buttons has been selected
    If SuppliersSelectedIndex < 0 Then
        ChooseSupplierMsg.Visible = True
        ProductsBySupplierPanel.Visible = False
    Else
        ' Set the GridView's SelectedIndex
        Suppliers.SelectedIndex = SuppliersSelectedIndex
        ' Show the ProductsBySupplierPanel panel
        ProductsBySupplierPanel.Visible = True
    End If
End Sub

GridView'dan bir sağlayıcı seçilmediyse Etiket ChooseSupplierMsg görüntülenir ve Panel gizlenir ProductsBySupplierPanel . Aksi takdirde, bir sağlayıcı seçildiyse , ProductsBySupplierPanel görüntülenir ve GridView s SelectedIndex özelliği güncelleştirilir.

Şekil 20'de Bigfoot Breweries sağlayıcısı seçildikten ve Ürünleri Sayfada Göster düğmesine tıklandıktan sonra elde edilen sonuçlar gösterilmektedir.

Şekil 20: Bigfoot Breweries Tarafından Sağlanan Ürünler Aynı Sayfada Listelenmiştir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

Ayrıntılar DetailView ile Seçilebilir Ana Kılavuz Görünümü Kullanma öğreticisinde açıklandığı gibi, kayıtlar bir GridView'dan, özelliği olarak ayarlanmış olan bir CommandField ShowSelectButton kullanılarak seçilebilir. Ancak CommandField, düğmelerini normal basma düğmeleri, bağlantılar veya görüntüler olarak görüntüler. Alternatif satır seçimi kullanıcı arabirimi, her GridView satırında bir radyo düğmesi veya onay kutusu sağlamaktır. Bu öğreticide radyo düğmelerinden oluşan bir sütunun nasıl ekleneceğini inceledik.

Ne yazık ki, radyo düğmelerinden oluşan bir sütun eklemek beklediğiniz kadar basit veya basit değildir. Düğmeye basarak eklenebilecek yerleşik bir RadioButtonField yoktur ve TemplateField içerisinde RadioButton Web kontrolünün kullanılması kendi sorun kümesini beraberinde getirir. Sonunda, böyle bir arabirim sağlamak için özel DataControlField bir sınıf oluşturmamız veya olay sırasında uygun HTML'yi TemplateField'a eklemeye RowCreated başvurmamız gerekir.

Radyo düğmelerinden oluşan bir sütun eklemeyi keşfettikten sonra dikkatimizi onay kutularından oluşan bir sütun eklemeye çevirelim. Bir onay kutusu sütunuyla, kullanıcı bir veya daha fazla GridView satırı seçebilir ve ardından seçilen tüm satırlarda (web tabanlı bir e-posta istemcisinden bir e-posta kümesi seçme ve ardından seçili tüm e-postaları silmeyi seçme gibi) bazı işlemler gerçekleştirebilir. Sonraki öğreticide böyle bir sütunun nasıl ekleneceğini göreceğ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ışır. Son kitabı Sams Teach Yourself ASP.NET 24 Hours 2.0'dır. Ona adresinden mitchell@4GuysFromRolla.comulaşabilirsiniz.

Özel Teşekkürler

Bu eğitim serisi, birçok yararlı kişi tarafından incelendi. Bu kılavuzun baş inceleyicisi David Suru'ydu. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, mitchell@4GuysFromRolla.com'a bir mesaj bırakın.

ÖncekiSonraki