Bir DropDownList ile Ana/Ayrıntı Filtreleme (VB)Master/Detail Filtering With a DropDownList (VB)

Scott Mitchell tarafındanby Scott Mitchell

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

Bu öğreticide, bir DropDownList denetimindeki ana kayıtları ve bir GridView 'da seçilen liste öğesinin ayrıntılarını göreceksiniz.In this tutorial we'll see how to display the master records in a DropDownList control and the details of the selected list item in a GridView.

GirişIntroduction

Ortak bir rapor türü, raporun ilk "ana" kayıt kümesini göstererek başladığı ana/ayrıntı raporlarıdır.A common type of report is the master/detail report, in which the report begins by showing some set of "master" records. Kullanıcı daha sonra Ana kayıtlardan birinin detayına gidebilir ve bu sayede ana kaydın "ayrıntılarını" görüntülüyor olabilir.The user can then drill down into one of the master records, thereby viewing that master record's "details." Ana/ayrıntı raporları, tüm kategorileri gösteren bir rapor ve sonra bir kullanıcının belirli bir kategoriyi seçmesini ve ilişkili ürünlerini görüntülemesini sağlamak gibi bir-çok ilişkiyi görselleştirmeye yönelik ideal bir seçimdir.Master/detail reports are an ideal choice for visualizing one-to-many relationships, such as a report showing all of the categories and then allowing a user to select a particular category and display its associated products. Ayrıca, ana/ayrıntı raporları, özellikle "geniş" tablolardan (çok sütun içeren) ayrıntılı bilgileri görüntülemek için yararlıdır.Additionally, master/detail reports are useful for displaying detailed information from particularly "wide" tables (ones that have a lot of columns). Örneğin, ana/ayrıntı raporunun "ana" düzeyi, veritabanındaki ürünlerin yalnızca ürün adını ve birim fiyatını gösterebilir ve belirli bir üründe ayrıntıya gitme ek ürün alanlarını (kategori, tedarikçi, birim başına miktar vb.) gösterebilir.For example, the "master" level of a master/detail report might show just the product name and unit price of the products in the database, and drilling down into a particular product would show the additional product fields (category, supplier, quantity per unit, and so on).

Ana/ayrıntı raporunun uygulanbileceği birçok yol vardır.There are many ways with which a master/detail report can be implemented. Bu ve sonraki üç öğreticilerde, çeşitli ana/ayrıntı raporlarına bakacağız.Over this and the next three tutorials we'll look at a variety of master/detail reports. Bu öğreticide, bir DropDownList denetimindeki ana kayıtları ve bir GridView 'da seçilen liste öğesinin ayrıntılarını göreceksiniz.In this tutorial we'll see how to display the master records in a DropDownList control and the details of the selected list item in a GridView. Özellikle, Bu öğreticinin ana/ayrıntı raporu, kategori ve ürün bilgilerini listeler.In particular, this tutorial's master/detail report will list category and product information.

1. Adım: bir DropDownList içindeki kategorileri görüntülemeStep 1: Displaying the Categories in a DropDownList

Ana/ayrıntı raporumuz, seçilen liste öğesinin ürünlerini bir GridView 'daki sayfada daha aşağı görüntülenecek şekilde bir DropDownList içindeki kategorileri listeleyecektir.Our master/detail report will list the categories in a DropDownList, with the selected list item's products displayed further down in the page in a GridView. İlk görevinin önünde ve sonra, kategorilerin bir DropDownList içinde gösterilmesi gerekir.The first task ahead of us, then, is to have the categories displayed in a DropDownList. Filtering klasöründeki FilterByDropDownList.aspx sayfasını açın, araç kutusu 'ndaki bir DropDownList 'e sayfanın tasarımcısına sürükleyin ve ID özelliğini Categoriesolarak ayarlayın.Open the FilterByDropDownList.aspx page in the Filtering folder, drag on a DropDownList from the Toolbox onto the page's designer, and set its ID property to Categories. Sonra, DropDownList 'in akıllı etiketindeki veri kaynağı Seç bağlantısına tıklayın.Next, click on the Choose Data Source link from the DropDownList's smart tag. Bu, veri kaynağı Yapılandırma Sihirbazı 'nı görüntüler.This will display the Data Source Configuration wizard.

DropDownList 'in veri kaynağını belirtmek Specify the DropDownList's Data Source

Şekil 1: DropDownList 'In veri kaynağını belirtin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 1: Specify the DropDownList's Data Source (Click to view full-size image)

CategoriesBLL sınıfının GetCategories() yöntemini çağıran CategoriesDataSource adlı yeni bir ObjectDataSource eklemeyi seçin.Choose to add a new ObjectDataSource named CategoriesDataSource that invokes the CategoriesBLL class's GetCategories() method.

CategoriesDataSource adlı yeni bir ObjectDataSource ekleyinAdd a New ObjectDataSource Named CategoriesDataSource

Şekil 2: CategoriesDataSource adlı yeni bir ObjectDataSource ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 2: Add a New ObjectDataSource Named CategoriesDataSource (Click to view full-size image)

Kategorilerbll sınıfını kullanmayı seçinChoose to Use the CategoriesBLL Class

Şekil 3: CategoriesBLL sınıfını kullanmayı seçin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 3: Choose to Use the CategoriesBLL Class (Click to view full-size image)

, GetCategories () yöntemini kullanmak için ObjectDataSource 'ı yapılandırmaConfigure the ObjectDataSource to Use the GetCategories() Method

Şekil 4: GetCategories() 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 4: Configure the ObjectDataSource to Use the GetCategories() Method (Click to view full-size image)

ObjectDataSource yapılandırıldıktan sonra yine de, DropDownList 'de hangi veri kaynağı alanının gösterileceğini ve hangi birinin liste öğesi için değer olarak ilişkilendirilmesi gerektiğini belirtmemiz gerekir.After configuring the ObjectDataSource we still need to specify what data source field should be displayed in DropDownList and which one should be associated as the value for the list item. CategoryName alanı görüntüleme ve her liste öğesi için değer olarak CategoryID.Have the CategoryName field as the display and CategoryID as the value for each list item.

DropDownList 'In CategoryName alanını görüntülemesi ve değer olarak CategoryID 'yi kullanması Have the DropDownList Display the CategoryName Field and Use CategoryID as the Value

Şekil 5: DropDownList 'In CategoryName alanı göstermesini ve değer olarak CategoryID kullanmasınaizin vermek (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 5: Have the DropDownList Display the CategoryName Field and Use CategoryID as the Value (Click to view full-size image)

Bu noktada, Categories tablodaki kayıtlarla doldurulmuş bir DropDownList denetimine sahip olduğumuz (hepsi yaklaşık altı saniye içinde gerçekleştirilir).At this point we have a DropDownList control that's populated with the records from the Categories table (all accomplished in about six seconds). Şekil 6 ' da bir tarayıcıdan görüntülendiklerinde ilerleme durumunu gösterir.Figure 6 shows our progress thus far when viewed through a browser.

aşağı açılan liste geçerli KategorilerA Drop-Down Lists the Current Categories

Şekil 6: bir açılan listede geçerli Kategoriler listelenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 6: A Drop-Down Lists the Current Categories (Click to view full-size image)

2. Adım: ürünü ekleme GridViewStep 2: Adding the Products GridView

Ana/ayrıntı raporumuzdaki ilgili son adım, seçili kategoriyle ilişkili ürünleri listelerimize göre belirlenir.That last step in our master/detail report is to list the products associated with the selected category. Bunu gerçekleştirmek için, sayfaya bir GridView ekleyin ve productsDataSourceadlı yeni bir ObjectDataSource oluşturun.To accomplish this, add a GridView to the page and create a new ObjectDataSource named productsDataSource. productsDataSource denetiminin verilerini ProductsBLL sınıfının GetProductsByCategoryID(categoryID) yönteminden Cull yapın.Have the productsDataSource control cull its data from the ProductsBLL class's GetProductsByCategoryID(categoryID) method.

Getproductsbycategoryıd (CategoryID) yöntemini seçinSelect the GetProductsByCategoryID(categoryID) Method

Şekil 7: GetProductsByCategoryID(categoryID) yöntemini seçin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 7: Select the GetProductsByCategoryID(categoryID) Method (Click to view full-size image)

Bu yöntemi seçtikten sonra, ObjectDataSource Sihirbazı yöntemin categoryID parametresine ilişkin değeri ister.After choosing this method, the ObjectDataSource wizard prompts us for the value for the method's categoryID parameter. Seçili categories DropDownList öğesinin değerini kullanmak için parametre kaynağını denetim ve ControlID Categoriesolarak ayarlayın.To use the value of the selected categories DropDownList item set the Parameter source to Control and the ControlID to Categories.

CategoryID parametresini DropDownList kategorisinin değerine ayarlayınSet the categoryID Parameter to the Value of the Categories DropDownList

Şekil 8: categoryID parametresini Categories DropDownList değeri olarak ayarlayın (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 8: Set the categoryID Parameter to the Value of the Categories DropDownList (Click to view full-size image)

Bir tarayıcıda ilerleme durumunu kontrol etmek için bir dakikanızı ayırın.Take a moment to check out our progress in a browser. Sayfayı ilk ziyaret edildiğinde, bu ürünler seçili kategoriye (alkoller) ait (Şekil 9 ' da gösterildiği gibi) görüntülenir, ancak DropDownList 'in değiştirilmesi verileri güncelleştirmez.When first visiting the page, those products belong to the selected category (Beverages) are displayed (as shown in Figure 9), but changing the DropDownList doesn't update the data. Bunun nedeni, GridView 'in güncelleştirilmesi için bir geri gönderme oluşması gerekir.This is because a postback must occur for the GridView to update. Bunu gerçekleştirmek için iki seçeneğiniz vardır (hiçbiri hiçbir kod yazmak zorunda değildir):To accomplish this we have two options (neither of which requires writing any code):

  • Kategori DropDownListAutoPostBack özelliğinitrue olarak ayarlayın.Set the categories DropDownList'sAutoPostBack propertyto True. (Bunu, DropDownList 'in akıllı etiketinde AutoPostBack seçeneğini etkinleştir seçeneğini işaretleyerek gerçekleştirebilirsiniz.) Bu, DropDownList 'in seçili öğesi Kullanıcı tarafından değiştirildiğinde bir geri gönderme tetikleyecektir.(You can accomplish this by checking the Enable AutoPostBack option in the DropDownList's smart tag.) This will trigger a postback whenever the DropDownList's selected item is changed by the user. Bu nedenle, Kullanıcı DropDownList 'den yeni bir kategori seçtiğinde geri gönderme, yeni seçilen kategorinin ürünleriyle güncelleştirilir.Therefore, when the user selects a new category from the DropDownList a postback will ensue and the GridView will be updated with the products for the newly selected category. (Bu öğreticide kullandığım yaklaşım budur.)(This is the approach I've used in this tutorial.)
  • DropDownList 'in yanına bir düğme web denetimi ekleyin.Add a Button Web control next to the DropDownList. Text özelliğini Yenile veya benzer bir şekilde ayarlayın.Set its Text property to Refresh or something similar. Bu yaklaşımda, kullanıcının yeni bir kategori seçip düğmesine tıklamalıdır.With this approach, the user will need to select a new category and then click the Button. Düğmeye tıkladığınızda geri göndermeye neden olur ve GridView, seçilen kategorinin bu ürünlerini listelemek için güncelleştirilecek.Clicking the Button will cause a postback and update the GridView to list those products of the selected category.

Şekil 9 ve 10, işlem içindeki ana/ayrıntı raporunu gösterir.Figures 9 and 10 illustrate the master/detail report in action.

Sayfa Ilk ziyaret edildiğinde , beden Içecek ürünleri görüntülenirWhen First Visiting the Page, the Beverage Products are Displayed

Şekil 9: sayfayı ilk ziyaret edildiğinde, Beiçecek ürünleri görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 9: When First Visiting the Page, the Beverage Products are Displayed (Click to view full-size image)

Yeni bir ürünün seçilmesi (üretim) otomatik olarak bir geri göndermeye neden olur, GridView güncelleştiriliyorSelecting a New Product (Produce) Automatically Causes a PostBack, Updating the GridView

Şekil 10: yeni bir ürünün seçilmesi (üretim) otomatik olarak bir geri göndermeye neden olur, GridView güncelleştiriliyor (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 10: Selecting a New Product (Produce) Automatically Causes a PostBack, Updating the GridView (Click to view full-size image)

"--Kategori seçme--" liste öğesi eklemeAdding a "-- Choose a Category --" List Item

FilterByDropDownList.aspx sayfası ilk kez ziyaret edildiğinde, kategori DropDownList 'in ilk liste öğesi (alkolu) varsayılan olarak seçilidir ve GridView 'daki Iiçecek ürünlerini gösterir.When first visiting the FilterByDropDownList.aspx page the categories DropDownList's first list item (Beverages) is selected by default, showing the beverage products in the GridView. İlk kategorinin ürünlerini göstermek yerine, "--kategori seçin--" gibi bir DropDownList öğesi seçilmelidir.Rather than showing the first category's products, we may want to instead have a DropDownList item selected that says something like, "-- Choose a Category --".

DropDownList 'e yeni bir liste öğesi eklemek için Özellikler penceresi gidin ve Items özelliğindeki üç noktaya tıklayın.To add a new list item to the DropDownList, go to the Properties window and click on the ellipses in the Items property. Text "--kategori seçin--" ve Value -1yeni bir liste öğesi ekleyin.Add a new list item with the Text "-- Choose a Category --" and the Value -1.

ekleyin--Kategori seçin--liste öğesiAdd a -- Choose a Category -- List Item

Şekil 11: Ekle--Kategori seçin--liste öğesi (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 11: Add a -- Choose a Category -- List Item (Click to view full-size image)

Alternatif olarak, aşağıdaki işaretlemeyi DropDownList öğesine ekleyerek liste öğesini ekleyebilirsiniz:Alternatively, you can add the list item by adding the following markup to the DropDownList:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Ayrıca, Kategoriler denetimin DropDownList 'e bağlandığı, AppendDataBoundItems doğru değilse, el ile eklenen liste öğelerinin üzerine yazabiledikleri için DropDownList denetiminin AppendDataBoundItems true olarak ayarlanmaları gerekir.Additionally, we need to set the DropDownList control's AppendDataBoundItems to True because when the categories are bound to the DropDownList from the ObjectDataSource they'll overwrite any manually-added list items if AppendDataBoundItems isn't True.

AppendDataBoundItems özelliğini true olarak ayarlayın

Şekil 12: AppendDataBoundItems özelliğini true olarak ayarlayınFigure 12: Set the AppendDataBoundItems Property to True

Bu değişikliklerden sonra, ilk olarak "--kategori seçin--" seçeneği seçilidir ve hiçbir ürün gösterilmez.After these changes, when first visiting the page the "-- Choose a Category --" option is selected and no products are displayed.

Ilk sayfa yükleme hiçbir ürün gösterilmezOn the Initial Page Load No Products are Displayed

Şekil 13: Ilk sayfa yükleme sayfasında hiçbir ürün gösterilmez (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 13: On the Initial Page Load No Products are Displayed (Click to view full-size image)

"--Kategori Seç--" liste öğesi seçili olduğu için hiçbir ürünün görüntülenmediği nedeni, değeri -1 ve veritabanında -1``CategoryID bir ürün yok.The reason no products are displayed when because the "-- Choose a Category --" list item is selected is because its value is -1 and there are no products in the database with a CategoryID of -1. İstediğiniz davranış bu ise, bu noktada işiniz istenir!If this is the behavior you want then you're done at this point! Bununla birlikte, "--Kategori Seç--" liste öğesi seçili olduğunda kategorilerin Tümünü göstermek istiyorsanız, ProductsBLL sınıfına geri dönün ve GetProductsByCategoryID(categoryID) yöntemini, geçirilen categoryID parametresi sıfırdan küçükse GetProducts() yöntemini çağırır şekilde özelleştirin:If, however, you want to display all of the categories when the "-- Choose a Category --" list item is selected, return to the ProductsBLL class and customize the GetProductsByCategoryID(categoryID) method so that it invokes the GetProducts() method if the passed in categoryID parameter is less than zero:

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

Burada kullanılan teknik, bildirim temelli parametreler öğreticisinde tüm tedarikçileri geri göstermek için kullandığımız yaklaşıma benzer, ancak bu örnekte, tüm kayıtların Nothingaksine alınması gerektiğini göstermek için bir -1 değeri kullanıyoruz.The technique used here is similar to the approach we used to display all suppliers back in the Declarative Parameters tutorial, although for this example we're using a value of -1 to indicate that all records should be retrieved as opposed to Nothing. Bunun nedeni, GetProductsByCategoryID(categoryID) yönteminin categoryID parametresinin, bir dize giriş parametresine geçirdiğimiz bildirim temelli parametreler öğreticisinde iletilen tamsayı değeri olmasını bekler.This is because the categoryID parameter of the GetProductsByCategoryID(categoryID) method expects as integer value passed in, whereas in the Declarative Parameters tutorial we were passing in a string input parameter.

Şekil 14 ' te, "--kategori seçin--" seçeneği belirlendiğinde FilterByDropDownList.aspx ekran görüntüsü gösterilir.Figure 14 shows a screen shot of FilterByDropDownList.aspx when the "-- Choose a Category --" option is selected. Burada, tüm ürünler varsayılan olarak görüntülenir ve Kullanıcı, belirli bir kategoriyi seçerek ekranı daraltabilirler.Here, all of the products are displayed by default, and the user can narrow the display by choosing a specific category.

Tüm ürünlerin artık varsayılan olarak listelenmiştirAll of the Products are Now Listed By Default

Şekil 14: tüm ürünler artık varsayılan olarak listelenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 14: All of the Products are Now Listed By Default (Click to view full-size image)

ÖzetSummary

Hiyerarşik olarak ilgili verileri görüntülerken, genellikle kullanıcının hiyerarşinin en üstündeki verileri kullanarak başlayabileceği ana/ayrıntı raporlarını kullanarak verileri sunmak ve ayrıntılarda ayrıntıya inmek için yardımcı olur.When displaying hierarchically-related data, it often helps to present the data using master/detail reports, from which the user can start perusing the data from the top of the hierarchy and drill down into details. Bu öğreticide, seçilen kategorinin ürünlerini gösteren basit bir ana/ayrıntı raporu oluşturmayı inceledik.In this tutorial we examined building a simple master/detail report showing a selected category's products. Bu, kategorilerin listesi için bir DropDownList ve seçilen kategoriye ait ürünler için bir GridView kullanılarak gerçekleştirildi.This was accomplished by using a DropDownList for the list of categories and a GridView for the products belonging to the selected category.

Sonraki öğreticide , Iki Dropdownlists kullanarak DropDownList arabirimini bir adım daha devam eteceğiz.In the next tutorial we'll take the DropDownList interface one step further, using two DropDownLists.

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.