Radyo Düğmelerinden Oluşan GridView Sütunu Ekleme (C#)Adding a GridView Column of Radio Buttons (C#)

Scott Mitchell tarafındanby Scott Mitchell

Örnek uygulamayı indirin veya PDF 'yi indirinDownload Sample App or Download PDF

Bu öğretici, kullanıcıya GridView 'un tek bir satırını seçmenin daha sezgisel bir yolunu sağlamak için bir GridView denetimine radyo düğmelerinin bir sütununu ekleme konusunda bilgi sağlamaktadır.This tutorial looks at how to add a column of radio buttons to a GridView control to provide the user with a more intuitive way of selecting a single row of the GridView.

GirişIntroduction

GridView denetimi, yerleşik işlevsellikten oluşan harika bir işlem sunar.The GridView control offers a great deal of built-in functionality. Metin, resim, köprü ve düğme görüntülemek için bir dizi farklı alan içerir.It includes a number of different fields for displaying text, images, hyperlinks, and buttons. Daha fazla özelleştirme için şablonları destekler.It supports templates for further customization. Fareyi birkaç tıklamayla, her satırın bir düğme aracılığıyla seçilebileceği ya da düzenlemenin veya silme yeteneklerini etkinleştirebileceğiniz bir GridView oluşturmak mümkün.With a few clicks of the mouse, it s possible to make a GridView where each row can be selected via a button, or to enable editing or deleting capabilities. Sunulan özelliklerin Plethora olmasına rağmen, genellikle ek, desteklenmeyen özelliklerin eklenmesi gereken durumlar olacaktır.Despite the plethora of provided features, there will often be situations in which additional, non-supported features will need to be added. Bu öğreticide ve sonraki iki adımda, ek özellikleri eklemek için GridView s işlevselliğinin nasıl geliştireceğiz anlatılmaktadır.In this tutorial and the next two we'll examine how to enhance the GridView s functionality to include additional features.

Bu öğretici ve bir sonraki adım, satır seçme işlemini geliştirmeyle odaklanılmıştır.This tutorial and the next one focus on enhancing the row-selection process. Ayrıntı ayrıntısı görünümü Ile seçilebilir bir ana GridView kullanan ana/ayrıntıbölümünde incelenen gibi, GridView öğesine bir SELECT düğmesi Içeren bir CommandField ekleyebiliriz.As examined in the Master/Detail Using a Selectable Master GridView with a Details DetailView, we can add a CommandField to the GridView that includes a Select button. Tıklandığında, bir geri gönderme ve GridView s SelectedIndex özelliği, Select düğmesine tıklanmış olan satırın dizinine güncelleştirilir.When clicked, a postback ensues and the GridView s SelectedIndex property is updated to the index of the row whose Select button was clicked. Ayrıntı ayrıntısı görünümü öğreticisi Ile seçilebilir bir ana GridView kullanan ana/ayrıntı bölümünde, bu özelliğin seçili GridView satırı ayrıntılarını görüntülemek için nasıl kullanılacağını gördük.In the Master/Detail Using a Selectable Master GridView with a Details DetailView tutorial, we saw how to use this feature to display details for the selected GridView row.

Seçim düğmesi birçok durumda çalışırken, diğerleri için de çalışmayabilir.While the Select button works in many situations, it may not work as well for others. Düğme kullanmak yerine, genellikle seçim için iki diğer kullanıcı arabirimi öğesi kullanılır: radyo düğmesi ve onay kutusu.Rather than using a button, two other user interface elements are commonly used for selection: the radio button and checkbox. GridView 'u, bir seçim düğmesi yerine, her satır bir radyo düğmesi veya onay kutusu içerecek şekilde artırabilir.We can augment the GridView so that instead of a Select button, each row contains a radio button or checkbox. Kullanıcının GridView kayıtlardan yalnızca birini seçebileceğiniz senaryolarda, radyo düğmesi seçim düğmesi üzerinde tercih edilebilir.In scenarios where the user can only select one of the GridView records, the radio button might be preferred over the Select button. Kullanıcının, Web tabanlı bir e-posta uygulamasında gibi birden çok kaydı seçip seçmediği durumlarda, kullanıcının onay kutusu silmek üzere birden çok ileti seçmek istediği durumlarda, seçme düğmesi veya radyo düğmesinden kullanılamayan işlevselliği sunar. Kullanıcı arabirimleri.In situations where the user can potentially select multiple records such as in a web-based email application, where a user might want to select multiple messages to delete the checkbox offers functionality that is not available from the Select button or radio button user interfaces.

Bu öğretici, GridView 'a radyo düğmelerinin bir sütununu ekleme konusunda size bakar.This tutorial looks at how to add a column of radio buttons to the GridView. Devam öğreticisi, onay kutularını kullanmayı araştırır.The proceeding tutorial explores using checkboxes.

Adım 1: GridView Web sayfalarını geliştirme oluşturmaStep 1: Creating the Enhancing the GridView Web Pages

GridView 'u radyo düğmelerinin bir sütununu içerecek şekilde geliştirmeyle önce, Web sitesi projemizdeki Bu öğretici ve sonraki iki için gereken ASP.NET sayfalarını oluşturmak için önce bir süre sürme.Before we start enhancing the GridView to include a column of radio buttons, let s first take a moment to create the ASP.NET pages in our website project that we'll need for this tutorial and the next two. EnhancedGridViewadlı yeni bir klasör ekleyerek başlayın.Start by adding a new folder named EnhancedGridView. Ardından, aşağıdaki ASP.NET sayfalarını bu klasöre ekleyerek her bir sayfayı Site.master ana sayfasıyla ilişkilendirdiğinizden emin olun:Next, add the following ASP.NET pages to that folder, making sure to associate each page with the Site.master master page:

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

SqlDataSource ile Ilgili öğreticiler için ASP.NET sayfaları ekleyin

Şekil 1: SqlDataSource Ile ilgili öğreticiler Için ASP.NET sayfaları eklemeFigure 1: Add the ASP.NET Pages for the SqlDataSource-Related Tutorials

Diğer klasörlerde olduğu gibi, EnhancedGridView klasöründeki Default.aspx öğreticileri bölümündeki öğreticilerin listelecektir.Like in the other folders, Default.aspx in the EnhancedGridView folder will list the tutorials in its section. SectionLevelTutorialListing.ascx Kullanıcı denetiminin bu işlevselliği sağladığını hatırlayın.Recall that the SectionLevelTutorialListing.ascx User Control provides this functionality. Bu nedenle, bu kullanıcı denetimini Çözüm Gezgini sayfa s Tasarım görünümü üzerine sürükleyerek Default.aspx ekleyin.Therefore, add this User Control to Default.aspx by dragging it from the Solution Explorer onto the page s Design view.

SectionLevelTutorialListing. ascx Kullanıcı denetimini default. aspx öğesine eklemek Add the SectionLevelTutorialListing.ascx User Control to Default.aspx

Şekil 2: SectionLevelTutorialListing.ascx kullanıcı denetimini Default.aspx ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 2: Add the SectionLevelTutorialListing.ascx User Control to Default.aspx (Click to view full-size image)

Son olarak, bu dört sayfayı Web.sitemap dosyasına girdi olarak ekleyin.Lastly, add these four pages as entries to the Web.sitemap file. Özellikle, SqlDataSource denetim <siteMapNode>kullanarak aşağıdaki biçimlendirmeyi ekleyin:Specifically, add the following markup after the Using the SqlDataSource Control <siteMapNode>:

<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>

Web.sitemapgüncelleştirildikten sonra Öğreticiler Web sitesini bir tarayıcıdan görüntülemek için bir dakikanızı ayırın.After updating Web.sitemap, take a moment to view the tutorials website through a browser. Sol taraftaki menü artık öğreticilerin düzenlenmesine, eklemeye ve silinmesine yönelik öğeler içerir.The menu on the left now includes items for the editing, inserting, and deleting tutorials.

Site Haritası artık GridView öğreticilerini geliştirmeyle ilgili girişler Içeriyor

Şekil 3: site haritası artık GridView öğreticilerini geliştirmeyle Ilgili girişler içeriyorFigure 3: The Site Map Now Includes Entries for the Enhancing the GridView Tutorials

2. Adım: tedarikçileri bir GridView 'da görüntülemeStep 2: Displaying the Suppliers in a GridView

Bu öğretici için, her bir GridView satırı radyo düğmesi sunarak ABD 'deki tedarikçileri listeleyen bir GridView derlemenize olanak tanır.For this tutorial let s build a GridView that lists the suppliers from the USA, with each GridView row providing a radio button. Radyo düğmesi aracılığıyla bir tedarikçi seçtikten sonra, Kullanıcı bir düğmeye tıklayarak tedarikçinin s ürünlerini görüntüleyebilir.After selecting a supplier via the radio button, the user can view the supplier s products by clicking a button. Bu görev önemsiz bir işlem olsa da, özellikle karmaşık hale getirmek için çok sayıda alt tzellikleri vardır.While this task may sound trivial, there are a number of subtleties that make it particularly tricky. Bu alt tçilere göre Delve yapmadan önce, tedarikçilerini listelemek için öncelikle bir GridView 'u alın.Before we delve into these subtleties, let s first get a GridView listing the suppliers.

Araç kutusundan Tasarımcı üzerine bir GridView sürükleyerek EnhancedGridView klasöründeki RadioButtonField.aspx sayfasını açın.Start by opening the RadioButtonField.aspx page in the EnhancedGridView folder by dragging a GridView from the Toolbox onto the Designer. GridView s ID Suppliers ve akıllı etiketinden, yeni bir veri kaynağı oluşturmayı seçin.Set the GridView s ID to Suppliers and, from its smart tag, choose to create a new data source. Özellikle, SuppliersBLL nesnesinden verilerini çeken SuppliersDataSource adlı bir ObjectDataSource oluşturun.Specifically, create an ObjectDataSource named SuppliersDataSource that pulls its data from the SuppliersBLL object.

SuppliersDataSource adlı yeni bir ObjectDataSource oluşturma Create a New ObjectDataSource Named SuppliersDataSource

Şekil 4: SuppliersDataSource adlı yeni bir ObjectDataSource oluşturun (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 4: Create a New ObjectDataSource Named SuppliersDataSource (Click to view full-size image)

SuppliersBLL sınıfını kullanmak için ObjectDataSource 'ı yapılandırma Configure the ObjectDataSource to Use the SuppliersBLL Class

Şekil 5: ObjectDataSource 'ı SuppliersBLL sınıfını kullanacak şekilde yapılandırma (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 5: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

Bu tedarikçileri yalnızca ABD 'de listelemek istiyoruz, Seç sekmesinde açılan listeden GetSuppliersByCountry(country) yöntemini seçin.Since we only want to list those suppliers in the USA, choose the GetSuppliersByCountry(country) method from the drop-down list in the SELECT tab.

SuppliersBLL sınıfını kullanmak için ObjectDataSource 'ı yapılandırma Configure the ObjectDataSource to Use the SuppliersBLL Class

Şekil 6: SuppliersBLL sınıfını kullanmak için ObjectDataSource 'ı yapılandırma (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 6: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

GÜNCELLEŞTIRME sekmesinden (yok) seçeneğini belirleyin ve Ileri ' ye tıklayın.From the UPDATE tab, select the (None) option and click Next.

SuppliersBLL sınıfını kullanmak için ObjectDataSource 'ı yapılandırma Configure the ObjectDataSource to Use the SuppliersBLL Class

Şekil 7: ObjectDataSource 'ı SuppliersBLL sınıfını kullanacak şekilde yapılandırma (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 7: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

GetSuppliersByCountry(country) yöntemi bir parametreyi kabul ettiğinden, veri kaynağını yapılandırma Sihirbazı bize bu parametrenin kaynağını ister.Since the GetSuppliersByCountry(country) method accepts a parameter, the Configure Data Source wizard prompts us for the source of that parameter. Sabit kodlanmış bir değer belirtmek için (Bu örnekte, bu örnekte), parametre kaynağı açılır listesini hiçbiri olarak ayarlayın ve metin kutusuna varsayılan değeri girin.To specify a hard coded value ( USA, in this example), leave the Parameter source drop-down list set to None and enter the default value in the textbox. Sihirbazı tamamladığınızda son ' a tıklayın.Click Finish to complete the wizard.

, ülke parametresi için varsayılan değer olarak ABD 'yi kullanırUse USA as the Default Value for the country Parameter

Şekil 8: country parametresi Için varsayılan değer olarak USA kullanın (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 8: Use USA as the Default Value for the country Parameter (Click to view full-size image)

Sihirbazı tamamladıktan sonra GridView, her bir tedarikçi veri alanı için bir BoundField içerir.After completing the wizard, the GridView will include a BoundField for each of the supplier data fields. CompanyName, Cityve Country BoundFields hariç tümünü kaldırın ve CompanyName BoundFields HeaderText özelliğini tedarikçi olarak yeniden adlandırın.Remove all but the CompanyName, City, and Country BoundFields, and rename the CompanyName BoundFields HeaderText property to Supplier. Bunu yaptıktan sonra GridView ve ObjectDataSource açıklayıcı sözdizimi aşağıdakine benzer şekilde görünmelidir.After doing so, the GridView and ObjectDataSource declarative syntax should look similar to the following.

<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çili Tedarikçi ürünlerini Tedarikçi listesiyle aynı sayfada veya farklı bir sayfada görüntülemesine izin verin.For this tutorial, let s allow the user to view the selected supplier s products on the same page as the supplier list, or on a different page. Buna uyum sağlamak için, sayfaya iki düğme web denetimi ekleyin.To accommodate this, add two Button Web controls to the page. Bu iki düğmenin ID s ListProducts ve SendToProductsolarak ayarlandım ve ListProducts tıklandığında bir geri gönderme gerçekleştiğinde ve seçilen tedarikçinin s ürünleri aynı sayfada listelendiğinde, ancak SendToProducts tıklandığında, Kullanıcı ürünleri listeleyen başka bir sayfaya göre yatay olarak gösterilir.I ve set the ID s of these two Buttons to ListProducts and SendToProducts, with the idea that when ListProducts is clicked a postback will occur and the selected supplier s products will be listed on the same page, but when SendToProducts is clicked, the user will be whisked to a another page that lists the products.

Şekil 9 ' da, bir tarayıcıdan görüntülenirken Suppliers GridView ve iki düğme web denetimi gösterilmektedir.Figure 9 shows the Suppliers GridView and the two Button Web controls when viewed through a browser.

ABD 'deki Bu tedarikçilerin ad, şehir ve ülke bilgilerinin listelendiğini Those Suppliers from the USA Have Their Name, City, and Country Information Listed

Şekil 9: ABD 'Deki Bu tedarikçilerin ad, şehir ve ülke bilgileri listelenir (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 9: Those Suppliers from the USA Have Their Name, City, and Country Information Listed (Click to view full-size image)

3. Adım: radyo düğmelerinin bir sütununu eklemeStep 3: Adding a Column of Radio Buttons

Bu noktada, Suppliers GridView 'un ABD 'deki her bir tedarikçinin şirket adını, şehrini ve ülkesini görüntüleyen üç Boundalanı vardır.At this point the Suppliers GridView has three BoundFields displaying the company name, city, and country of each supplier in the USA. Ancak radyo düğmelerinin bir sütununda hala yok.It is still lacking a column of radio buttons, however. Ne yazık ki GridView, yerleşik bir RadioButtonField içermez; Aksi halde, yalnızca kılavuza eklemek ve bunu yapmak için yapmanız yeterli olacaktır.Unfortunately, the GridView doesn t include a built-in RadioButtonField, otherwise we could just add that to the grid and be done. Bunun yerine, bir TemplateField ekleyebilir ve ItemTemplate radyo düğmesini işleyecek şekilde yapılandırarak her bir GridView satırı için radyo düğmesi elde edebilirsiniz.Instead, we can add a TemplateField and configure its ItemTemplate to render a radio button, resulting in a radio button for each GridView row.

Başlangıçta, bir TemplateField 'ın ItemTemplate bir RadioButton Web denetimi ekleyerek istenen kullanıcı arabiriminin uygulanbileceğini varsayabilirsiniz.Initially, we might assume that the desired user interface can be implemented by adding a RadioButton Web control to the ItemTemplate of a TemplateField. Bu, GridView 'un her satırına tek bir radyo düğmesi ekler, ancak radyo düğmeleri gruplanamaz ve bu nedenle birbirini dışlamayan değildir.While this will indeed add a single radio button to each row of the GridView, the radio buttons cannot be grouped and therefore are not mutually exclusive. Diğer bir deyişle, bir son kullanıcı GridView 'dan aynı anda birden çok radyo düğmesini seçebiliyor.That is, an end user is able to select multiple radio buttons simultaneously from the GridView.

Bir TemplateField for RadioButton Web denetimlerinin kullanılması, ihtiyaç duyduğumuz işlevleri sunmasa da, sonuçta elde edilen radyo düğmelerinin neden gruplanmadığını incelerken bu yaklaşımı uygulayalım.Even though using a TemplateField of RadioButton Web controls does not offer the functionality we need, let s implement this approach, as it s worthwhile to examine why the resulting radio buttons are not grouped. Üretici GridView 'a bir TemplateField ekleyerek başlayın ve en soldaki alan haline gelir.Start by adding a TemplateField to the Suppliers GridView, making it the leftmost field. Ardından, GridView s akıllı etiketinden Şablonları Düzenle bağlantısına tıklayın ve araç kutusundan bir RadioButton Web denetimini TemplateField s ItemTemplate sürükleyin (bkz. Şekil 10).Next, from the GridView s smart tag, click the Edit Templates link and drag a RadioButton Web control from the Toolbox into the TemplateField s ItemTemplate (see Figure 10). RadioButton s ID özelliğini RowSelector ve GroupName özelliğini SuppliersGroupolarak ayarlayın.Set the RadioButton s ID property to RowSelector and the GroupName property to SuppliersGroup.

ItemTemplate 'e RadioButton Web denetimi ekleme Add a RadioButton Web Control to the ItemTemplate

Şekil 10: ItemTemplate bir RadioButton Web denetimi ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 10: Add a RadioButton Web Control to the ItemTemplate (Click to view full-size image)

Bu eklemeleri tasarımcı aracılığıyla yaptıktan sonra, GridView s işaretlerinizin aşağıdakine benzer şekilde görünmesi gerekir:After making these additions through the Designer, your GridView s markup should look similar to the following:

<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ılır.The RadioButton s GroupName property is what is used to group a series of radio buttons. Aynı GroupName değerine sahip tüm RadioButton denetimleri gruplandırılmış olarak kabul edilir; tek seferde bir gruptan yalnızca bir radyo düğmesi seçilebilir.All RadioButton controls with the same GroupName value are considered grouped; only one radio button can be selected from a group at a time. GroupName özelliği, işlenmiş radyo düğmesi s name özniteliği için değeri belirtir.The GroupName property specifies the value for the rendered radio button s name attribute. Tarayıcı radyo düğmeleri name özniteliklerini inceleyerek radyo düğmesi gruplamalarını tespit edin.The browser examines the radio buttons name attributes to determine the radio button groupings.

RadioButton Web denetimiyle ItemTemplateeklendiğinde, bu sayfayı bir tarayıcı aracılığıyla ziyaret edin ve kılavuz satırları ' nda radyo düğmelerine tıklayın.With the RadioButton Web control added to the ItemTemplate, visit this page through a browser and click on the radio buttons in the grid s rows. Radyo düğmelerinin nasıl gruplandırılmadığını, Şekil 11 ' in gösterdiği gibi tüm satırları seçmenizi olanaklı hale getirmeyi unutmayın.Notice how the radio buttons are not grouped, making it possible to select all of the rows, as Figure 11 shows.

GridView s radyo düğmeleri gruplandırılmıyorThe GridView s Radio Buttons are Not Grouped

Şekil 11: GridView s radyo düğmeleri gruplandırılmaz (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 11: The GridView s Radio Buttons are Not Grouped (Click to view full-size image)

Radyo düğmelerinin gruplandırılmadığı nedeni, aynı GroupName özellik ayarına sahip olmasına rağmen işlenen name özniteliklerinin farklı olmasından kaynaklanır.The reason the radio buttons are not grouped is because their rendered name attributes are different, despite having the same GroupName property setting. Bu farkları görmek için tarayıcıdan bir görünüm/kaynak yapın ve radyo düğmesi işaretlemesini inceleyin:To see these differences, do a View/Source from the browser and examine the radio button markup:

<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" />

name ve id özniteliklerinin her ikisi de Özellikler penceresi belirtilen şekilde tam değerler değildir, ancak başka bir sayıda ID değeri ile sona erer.Notice how both the name and id attributes are not the exact values as specified in the Properties window, but are prepended with a number of other ID values. Oluşturulan id ve name özniteliklerinin önüne eklenen ek ID değerleri, radyo düğmelerinin ID s GridViewRow, GridView s ID, Içerik denetim s IDve Web formu s ID' ı denetler.IDThe additional ID values added to the front of the rendered id and name attributes are the ID s of the radio buttons parent controls the GridViewRow s ID s, the GridView s ID, the Content control s ID, and the Web Form s ID. Bu ID s, GridView 'daki her işlenmiş Web denetiminin benzersiz bir id ve name değerlerine sahip olmasını sağlayacak şekilde eklenir.These ID s are added so that each rendered Web control in the GridView has a unique id and name values.

Her işlenen denetim farklı bir name ve id gerekir çünkü bu, tarayıcının istemci tarafında her denetimi benzersiz bir şekilde tanımlaması ve geri gönderme sırasında ne tür ya da değişikliğin gerçekleştiği Web sunucusuna nasıl tanımladığı.Each rendered control needs a different name and id because this is how the browser uniquely identifies each control on the client-side and how it identifies to the web server what action or change has occurred on postback. Örneğin, her bir RadioButton on Checked durumu değiştirildiğinde bazı sunucu tarafı kodları çalıştırmak istediğimiz düşünün.For example, imagine that we wanted to run some server-side code whenever a RadioButton s checked state was changed. Bunu, RadioButton s AutoPostBack özelliğini true olarak ayarlayıp CheckChanged olayı için bir olay işleyicisi oluşturarak gerçekleştirebiliriz.We could accomplish this by setting the RadioButton s AutoPostBack property to true and creating an event handler for the CheckChanged event. Ancak, tüm radyo düğmelerinin işlenen name ve id değerleri aynı olsaydı, geri göndermede hangi RadioButton 'ın tıklandığını belirleyemedik.However, if the rendered name and id values for all of the radio buttons were the same, on postback we could not determine what specific RadioButton was clicked.

Bunun kısaltması, RadioButton Web denetimini kullanarak bir GridView 'da radyo düğmelerinin bir sütununu oluşturmıyoruz.The short of it is that we cannot create a column of radio buttons in a GridView using the RadioButton Web control. Bunun yerine, her bir GridView satırına uygun biçimlendirmenin eklendiğinden emin olmak için, bunun yerine tasarlanmayan eski tekniklerini kullanacağız.Instead, we must use rather archaic techniques to ensure that the appropriate markup is injected into each GridView row.

Note

RadioButton Web denetimi gibi, bir şablona eklenen radyo düğmesi HTML denetimi benzersiz name özniteliğini içerir, böylece kılavuzda radyo düğmelerinin grubu çözülemez.Like the RadioButton Web control, the radio button HTML control, when added to a template, will include the unique name attribute, making the radio buttons in the grid ungrouped. HTML denetimleri hakkında bilginiz yoksa, özellikle ASP.NET 2,0 ' de HTML denetimleri nadiren kullanıldığı için bu nota göz ardı edebilirsiniz.If you are not familiar with HTML controls, feel free to disregard this note, as HTML controls are rarely used, especially in ASP.NET 2.0. Ancak daha fazla bilgi edinmek istiyorsanız, bkz. K. Scott Allen s blog girişi Web denetimleri ve HTML denetimleri.But if you are interested in learning more, see K. Scott Allen s blog entry Web Controls and HTML Controls.

Radyo düğmesi Işaretlemesi eklemek için değişmez bir denetim kullanmaUsing a Literal Control to Inject Radio Button Markup

GridView içindeki tüm radyo düğmelerini doğru bir şekilde gruplandırmak için radyo düğmeleri işaretlemesini ItemTemplateiçine el ile eklemeniz gerekir.In order to correctly group all of the radio buttons within the GridView, we need to manually inject the radio buttons markup into the ItemTemplate. Her radyo düğmesi aynı name özniteliğine ihtiyaç duyuyor, ancak benzersiz bir id özniteliğine sahip olmalıdır (bir radyo düğmesine istemci tarafı betiği aracılığıyla erişmek istiyoruz).Each radio button needs the same name attribute, but should have a unique id attribute (in case we want to access a radio button via client-side script). Bir Kullanıcı bir radyo düğmesini seçip sayfayı geri gönderdikten sonra, tarayıcı seçili radyo düğmesi s value özniteliğinin değerini geri gönderir.After a user selects a radio button and posts back the page, the browser will send back the value of the selected radio button s value attribute. Bu nedenle, her radyo düğmesi için benzersiz bir value özniteliği gerekir.Therefore, each radio button will need a unique value attribute. Son olarak, geri göndermede checked özniteliğini seçili bir radyo düğmesine eklediğinizden emin olmamız gerekir, aksi takdirde Kullanıcı bir seçim ve geri gönderdikten sonra radyo düğmeleri varsayılan durumlarına (tümü seçilmemiş) döndürülür.Finally, on postback we need to make sure to add the checked attribute to the one radio button that is selected, otherwise after the user makes a selection and posts back, the radio buttons will return to their default state (all unselected).

Bir şablona alt düzey biçimlendirme eklemek için alınabilecek iki yaklaşım vardır.There are two approaches that can be taken in order to inject low-level markup into a template. Bunlardan biri, arka plan kod sınıfında tanımlanan biçimlendirme yöntemlerine yapılan biçimlendirme ve çağrılar karışımı olarak yapılır.One is to do a mix of markup and calls to formatting methods defined in the code-behind class. Bu teknik ilk olarak GridView denetim öğreticisindeki TemplateFields kullanılarak anlatılmıştır.This technique was first discussed in the Using TemplateFields in the GridView Control tutorial. Bizim örneğimizde şöyle görünebilir:In our case it might look something like:

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

Burada GetUniqueRadioButton ve GetRadioButtonValue, her radyo düğmesi için uygun id ve value öznitelik değerlerini döndüren arka plan kod sınıfında tanımlanmış yöntemler olacaktır.Here, GetUniqueRadioButton and GetRadioButtonValue would be methods defined in the code-behind class that returned the appropriate id and value attribute values for each radio button. Bu yaklaşım, id ve value özniteliklerinin atanması için iyi bir sonuç verir, checked ancak veri bağlama söz dizimi yalnızca veriler GridView 'a ilk bağlandığında yürütülür.This approach works well for assigning the id and value attributes, but falls short when needing to specify the checked attribute value because the databinding syntax is only executed when data is first bound to the GridView. Bu nedenle, GridView 'un görünüm durumu etkinse, biçimlendirme yöntemleri yalnızca sayfa ilk yüklendiğinde (veya GridView veri kaynağına açıkça yeniden bağlandığında) harekete geçilir ve bu nedenle checked özniteliğini ayarlayan işlev geri gönderme sırasında çağrılmaz.Therefore, if the GridView has view state enabled, the formatting methods will only fire when the page is first loaded (or when the GridView is explicitly rebound to the data source), and therefore the function that sets the checked attribute won't be called on postback. Bu, daha hafif bir sorun ve bu makalenin kapsamına çok daha fazlaIt s a rather subtle problem and a bit beyond the scope of this article, so I'll leave it at this. Bununla birlikte, yukarıdaki yaklaşımı kullanmayı ve bunu üzerinde takılcağınız noktaya kadar çalıştırmayı öneririz.I do, however, encourage you to try using the above approach and work it through to the point where you'll get stuck. Bu tür bir alıştırma, çalışma sürümüne daha yakın bir işlem yapmanıza rağmen GridView ve veri bağlama yaşam döngüsünün daha derin bir şekilde anlaşılmasına yardımcı olur.While such an exercise won't get you any closer to a working version, it will help foster a deeper understanding of the GridView and the databinding lifecycle.

Bir şablonda ekleme özel, düşük düzey biçimlendirme ve bu öğreticide kullanacağınız yaklaşım için diğer yaklaşım, şablona bir değişmez değer denetimi eklemektir.The other approach to injecting custom, low-level markup in a template and the approach that we'll be using for this tutorial is to add a Literal control to the template. Ardından, GridView s RowCreated veya RowDataBound olay işleyicisinde, sabit değer denetimine programlı olarak erişilebilir ve Text özelliği, yayma için biçimlendirme olarak ayarlanabilir.Then, in the GridView s RowCreated or RowDataBound event handler, the Literal control can be programmatically accessed and its Text property set to the markup to emit.

' I TemplateField s ItemTemplatekaldırarak bir değişmez değer denetimiyle değiştirerek başlayın.Start by removing the RadioButton from the TemplateField s ItemTemplate, replacing it with a Literal control. Değişmez denetim s ID RadioButtonMarkupolarak ayarlayın.Set the Literal control s ID to RadioButtonMarkup.

ItemTemplate 'e sabit bir denetim eklemek Add a Literal Control to the ItemTemplate

Şekil 12: ItemTemplate değişmez değer denetimi ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 12: Add a Literal Control to the ItemTemplate (Click to view full-size image)

Sonra, GridView s RowCreated olayı için bir olay işleyicisi oluşturun.Next, create an event handler for the GridView s RowCreated event. RowCreated olay, eklenen her satır için bir kez harekete geçirilir, verilerin GridView 'a yeniden bağlanıp bağlanmadığını belirtir.The RowCreated event fires once for every row added, whether or not the data is being rebound to the GridView. Diğer bir deyişle, veriler görünüm durumundan yeniden yüklendiğinde RowCreated olayı ateşlenir ve bu, RowDataBound yerine bu işlemi kullandığımızda olur (yalnızca veri Web denetimine açıkça bağlandığında harekete geçirilir).That means that even on a postback when the data is reloaded from view state, the RowCreated event still fires and this is the reason we are using it instead of RowDataBound (which fires only when the data is explicitly bound to the data Web control).

Bu olay işleyicisinde yalnızca bir veri satırıyla ilgilendiğimiz takdirde devam etmek istiyoruz.In this event handler, we only want to proceed if we re dealing with a data row. Her veri satırı için, RadioButtonMarkup sabit denetimine programlı bir şekilde başvurmak ve Text özelliğini yayma için biçimlendirme olarak ayarlamak istiyoruz.For each data row we want to programmatically reference the RadioButtonMarkup Literal control and set its Text property to the markup to emit. Aşağıdaki kodda gösterildiği gibi, bulunan biçimlendirme name id SuppliersGroupözniteliği RowSelectorXolarak ayarlanmış bir radyo düğmesi oluşturur; burada X , GridView satırının dizinidir ve value özniteliği GridView satırının dizinine ayarlanır. buAs the following code shows, the markup emitted creates a radio button whose name attribute is set to SuppliersGroup, whose id attribute is set to RowSelectorX, where X is the index of the GridView row, and whose value attribute is set to the index of the GridView row.

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // 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);
    }
}

Bir GridView satırı seçildiğinde ve geri gönderme gerçekleştiğinde, seçili tedarikçinin SupplierID ilgileniyoruz.When a GridView row is selected and a postback occurs, we are interested in the SupplierID of the selected supplier. Bu nedenle, birisi her radyo düğmesinin değerinin gerçek SupplierID (GridView satırının dizini yerine) olması gerektiğini düşünebilir.Therefore, one might think that the value of each radio button should be the actual SupplierID (rather than the index of the GridView row). Bu, belirli koşullarda çalışacağından, bir SupplierIDbenimseme ve işlemeyi bir güvenlik riski oluşturur.While this may work in certain circumstances, it would be a security risk to blindly accept and process a SupplierID. Örneğin, GridView 'umuz yalnızca ABD 'deki tedarikçileri listeler.Our GridView, for example, lists only those suppliers in the USA. Ancak, SupplierID doğrudan radyo düğmesinden geçirildiyse, yanlış bir kullanıcının geri gönderme sırasında geri gönderilen SupplierID değerini değiştirme işlemi durdurulacak.However, if the SupplierID is passed directly from the radio button, what s to stop a mischievous user from manipulating the SupplierID value sent back on postback? valueolarak satır dizinini kullanarak ve sonra DataKeys koleksiyonundan geri göndermede SupplierID alırken, kullanıcının yalnızca GridView satırlarından biriyle ilişkili SupplierID değerlerinden birini kullandığından emin olabilirsiniz.By using the row index as the value, and then getting the SupplierID on postback from the DataKeys collection, we can ensure that the user is only using one of the SupplierID values associated with one of the GridView rows.

Bu olay işleyicisi kodu eklendikten sonra, sayfayı bir tarayıcıda sınamak için bir dakikanızı alın.After adding this event handler code, take a minute to test out the page in a browser. İlk olarak, kılavuzda yalnızca bir radyo düğmesinin seçilebileceğini unutmayın.First, note that only one radio button in the grid can be selected at a time. Ancak, bir radyo düğmesini seçip düğmelerden birine tıkladığınızda, geri gönderme gerçekleşir ve radyo düğmelerinin hepsi başlangıçtaki durumlarına geri döndürülür (yani, geri gönderme sırasında seçili radyo düğmesi artık seçili değildir).However, when selecting a radio button and clicking one of the buttons, a postback occurs and the radio buttons all revert to their initial state (that is, on postback, the selected radio button is no longer selected). Bunu yapmak için, RowCreated olay işleyicisini, geri gönderiden gönderilen seçili radyo düğmesi dizinini inceleyerek ve checked="checked" özniteliğini satır Dizin eşleştirmelerinin verilmiş biçimlendirmesine ekleyerek geliştirmemiz gerekir.To fix this, we need to augment the RowCreated event handler so that it inspects the selected radio button index sent from the postback and adds the checked="checked" attribute to the emitted markup of the row index matches.

Geri gönderme gerçekleştiğinde, tarayıcı name geri gönderir ve seçilen radyo düğmesinin value.When a postback occurs, the browser sends back the name and value of the selected radio button. Değer, Request.Form["name"]kullanılarak programlı bir şekilde alınabilir.The value can be programmatically retrieved using Request.Form["name"]. Request.Form özelliği , form değişkenlerini temsil eden bir NameValueCollection sağlar.The Request.Form property provides a NameValueCollection representing the form variables. Form değişkenleri, Web sayfasındaki form alanlarının adları ve değerleridir ve her geri gönderme başarılı olduğunda Web tarayıcısı tarafından geri gönderilir.The form variables are the names and values of the form fields in the web page, and are sent back by the web browser whenever a postback ensues. GridView 'daki radyo düğmelerinin işlenmiş name özniteliği SuppliersGroup, Web sayfası geri gönderildiğinde tarayıcı Web sunucusuna geri SuppliersGroup=valueOfSelectedRadioButton gönderir (diğer form alanlarıyla birlikte).Because the rendered name attribute of the radio buttons in the GridView is SuppliersGroup, when the web page is posted back the browser will send SuppliersGroup=valueOfSelectedRadioButton back to the web server (along with the other form fields). Bu bilgilere daha sonra, şu kullanılarak Request.Form özelliğinden erişilebilir: Request.Form["SuppliersGroup"].This information can then be accessed from the Request.Form property using: Request.Form["SuppliersGroup"].

Seçilen radyo düğmesi dizinini yalnızca RowCreated olay işleyicisinde değil, ancak düğme Web denetimlerine yönelik Click olay işleyicilerde belirleyebilmemiz için, radyo düğmelerinden biri seçili değilse ve seçili dizin ' i -1 döndüren arka plan kod sınıfına bir SuppliersSelectedIndex özelliği ekleyelim.Since we'll need to determine the selected radio button index not only in the RowCreated event handler, but in the Click event handlers for the Button Web controls, let s add a SuppliersSelectedIndex property to the code-behind class that returns -1 if no radio button was selected and the selected index if one of the radio buttons is selected.

private int SuppliersSelectedIndex
{
    get
    {
        if (string.IsNullOrEmpty(Request.Form["SuppliersGroup"]))
            return -1;
        else
            return Convert.ToInt32(Request.Form["SuppliersGroup"]);
    }
}

Bu özellik eklendikten sonra, SuppliersSelectedIndex e.Row.RowIndexeşitse, RowCreated olay işleyicisine checked="checked" işaretlemesini eklemeyi biliyoruz.With this property added, we know to add the checked="checked" markup in the RowCreated event handler when SuppliersSelectedIndex equals e.Row.RowIndex. Olay işleyicisini şu mantığı içerecek şekilde güncelleştirin:Update the event handler to include this logic:

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // 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)
            output.Text += @" checked="checked"";
        // Add the closing tag
        output.Text += " />";
    }
}

Bu değişiklik ile, geri gönderme sonrasında seçili radyo düğmesi seçili kalır.With this change, the selected radio button remains selected after a postback. Hangi radyo düğmesinin seçili olduğunu belirtme imkanına göre, sayfa ilk kez ziyaret edildiğinde, ilk GridView satırı s radyo düğmesi seçildiğinde (varsayılan olarak, geçerli olan radyo düğmelerinden hiçbiri değil) seçili davranış).Now that we have the ability to specify what radio button is selected, we could change the behavior so that when the page was first visited, the first GridView row s radio button was selected (rather than having no radio buttons selected by default, which is the current behavior). Varsayılan olarak ilk radyo düğmesini seçili olması için if (SuppliersSelectedIndex == e.Row.RowIndex) deyiminizi şu şekilde değiştirmeniz yeterlidir: if (SuppliersSelectedIndex == e.Row.RowIndex || (!Page.IsPostBack && e.Row.RowIndex == 0)).To have the first radio button selected by default, simply change the if (SuppliersSelectedIndex == e.Row.RowIndex) statement to the following: if (SuppliersSelectedIndex == e.Row.RowIndex || (!Page.IsPostBack && e.Row.RowIndex == 0)).

Bu noktada, GridView 'a gruplanmış radyo düğmelerinin bir sütununu, tek bir GridView satırının seçilmesine ve geri göndermeler arasında hatırlanmasını sağlayan bir sütun ekledik.At this point we have added a column of grouped radio buttons to the GridView that allows for a single GridView row to be selected and remembered across postbacks. Sonraki adımlarımız, seçilen tedarikçi tarafından sunulan ürünleri görüntülemektir.Our next steps are to display the products provided by the selected supplier. Adım 4 ' te, kullanıcının seçili SupplierIDgöndermek için başka bir sayfaya nasıl yönlendirildiğinin görüyoruz.In Step 4 we'll see how to redirect the user to another page, sending along the selected SupplierID. 5. adımda, seçilen tedarikçinin ürünlerini aynı sayfada bir GridView 'da nasıl görüntülerimize değineceğiz.In Step 5, we'll see how to display the selected supplier s products in a GridView on the same page.

Note

Bir TemplateField kullanmak yerine (Bu uzun adım 3 ' ün odağı), uygun Kullanıcı arabirimini ve işlevselliğini işleyen özel bir DataControlField sınıfı oluşturabiliyoruz.Rather than using a TemplateField (the focus of this lengthy Step 3), we could create a custom DataControlField class that renders the appropriate user interface and functionality. DataControlField sınıfı , BoundField, CheckBoxField, TemplateField ve diğer yerleşik GridView ve DetailsView alanlarının türetebileceği temel sınıftır.The DataControlField class is the base class from which the BoundField, CheckBoxField, TemplateField, and other built-in GridView and DetailsView fields derive. Özel bir DataControlField sınıfı oluşturmak, radyo düğmelerinin sütununun yalnızca bildirime dayalı söz dizimi kullanılarak eklenebileceği anlamına gelir ve ayrıca diğer Web sayfalarındaki ve diğer Web uygulamalarında işlevselliğin çoğaltılmasını önemli ölçüde daha kolay hale getirir.Creating a custom DataControlField class would mean that the column of radio buttons could be added just using declarative syntax, and would also make replicating the functionality on other web pages and other web applications significantly easier.

ASP.NET ' de özel, derlenmiş denetimler oluşturduysanız, bunu yapmanın, dikkatli bir iş miktarı gerektirdiğini ve bunu dikkatle ele almanız gereken alt tleler ve uç durumlarının bir konağından bulunduğunu bilirsiniz.If you ve ever created custom, compiled controls in ASP.NET, however, you know that doing so requires a fair amount of legwork and carries with it a host of subtleties and edge cases that must be carefully handled. Bu nedenle, radyo düğmelerinin bir sütununu şimdilik özel bir DataControlField sınıfı olarak uygulamamız ve TemplateField seçeneğiyle kontrol edeceğiz.Therefore, we will forgo implementing a column of radio buttons as a custom DataControlField class for now and stick with the TemplateField option. Belki de gelecekteki bir öğreticide özel DataControlField sınıfları oluşturma, kullanma ve dağıtma şansınız vardır!Perhaps we'll have the chance to explore creating, using, and deploying custom DataControlField classes in a future tutorial!

4. Adım: seçili tedarikçinin ürünlerini ayrı bir sayfada görüntülemeStep 4: Displaying the Selected Supplier s Products in a Separate Page

Kullanıcı bir GridView satırı seçtikten sonra seçili tedarikçinin ürünlerini göstermemiz gerekiyor.After the user has selected a GridView row, we need to show the selected supplier s products. Bazı durumlarda, bu ürünleri ayrı bir sayfada göstermek isteyebilir, diğerleri de aynı sayfada bunu yapmayı tercih edebiliriz.In some circumstances, we may want to display these products in a separate page, in others we might prefer to do it in the same page. İlk olarak ürünlerin ayrı bir sayfada nasıl görüntüleneceğini inceleyin; 5. adımda seçili tedarikçinin ürünlerini göstermek için RadioButtonField.aspx GridView ekleme bölümüne bakacağız.Let s first examine how to display the products in a separate page; in Step 5 we'll look at adding a GridView to RadioButtonField.aspx to display the selected supplier s products.

Şu anda sayfada ListProducts ve SendToProductsiki düğme web denetimi vardır.Currently there are two Button Web controls on the page ListProducts and SendToProducts. SendToProducts düğmesine tıklandığında, kullanıcıyı ~/Filtering/ProductsForSupplierDetails.aspxgöndermek istiyoruz.When the SendToProducts Button is clicked, we want to send the user to ~/Filtering/ProductsForSupplierDetails.aspx. Bu sayfa, Iki sayfa üzerinde ana/ayrıntı filtrelemesinde oluşturulmuştur ve SupplierIDadlı QueryString alanı aracılığıyla SupplierID geçirildiği tedarikçinin ürünlerini görüntüler.This page was created in the Master/Detail Filtering Across Two Pages tutorial and displays the products for the supplier whose SupplierID is passed through the querystring field named SupplierID.

Bu işlevi sağlamak için SendToProducts Button s Click olayı için bir olay işleyicisi oluşturun.To provide this functionality, create an event handler for the SendToProducts Button s Click event. Adım 3 ' te, radyo düğmesi seçili olan satırın dizinini döndüren SuppliersSelectedIndex özelliğini ekledik.In Step 3 we added the SuppliersSelectedIndex property, which returns the index of the row whose radio button is selected. Karşılık gelen SupplierID, GridView s DataKeys koleksiyonundan alınabilir ve Kullanıcı daha sonra Response.Redirect("url")kullanılarak ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID gönderilebilir.The corresponding SupplierID can be retrieved from the GridView s DataKeys collection and the user can then be sent to ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID using Response.Redirect("url").

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    int supplierID = 
        Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
    Response.Redirect(
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
        + supplierID);
    }
}

Bu kod, GridView 'dan seçilmiş olan radyo düğmelerinden biri seçildiği sürece wonderfully ile işe yarar.This code works wonderfully as long as one of the radio buttons is selected from the GridView. Başlangıçta GridView 'un herhangi bir radyo düğmesi yoksa ve Kullanıcı SendToProducts düğmesine tıkladığında, -1 DataKeys koleksiyonunun dizin aralığının dışında olduğundan bir özel durum oluşturulmasına neden olacak SuppliersSelectedIndex -1olur.If, initially, the GridView does not have any radio buttons selected, and the user clicks the SendToProducts button, SuppliersSelectedIndex will be -1, which will cause an exception to be thrown since -1 is out of the index range of the DataKeys collection. Bu, bununla ilgili bir sorun değildir, ancak adım 3 ' te anlatıldığı gibi RowCreated olay işleyicisini güncelleştirmeye karar verdiyseniz, ilk olarak GridView 'un seçtiği ilk radyo düğmesine sahip olacak.This is not a concern, however, if you decided to update the RowCreated event handler as discussed in Step 3 so as to have the first radio button in the GridView initially selected.

SuppliersSelectedIndex bir -1değerine uyum sağlamak için GridView 'un üzerindeki sayfaya bir etiket Web denetimi ekleyin.To accommodate a SuppliersSelectedIndex value of -1, add a Label Web control to the page above the GridView. ID özelliğini ChooseSupplierMsg, CssClass özelliğini Warning, EnableViewState ve Visible özelliklerini falseve Text özelliğini olarak ayarlayın.Set its ID property to ChooseSupplierMsg, its CssClass property to Warning, its EnableViewState and Visible properties to false, and its Text property to Please choose a supplier from the grid. CSS sınıfı Warning metni kırmızı, italik, kalın, büyük yazı tipiyle görüntüler ve Styles.csstanımlanmıştır.The CSS class Warning displays text in a red, italic, bold, large font and is defined in Styles.css. EnableViewState ve Visible özelliklerini falseolarak ayarlayarak, etiket yalnızca denetim s Visible özelliğinin program aracılığıyla trueolarak ayarlandığı geri göndermeler dışında işlenmez.By setting the EnableViewState and Visible properties to false, the Label is not rendered except for only those postbacks where the control s Visible property is programmatically set to true.

GridView üzerinde bir etiket Web denetimi eklemek Add a Label Web Control Above the GridView

Şekil 13: GridView 'un üzerine bir etiket Web denetimi ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 13: Add a Label Web Control Above the GridView (Click to view full-size image)

Daha sonra, SuppliersSelectedIndex sıfırdan küçükse ChooseSupplierMsg etiketini göstermek için Click olay işleyicisini daha sonra ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID başka bir şekilde yeniden yönlendirin.Next, augment the Click event handler to display the ChooseSupplierMsg Label if SuppliersSelectedIndex is less than zero, and redirect the user to ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID otherwise.

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
        ChooseSupplierMsg.Visible = true;
    else
    {
        // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        int supplierID = 
            Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
        Response.Redirect(
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
            + supplierID);
    }
}

Bir tarayıcıdaki sayfayı ziyaret edin ve GridView 'dan bir tedarikçi seçmeden önce SendToProducts düğmesine tıklayın.Visit the page in a browser and click the SendToProducts button before selecting a supplier from the GridView. Şekil 14 ' te gösterildiği gibi bu, ChooseSupplierMsg etiketini gösterir.As Figure 14 shows, this displays the ChooseSupplierMsg label. Sonra bir sağlayıcı seçin ve SendToProducts düğmesine tıklayın.Next, select a supplier and click the SendToProducts button. Bu işlem, seçili tedarikçinin sağladığı ürünleri listeleyen bir sayfaya yanıt vermez.This will whisk you to a page that lists the products supplied by the selected supplier. Şekil 15 ' te, Bigfoot Brewerıes tedarikçisi seçildiğinde ProductsForSupplierDetails.aspx sayfası gösterilir.Figure 15 shows the ProductsForSupplierDetails.aspx page when the Bigfoot Breweries supplier was selected.

ChooseSupplierMsg etiketi, hiçbir tedarikçi seçilmemişse görüntülenir The ChooseSupplierMsg Label is Displayed if No Supplier is Selected

Şekil 14: seçili bir sağlayıcı yoksa ChooseSupplierMsg etiketi görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 14: The ChooseSupplierMsg Label is Displayed if No Supplier is Selected (Click to view full-size image)

seçilen tedarikçinin ürünleri ProductsForSupplierDetails. aspx içinde görüntülenirThe Selected Supplier s Products are Displayed in ProductsForSupplierDetails.aspx

Şekil 15: seçili tedarikçinin ürünleri ProductsForSupplierDetails.aspx görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 15: The Selected Supplier s Products are Displayed in ProductsForSupplierDetails.aspx (Click to view full-size image)

5. Adım: seçili tedarikçinin ürünlerini aynı sayfada görüntülemeStep 5: Displaying the Selected Supplier s Products on the Same Page

4. adımda, seçilen tedarikçinin ürünlerini göstermek için kullanıcının başka bir Web sayfasına nasıl gönderileceğini gördük.In Step 4 we saw how to send the user to another web page to display the selected supplier s products. Alternatif olarak, seçilen tedarikçinin ürünleri aynı sayfada görüntülenebilir.Alternatively, the selected supplier s products can be displayed on the same page. Bunu göstermek için, seçili tedarikçinin ürünlerini göstermek üzere RadioButtonField.aspx başka bir GridView ekleyeceğiz.To illustrate this, we'll add another GridView to RadioButtonField.aspx to display the selected supplier s products.

Bu ürünlerin yalnızca bir tedarikçi seçildikten sonra görüntülenmesini istiyoruz, Suppliers GridView 'un altına bir panel Web denetimi ekleyin, ID ProductsBySupplierPanel ve Visible özelliği falseolarak ayarlanıyor.Since we only want this GridView of products to display once a supplier has been selected, add a Panel Web control beneath the Suppliers GridView, setting its ID to ProductsBySupplierPanel and its Visible property to false. Panelin içinde, seçili Tedarikçiye ait metin ürünlerini ve ardından ProductsBySupplieradlı GridView 'u ekleyin.Within the Panel, add the text Products for the Selected Supplier, followed by a GridView named ProductsBySupplier. GridView s akıllı etiketinden ProductsBySupplierDataSourceadlı yeni bir ObjectDataSource 'a bağlamayı seçin.From the GridView s smart tag, choose to bind it to a new ObjectDataSource named ProductsBySupplierDataSource.

Productsbytedarikçinin GridView öğesini yeni bir ObjectDataSource 'a bağlamaBind the ProductsBySupplier GridView to a New ObjectDataSource

Şekil 16: ProductsBySupplier GridView 'ı yeni bir ObjectDataSource 'a bağlama (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 16: Bind the ProductsBySupplier GridView to a New ObjectDataSource (Click to view full-size image)

Sonra, ProductsBLL sınıfını kullanmak için ObjectDataSource 'u yapılandırın.Next, configure the ObjectDataSource to use the ProductsBLL class. Yalnızca seçili tedarikçi tarafından sunulan ürünleri almak istediğimiz için, ObjectDataSource 'un verileri almak üzere GetProductsBySupplierID(supplierID) metodunu çağırmasını belirtin.Since we only want to retrieve those products provided by the selected supplier, specify that the ObjectDataSource should invoke the GetProductsBySupplierID(supplierID) method to retrieve its data. GÜNCELLEŞTIRME, ekleme ve SILME sekmelerinden açılan listelerden (hiçbiri) seçeneğini belirleyin.Select (None) from the drop-down lists in the UPDATE, INSERT, and DELETE tabs.

ObjectDataSource 'ı Getproductsbysupplierıd (SupplierID) yöntemini kullanacak şekilde yapılandırmak Configure the ObjectDataSource to Use the GetProductsBySupplierID(supplierID) Method

Şekil 17: GetProductsBySupplierID(supplierID) yöntemini kullanmak için ObjectDataSource 'ı yapılandırın (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 17: Configure the ObjectDataSource to Use the GetProductsBySupplierID(supplierID) Method (Click to view full-size image)

GÜNCELLEŞTIRME, ekleme ve SILME sekmelerinde açılan listeleri (yok) olarak ayarlamak Set the Drop-Down Lists to (None) in the UPDATE, INSERT, and DELETE Tabs

Şekil 18: GÜNCELLEŞTIRME, ekleme ve silme sekmelerinde aşağı açılan listeleri (yok) olarak ayarlama (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 18: Set the Drop-Down Lists to (None) in the UPDATE, INSERT, and DELETE Tabs (Click to view full-size image)

Seçme, GÜNCELLEŞTIRME, ekleme ve SILME sekmelerini yapılandırdıktan sonra Ileri ' ye tıklayın.After configuring the SELECT, UPDATE, INSERT, and DELETE tabs, click Next. GetProductsBySupplierID(supplierID) yöntemi bir giriş parametresi beklediği için, veri kaynağı oluşturma Sihirbazı bize parametre değeri kaynağını belirtmemizi ister.Since the GetProductsBySupplierID(supplierID) method expects an input parameter, the Create Data Source wizard prompts us to specify the source for the parameter s value.

Burada parametre değeri kaynağını belirtirken burada birkaç seçenek sunuyoruz.We have a couple of options here in specifying the source of the parameter s value. Varsayılan Parameter nesnesini kullanabiliriz ve SuppliersSelectedIndex özelliğinin değerini, ObjectDataSource s Selecting olay işleyicisindeki parametre s DefaultValue özelliğine atayabilirsiniz.We could use the default Parameter object, and programmatically assign the value of the SuppliersSelectedIndex property to the Parameter s DefaultValue property in the ObjectDataSource s Selecting event handler. Program aracılığıyla bir Yenileyici için ObjectDataSource 'un parametre değerleri öğreticisini programlı bir şekilde ayarlamaya yönelik olarak, ObjectDataSource 'un parametrelerine bir değer atayarakRefer back to the Programmatically Setting the ObjectDataSource's Parameter Values tutorial for a refresher on programmatically assigning values to the ObjectDataSource s parameters.

Alternatif olarak, bir ControlParameter kullanabilir ve Suppliers GridView s SelectedValue özelliğine başvurabilirsiniz (bkz. Şekil 19).Alternatively, we can use a ControlParameter and refer to the Suppliers GridView s SelectedValue property (see Figure 19). GridView s SelectedValue özelliği, SelectedIndex özelliğinekarşılık gelen DataKey değerini döndürür.The GridView s SelectedValue property returns the DataKey value corresponding to the SelectedIndex property. Bu seçeneğin çalışması için, ListProducts düğmesine tıklandığında GridView s SelectedIndex özelliğini seçilen satıra program aracılığıyla ayarlamanız gerekir.In order for this option to work, we need to programmatically set the GridView s SelectedIndex property to the selected row when the ListProducts button is clicked. Ek bir avantaj olarak, SelectedIndexayarlayarak, seçilen kayıt DataWebControls teması içinde tanımlanan SelectedRowStyle alır (sarı bir arka plan).As an added benefit, by setting the SelectedIndex, the selected record will take on the SelectedRowStyle defined in the DataWebControls Theme (a yellow background).

bir ControlParameter kullanarak, parametre kaynağı olarak bir GridView öğeleriUse a ControlParameter to Specify the GridView s SelectedValue as the Parameter Source

Şekil 19: bir ControlParameter 'U parametre kaynağı olarak (tam boyutlu görüntüyü görüntülemek Için tıklayın) belirtmek için kullanınFigure 19: Use a ControlParameter to Specify the GridView s SelectedValue as the Parameter Source (Click to view full-size image)

Sihirbazı tamamladıktan sonra, Visual Studio ürün verileri alanları için otomatik olarak alanlar ekler.Upon completing the wizard, Visual Studio will automatically add fields for the product s data fields. ProductName, CategoryNameve UnitPrice BoundFields hariç tümünü kaldırın ve HeaderText özelliklerini ürün, kategori ve fiyat olarak değiştirin.Remove all but the ProductName, CategoryName, and UnitPrice BoundFields, and change the HeaderText properties to Product, Category, and Price. UnitPrice BoundField değerini, değeri bir para birimi olarak biçimlendirilecek şekilde yapılandırın.Configure the UnitPrice BoundField so that its value is formatted as a currency. Bu değişiklikleri yaptıktan sonra, panel, GridView ve ObjectDataSource tarafından bildirim temelli biçimlendirme aşağıdaki gibi görünmelidir:After making these changes, the Panel, GridView, and ObjectDataSource s declarative markup should look like the following:

<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ı tamamlayabilmeniz için, true düğmesine tıklandığında GridView s SelectedIndex özelliğini SelectedSuppliersIndex ve ProductsBySupplierPanel panel s Visible özelliği ListProducts olarak ayarlamanız gerekir.To complete this exercise, we need to set the GridView s SelectedIndex property to the SelectedSuppliersIndex and the ProductsBySupplierPanel Panel s Visible property to true when the ListProducts button is clicked. Bunu gerçekleştirmek için, ListProducts Button Web Control s Click Event için bir olay işleyicisi oluşturun ve aşağıdaki kodu ekleyin:To accomplish this, create an event handler for the ListProducts Button Web control s Click event and add the following code:

protected void ListProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
    {
        ChooseSupplierMsg.Visible = true;
        ProductsBySupplierPanel.Visible = false;
    }
    else
    {
        // Set the GridView's SelectedIndex
        Suppliers.SelectedIndex = SuppliersSelectedIndex;
        // Show the ProductsBySupplierPanel panel
        ProductsBySupplierPanel.Visible = true;
    }
}

GridView 'dan bir tedarikçi seçilmemişse, ChooseSupplierMsg etiketi görüntülenir ve ProductsBySupplierPanel paneli gizlenir.If a supplier has not been selected from the GridView, the ChooseSupplierMsg Label is displayed and the ProductsBySupplierPanel Panel hidden. Aksi takdirde, bir tedarikçi seçildiyse ProductsBySupplierPanel görüntülenir ve GridView s SelectedIndex özelliği güncellenir.Otherwise, if a supplier has been selected, the ProductsBySupplierPanel is displayed and the GridView s SelectedIndex property is updated.

Şekil 20 ' de, Bigfoot Brela sağlayıcısı seçildikten sonra sonuçları gösterir ve sayfadaki ürünleri göster düğmesi tıklandı.Figure 20 shows the results after the Bigfoot Breweries supplier has been selected and the Show Products on Page button has been clicked.

Bigfoot Brewerler tarafından sağlanan ürünlerin aynı sayfada listelenmesi The Products Supplied by Bigfoot Breweries are Listed on the Same Page

Şekil 20: Bigfoot brewerler tarafından sağlanan ürünler aynı sayfada listelenmiştir (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 20: The Products Supplied by Bigfoot Breweries are Listed on the Same Page (Click to view full-size image)

ÖzetSummary

Ayrıntılar DetailView öğreticisi Ile seçilebilir bir ana GridView kullanan ana/ayrıntı bölümünde açıklandığı gibi, ShowSelectButton özelliği trueolarak ayarlanmış bir CommandField kullanarak bir GridView 'dan kayıtlar seçilebilir.As discussed in the Master/Detail Using a Selectable Master GridView with a Details DetailView tutorial, records can be selected from a GridView using a CommandField whose ShowSelectButton property is set to true. Ancak CommandField, kendi düğmelerini normal basma düğmeleri, bağlantılar veya görüntüler olarak görüntüler.But the CommandField displays its buttons either as regular push buttons, links, or images. Alternatif bir satır seçimi Kullanıcı arabirimi, her GridView satırında bir radyo düğmesi veya onay kutusu sağlamaktır.An alternative row-selection user interface is to provide a radio button or checkbox in each GridView row. Bu öğreticide radyo düğmelerinin bir sütununu nasıl ekleyeceğiniz anlatılmıştır.In this tutorial we examined how to add a column of radio buttons.

Ne yazık ki, radyo düğmelerinin bir sütununu basit veya basit olarak bir tane olarak eklemek beklenmeyebilir.Unfortunately, adding a column of radio buttons isn t as straightforward or simple as one might expect. Bir düğmeye tıkladığınızda eklenebilen yerleşik bir RadioButtonField yoktur ve bir TemplateField içindeki RadioButton Web denetimini kullanmak kendi sorun kümesini tanıtır.There is no built-in RadioButtonField that can be added at the click of a button, and using the RadioButton Web control within a TemplateField introduces its own set of problems. Bu tür bir arabirimi sağlamak için, RowCreated olay sırasında özel bir DataControlField sınıfı oluşturmanız veya uygun HTML 'yi bir TemplateField ekleme gerekir.In the end, to provide such an interface we either have to create a custom DataControlField class or resort to injecting the appropriate HTML into a TemplateField during the RowCreated event.

Radyo düğmelerinin bir sütununu nasıl ekleyecekseniz, onay kutusu sütunu ekleme konusunda ilgilenmeniz bize izin verin.Having explored how to add a column of radio buttons, let us turn our attention to adding a column of checkboxes. Bir Kullanıcı onay işaretiyle bir veya daha fazla GridView satırı seçip tüm seçili satırlarda (bir Web tabanlı e-posta istemcisinden bir e-posta kümesi seçip seçili tüm e-postaları sil ' i seçerek) bazı işlemler gerçekleştirebilir.With a column of checkboxes, a user can select one or more GridView rows and then perform some operation on all of the selected rows (such as selecting a set of emails from a web-based email client, and then choosing to delete all selected emails). Bir sonraki öğreticide, böyle bir sütunun nasıl ekleneceğini öğreneceğiz.In the next tutorial we'll see how to add such a column.

Programlamanın kutlu olsun!Happy Programming!

Yazar hakkındaAbout the Author

4GuysFromRolla.com 'in, Scott Mitchell, yedi ASP/ASP. net books ve 'in yazarı, 1998 sürümünden bu yana Microsoft Web teknolojileriyle çalışmaktadır.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.comadresinden erişilebilir .He can be reached at mitchell@4GuysFromRolla.com. ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.or via his blog, which can be found at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi.This tutorial series was reviewed by many helpful reviewers. Bu öğretici için lider gözden geçiren, David suru idi.Lead reviewer for this tutorial was David Suru. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .If so, drop me a line at mitchell@4GuysFromRolla.com.