Bir Ayrıntılar DataList’i ile Madde İşaretli Ana Kayıt Listesi Kullanan Ana/Ayrıntı (VB)

Scott Mitchell tarafından

Örnek uygulamayı indirin veya PDF 'yi indirin

Bu öğreticide, önceki öğreticinin iki sayfalı ana/ayrıntı raporunu, ekranın sol tarafındaki kategori adlarının madde işaretli bir listesini ve ekranın sağ tarafında seçilen kategorinin ürünlerini gösteren tek bir sayfada sıkıştıracağız.

Giriş

Yukarıdaki öğreticide , ana/ayrıntı raporunu iki sayfada nasıl ayıracağız. Ana sayfada, madde işaretli kategori listesini işlemek için bir yineleyici denetimi kullandık. Her kategori adı, tıklandığı zaman, kullanıcıyı, iki sütunlu bir DataList 'in seçili kategoriye ait bu ürünleri gösteren ayrıntılar sayfasına götürebileceği bir köprüdür.

Bu öğreticide, iki sayfalı öğreticiyi tek bir sayfada sıkıştıracağız ve her kategori adı bir LinkButton olarak işlenilerek ekranın sol tarafındaki kategori adlarından oluşan bir liste listesi gösteriliyor. Bir geri gönderinin bulunduğu kategori adı bağlantı düğmelerinden birine tıkladığınızda seçili kategori ürünlerini ekranın sağ tarafında iki sütunlu bir DataList 'e bağlar. Her bir kategorinin adını görüntülemenin yanı sıra, soldaki Yineleyici belirli bir kategori için kaç tane toplam ürünün olduğunu gösterir (bkz. Şekil 1).

kategori adı ve toplam ürün sayısı solda görüntülenir

Şekil 1: Kategori s adı ve toplam ürün sayısı solda görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

1. Adım: bir yineleyici ekranın sol bölümünde görüntüleme

Bu öğreticide, seçili kategori ürünlerinin solunda sol tarafta yer alan kategori listesi bulunması gerekir. Bir Web sayfasındaki içerikler standart HTML öğeleri paragraf etiketleri, bölünemez boşluklar, <table> s, vb. veya basamaklı stil sayfası (CSS) teknikleri kullanılarak konumlandırılmış olabilir. Bu nedenle tüm öğreticilerimiz, konumlandırma için CSS tekniklerini kullandı. Ana sayfalarda ve site gezinti öğreticisindeki ana sayfamızda Gezinti Kullanıcı arabirimini oluşturduğumuzda, gezinti listesi ve ana içerik için tam piksel sapmasını belirten mutlak konumlandırmayıkullandık. Alternatif olarak, CSS, bir öğeyi diğerinin sağına veya soluna kayanbir şekilde konumlandırmak için kullanılabilir. Seçilen kategorinin sol tarafında, DataList 'in sol tarafında bulunan Repeater ' ın solunda görünmesini sağlayabilirsiniz.

DataListRepeaterFiltering klasöründen CategoriesAndProducts.aspx sayfasını açın ve bir yineleyici ve DataList sayfasına ekleyin. Yineleyicisi ID, CategoryProductsiçin Categories ve DataList 'leri olarak ayarlayın. Kaynak görünümüne gidin ve yineleyici ve DataList denetimlerini kendi <div> öğelerine yerleştirin. Diğer bir deyişle, Repeater öğesini önce bir <div> öğesi ve sonra DataList ' i doğrudan Repeater ' dan sonra kendi <div> öğesi içine alın. Bu noktadaki biçimlerinizin aşağıdakine benzer şekilde görünmesi gerekir:

<div>
    <asp:Repeater ID="Categories" runat="server">
    </asp:Repeater>
</div>
<div>
    <asp:DataList ID="CategoryProducts" runat="server">
    </asp:DataList>
</div>

Yineleyicisi 'nin DataList 'in soluna kayan olması için float CSS style özniteliğini kullanmanız gerekir, örneğin:

<div>
    Repeater
</div>
<div>
    DataList
</div>

float: left; ikinci öğenin solundaki ilk <div> öğeyi float. width ve padding-right ayarları, ilk <div> s width ve <div> öğesi içeriği ve sağ kenar boşluğu arasına ne kadar doldurma ekleneceğini gösterir. CSS 'deki kayan öğeler hakkında daha fazla bilgi için Floatutorialbakın.

Stil ayarını doğrudan ilk <p> öğesi style özniteliğiyle belirtmek yerine, bunun yerine FloatLeftadlı Styles.css yeni bir CSS sınıfı oluşturun:

.FloatLeft
{
    float: left;
    width: 33%;
    padding-right: 10px;
}

Ardından <div> <div class="FloatLeft">ile değiştirebilirsiniz.

CSS sınıfını ekledikten ve CategoriesAndProducts.aspx sayfasında işaretlemeyi yapılandırdıktan sonra tasarımcıya gidin. DataList 'in sol tarafında kayan olan yineleyicisi görmeniz gerekir (Şu anda, henüz veri kaynaklarını veya şablonlarını yapılandırmamız daha sonra yalnızca gri kutular olarak görünür olsa da).

Yineleyicisi 'nin DataList 'in soluna doğru

Şekil 2: Repeater, DataList 'in soluna eklenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: her bir kategorinin ürün sayısını belirleme

Yineleyicileri ve DataList 'i çevreleyen biçimlendirme tamamlandıktan sonra, kategori verilerini Yineleyici denetimine bağlamaya hazırız. Ancak, Şekil 1 ' deki kategori madde listesi, her bir kategorinin adına ek olarak kategori ile ilişkili ürünlerin sayısını da görüntülemesi gereken her bir kategori için de görünür. Bu bilgilere erişmek için şunlardan birini yapabilirsiniz:

  • Bu bilgileri ASP.NET Page s arka plan kod sınıfından öğrenin. Belirli bir categoryID verildiğinde, ProductsBLL sınıf s GetProductsByCategoryID(categoryID) metodunu çağırarak ilişkili ürünlerin sayısını belirleyebiliriz. Bu yöntem, Count özelliği, belirtilen categoryID ürünlerin sayısı olan ProductsRow kaç tane olduğunu belirten ProductsDataTable nesnesini döndürür. Yineleyici için, Repeater ile bağlantılı her bir kategori için ProductsBLL sınıf s GetProductsByCategoryID(categoryID) yöntemini çağıran ve çıktıda sayısını içeren bir ItemDataBound olay işleyicisi oluşturarız.
  • Türü belirtilmiş veri kümesindeki CategoriesDataTable bir NumberOfProducts sütunu içerecek şekilde güncelleştirin. Daha sonra bu bilgileri eklemek için CategoriesDataTable GetCategories() yöntemini güncelleştirebilir veya GetCategories() olduğu gibi bırakabilir ve GetCategoriesAndNumberOfProducts()adlı yeni bir CategoriesDataTable yöntemi oluşturabilirsiniz.

Bu tekniklerin her ikisini de keşfedelim. Veri erişim katmanını güncelleştirmek zorunda olduğumuz için ilk yaklaşım uygulamanız daha basittir; Bununla birlikte, veritabanıyla daha fazla iletişim gerektirir. ItemDataBound olay işleyicisindeki ProductsBLL Class s GetProductsByCategoryID(categoryID) yöntemine yapılan çağrı, Repeater ' da görünen her bir kategori için ek bir veritabanı çağrısı ekler. Bu teknikle, n + 1 veritabanı çağrısı vardır; burada n , yineleyici içinde görüntülenen kategorilerin sayısıdır. İkinci yaklaşımla, ürün sayısı CategoriesBLL sınıf s GetCategories() (veya GetCategoriesAndNumberOfProducts()) yönteminden her bir kategori hakkında bilgi ile döndürülür ve bu sayede veritabanına bir yolculuğa neden olur.

Itemveriye bağlı olay Işleyicisindeki ürünlerin sayısını belirleme

Yineleyici s ItemDataBound olay işleyicisindeki her bir kategorinin ürün sayısını belirlemek, var olan veri erişim katmanımız üzerinde herhangi bir değişiklik yapılmasını gerektirmez. Tüm değişiklikler doğrudan CategoriesAndProducts.aspx sayfası içinde yapılabilir. Yineleyici s akıllı etiketi aracılığıyla CategoriesDataSource adlı yeni bir ObjectDataSource ekleyerek başlayın. Sonra, CategoriesBLL sınıf s GetCategories() yönteminden verilerini alması için CategoriesDataSource ObjectDataSource 'u yapılandırın.

, CategoriesBLL sınıfı s GetCategories () yöntemini kullanmak için ObjectDataSource 'ı yapılandırma

Şekil 3: CategoriesBLL sınıf s GetCategories() metodunu (tam boyutlu görüntüyü görüntülemek Için tıklayın) kullanmak üzere ObjectDataSource 'ı yapılandırın

Categories Yineleyici içindeki her öğenin tıklatılabilir olması gerekir ve tıklandığında, CategoryProducts DataList 'in seçili kategori için bu ürünleri görüntülemesine neden olur. Bu, her kategoriye bir köprü yapılarak, aynı sayfaya (CategoriesAndProducts.aspx) bağlanarak ve önceki öğreticide gördüğdiğimiz gibi QueryString aracılığıyla CategoryID geçirerek gerçekleştirilebilir. Bu yaklaşımın avantajı, belirli bir kategorinin ürünlerini görüntüleyen bir sayfanın, bir arama altyapısı tarafından yer işareti eklenmiş ve dizine alınmış olması olabilir.

Alternatif olarak, her bir kategoriyi Bu öğreticide kullanacağımız yaklaşım olan bir LinkButton yapabiliriz. LinkButton Kullanıcı tarayıcısında köprü olarak işlenir, ancak tıklandığı zaman geri gönderme yapılır; geri gönderme sırasında, DataList s ObjectDataSource 'un seçili kategoriye ait ürünleri görüntülemesi için yenilenmesi gerekir. Bu öğreticide, bir köprü kullanmak LinkButton kullanmaktan daha mantıklı olur; Ancak, LinkButton kullanmanın daha avantajlı olduğu başka senaryolar da olabilir. Köprü yaklaşımı Bu örnek için ideal olacaktır, bunun yerine LinkButton öğesini kullanmayı göz atalım. Göreceğiniz gibi, LinkButton 'ın kullanılması, bir köprüyle sonuçlanmayacak bazı güçlükleri ortaya koymaktadır. Bu nedenle, bu öğreticide bir LinkButton kullanılması bu zorlukları vurgulayacak ve köprü yerine LinkButton kullanmak isteyebileceğiniz senaryolar için çözüm sağlamaya yardımcı olur.

Note

Bu öğreticiyi, LinkButton yerine bir HyperLink denetimi veya <a> öğesi kullanarak tekrarlamanız önerilir.

Aşağıdaki biçimlendirme yineleyici ve ObjectDataSource için bildirime dayalı sözdizimini gösterir. Yineleyicisi 'nin şablonlarının her öğe için LinkButton olarak bir madde işaretli liste işlemesini unutmayın:

<asp:Repeater ID="Categories" runat="server" DataSourceID="CategoriesDataSource">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li><asp:LinkButton runat="server" ID="ViewCategory"></asp:LinkButton></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Note

Bu öğreticide, Repeater 'ın görünüm durumunun etkin olması gerekir (EnableViewState="False" yineleyicisi 'nin bildirime dayalı sözdiziminden atlandığını aklınızda). 3. adımda, DataList s ObjectDataSource s SelectParameters koleksiyonunu güncelleştirilebilmemiz için Yineleyici s ItemCommand olayı için bir olay işleyicisi oluşturacağız. Yineleyiciye ItemCommand, ancak görünüm durumu devre dışıysa tetiklenmeyecektir. Bir yineleyici s ItemCommand olayının tetiklenmesi için neden görünüm durumunun etkin olması gerektiğini öğrenmek için ASP.NET sorusunun ve çözümünün bir bölümünü inceleyin.

ViewCategory ID özellik değerine sahip LinkButton, Text özellik kümesine sahip değil. Kategori adını yalnızca göstermek istiyorduk, metin özelliğini bildirimli olarak, veri bağlama söz dizimi ile şöyle ayarlayacağız:

<asp:LinkButton runat="server" ID="ViewCategory"
    Text='<%# Eval("CategoryName") %>' />

Ancak, hem kategori adını hem de söz konusu kategoriye ait ürünlerin sayısını göstermek istiyoruz. Bu bilgiler, aşağıdaki kodda gösterildiği gibi, ProductBLL sınıf s GetCategoriesByProductID(categoryID) yöntemine çağrı yaparak ve sonuçta elde edilen ProductsDataTablekaç kayıt döndürüldüğünü belirleyerek Yineleyici s ItemDataBound olay işleyicisinden elde edilebilir:

Protected Sub Categories_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
    ' Make sure we're working with a data item...
    If e.Item.ItemType = ListItemType.Item OrElse _
        e.Item.ItemType = ListItemType.AlternatingItem Then
        ' Reference the CategoriesRow instance bound to this RepeaterItem
        Dim category As Northwind.CategoriesRow = _
            CType(CType(e.Item.DataItem, System.Data.DataRowView).Row, _
                Northwind.CategoriesRow)
        ' Determine how many products are in this category
        Dim productsAPI As New NorthwindTableAdapters.ProductsTableAdapter
        Dim productCount As Integer = _
            productsAPI.GetProductsByCategoryID(category.CategoryID).Count
        ' Reference the ViewCategory LinkButton and set its Text property
        Dim ViewCategory As LinkButton = _
            CType(e.Item.FindControl("ViewCategory"), LinkButton)
        ViewCategory.Text = _
            String.Format("{0} ({1:N0})", category.CategoryName, productCount)
    End If
End Sub

Bir veri öğesiyle (ItemType Item veya AlternatingItem) çalıştık ve sonra geçerli RepeaterItemzaten bağlanan CategoriesRow örneğine başvuru yaptığımız olduğundan emin olarak başladık. Daha sonra, ProductsBLL sınıfının bir örneğini oluşturarak, GetCategoriesByProductID(categoryID) metodunu çağırarak ve Count özelliği kullanılarak döndürülen kayıt sayısını belirleyerek bu kategoriye yönelik ürünlerin sayısını belirliyoruz. Son olarak, ItemTemplate 'teki ViewCategory LinkButton, Text özelliği CategoryName (numberofproductsincategory) olarak ayarlanır ve burada numberofproductsincategory sıfır ondalık basamakla bir sayı olarak biçimlendirilir.

Note

Alternatif olarak, kategori s CategoryName ve CategoryID değerlerini kabul eden ve kategori içindeki ürünlerin sayısıyla birleştirilmiş CategoryName döndüren (GetCategoriesByProductID(categoryID) yöntemi çağırarak belirlendiği şekilde) bir biçimlendirme işlevi ekledik. Bu tür biçimlendirme işlevinin sonuçları, ItemDataBound olay işleyicisi gereksinimini değiştiren LinkButton s Text özelliğine bildirimli olarak atanabilir. Biçimlendirme işlevlerini kullanma hakkında daha fazla bilgi için , GridView denetimindeki TemplateFields kullanma veya veri öğreticilerine göre DataList ve Repeater 'ı biçimlendirme bölümüne bakın.

Bu olay işleyicisini ekledikten sonra sayfayı bir tarayıcı ile test etmek için bir dakikanızı ayırın. Her kategorinin bir madde işaretli listede nasıl listelendiğine, kategori adı ve kategori ile ilişkili ürün sayısının görüntülenmesine bakın (bkz. Şekil 4).

Her kategorinin adı ve ürün sayısı görüntülenir

Şekil 4: her kategori adı ve ürün sayısı görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

CategoriesDataTableveCategoriesTableAdapterher bir kategorinin ürün sayısını Içerecek şekilde güncelleştiriliyor

Yineleyicisi 'ne bağladığından her bir kategorinin ürün sayısını belirlemek yerine, bu bilgileri yerel olarak dahil etmek üzere veri erişim katmanındaki CategoriesDataTable ve CategoriesTableAdapter ayarlayarak bu işlemi kolaylaştırabilir. Bunu başarmak için, ilişkili ürünlerin sayısını tutmak üzere CategoriesDataTable yeni bir sütun eklememiz gerekir. DataTable 'a yeni bir sütun eklemek için, yazılan veri kümesini (App_Code\DAL\Northwind.xsd) açın, değiştirilecek DataTable öğesine sağ tıklayın ve Ekle/sütun ' u seçin. CategoriesDataTable yeni bir sütun ekleyin (bkz. Şekil 5).

Kategorilerverikaynağına yeni bir sütun eklemek

Şekil 5: CategoriesDataSource yeni bir sütun ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu, yalnızca farklı bir ada yazarak değiştirebileceğiniz Column1adlı yeni bir sütun ekler. Bu yeni sütunu NumberOfProductsolarak yeniden adlandırın. Daha sonra, bu sütun özelliklerini yapılandırmamız gerekir. Yeni sütununa tıklayın ve Özellikler penceresi gidin. Şekil 6 ' da gösterildiği gibi, sütun s DataType özelliğini System.String System.Int32 olarak değiştirin ve ReadOnly özelliğini Trueolarak ayarlayın.

Yeni sütunun DataType ve ReadOnly özelliklerini ayarla

Şekil 6: yeni sütunun DataType ve ReadOnly özelliklerini ayarlayın

CategoriesDataTable artık bir NumberOfProducts sütununa sahip olsa da, değeri karşılık gelen herhangi bir TableAdapter s sorgusunun hiçbirinde ayarlı değildir. Kategori bilgilerinin alındığı her seferinde bu bilgilerin döndürülmesini istiyorsanız bu bilgileri döndürmek için GetCategories() yöntemini güncelleştirebiliriz. Ancak, nadir örneklerde (yalnızca bu öğreticide olduğu gibi) kategorilerin ilişkili ürün sayısını almak için, GetCategories() olduğu gibi bırakabilir ve bu bilgileri döndüren yeni bir yöntem oluşturabilirsiniz. GetCategoriesAndNumberOfProducts()adlı yeni bir yöntem oluşturarak bu ikinci yaklaşımı kullanalım.

Bu yeni GetCategoriesAndNumberOfProducts() yöntemi eklemek için, CategoriesTableAdapter sağ tıklayıp yeni sorgu ' yı seçin. Bu, önceki öğreticilerde çok sayıda kez kullandığımız TableAdapter sorgu Yapılandırma Sihirbazı 'nı getirir. Bu yöntem için, sorgunun satırları döndüren bir geçici SQL ifadesini kullandığını belirterek sihirbazı başlatın.

geçici bir SQL Ifadesini kullanarak yöntem oluşturma

Şekil 7: GEÇICI bir SQL Ifadesini kullanarak yöntemi oluşturun (tam boyutlu görüntüyü görüntülemek için tıklayın)

SQL deyimindeki satırları döndüren

Şekil 8: SQL Ifadesinin satırları döndürmesi (tam boyutlu görüntüyü görüntülemek için tıklatın)

Sonraki sihirbaz ekranı, sorgunun kullanması için bizi ister. Her bir kategorinin CategoryID, CategoryNameve Description alanlarının yanı sıra kategori ile ilişkili ürünlerin sayısını döndürmek için aşağıdaki SELECT ifadesini kullanın:

SELECT CategoryID, CategoryName, Description,
       (SELECT COUNT(*) FROM Products p WHERE p.CategoryID = c.CategoryID)
            as NumberOfProducts
FROM Categories c

Kullanılacak sorguyu belirtmek

Şekil 9: kullanılacak sorguyu belirtin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Kategorisiyle ilişkili ürün sayısını hesaplayan alt sorgunun NumberOfProductsolarak diğer adı olduğunu unutmayın. Bu adlandırma eşleşmesi, bu alt sorgunun döndürdüğü değerin CategoriesDataTable s NumberOfProducts sütunuyla ilişkilendirilmesine neden olur.

Bu sorguyu girdikten sonra, son adım yeni yöntemin adını seçmekte. DataTable Fill ve sırasıyla bir DataTable desenleri döndüren FillWithNumberOfProducts ve GetCategoriesAndNumberOfProducts kullanın.

Yeni TableAdapter s yöntemleri FillWithNumberOfProducts ve GetCategoriesAndNumberOfProducts adı

Şekil 10: yeni TableAdapter s yöntemlerini FillWithNumberOfProducts ve GetCategoriesAndNumberOfProducts adlandırın (tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu noktada, veri erişim katmanı kategori başına ürün sayısını içerecek şekilde genişletilmiştir. Tüm sunum katmanımız, farklı bir Iş mantığı katmanı aracılığıyla DAL için tüm çağrıları yönlendirdiğinden, CategoriesBLL sınıfına karşılık gelen bir GetCategoriesAndNumberOfProducts yöntemi eklememiz gerekir:

<System.ComponentModel.DataObjectMethodAttribute _
    (System.ComponentModel.DataObjectMethodType.Select, False)> _
Public Function GetCategoriesAndNumberOfProducts() As Northwind.CategoriesDataTable
    Return Adapter.GetCategoriesAndNumberOfProducts()
End Function

DAL ve BLL ile, bu verileri CategoriesAndProducts.aspx``Categories yineleyicisi 'ne bağlamayı yeniden hazırlarız! Zaten Yineleyici için ItemDataBound olay Işleyicisi bölümünde ürün sayısını belirleme için bir ObjectDataSource oluşturduysanız, bu ObjectDataSource 'u silin ve yineleyici s DataSourceID özellik ayarını kaldırın; Ayrıca, ASP.NET arka plan kod sınıfında Handles Categories.OnItemDataBound sözdizimini kaldırarak olay işleyicisindeki yineleyicinin ItemDataBound olayını kaldırır.

Yineleyici, özgün durumuna geri döndüğünüzde, yineleyici s akıllı etiketi aracılığıyla CategoriesDataSource adlı yeni bir ObjectDataSource ekleyin. ObjectDataSource 'u CategoriesBLL sınıfını kullanacak şekilde yapılandırın, ancak bunun yerine GetCategories() metodunu kullanmasını sağlamak yerine GetCategoriesAndNumberOfProducts() kullanın (bkz. Şekil 11).

, GetCategoriesAndNumberOfProducts metodunu kullanmak için ObjectDataSource 'u yapılandırma

Şekil 11: GetCategoriesAndNumberOfProducts 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)

Daha sonra, LinkButton s Text özelliğinin veri bağlama söz dizimi kullanılarak bildirimli olarak atanması ve hem CategoryName hem de NumberOfProducts veri alanlarını içermesi için ItemTemplate güncelleştirin. Yineleyici ve CategoriesDataSource ObjectDataSource için tüm bildirim temelli biçimlendirme şu şekilde yapılır:

<asp:Repeater ID="Categories" runat="server" DataSourceID="CategoriesDataSource">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li><asp:LinkButton runat="server" ID="ViewCategory"
                Text='<%# String.Format("{0} ({1:N0})", _
                    Eval("CategoryName"), Eval("NumberOfProducts")) %>' />
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategoriesAndNumberOfProducts" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

DAL, bir NumberOfProducts sütunu içerecek şekilde güncelleştirilerek işlenen çıktı, ItemDataBound olay işleyicisi yaklaşımını (kategori adlarını ve ürün sayısını gösteren yineleyicinin ekran görüntüsünü görmek için yeniden) ile aynıdır.

3. Adım: Seçili Kategori ürünlerini görüntüleme

Bu noktada, kategorilerin listesini her bir kategorideki ürünlerin sayısıyla birlikte görüntüleyen Categories Yineleyici vardır. Yineleyicisi, tıklandığı her bir kategori için bir LinkButton kullanır ve bu aşamada CategoryProducts DataList 'te seçili kategori için bu ürünleri görüntülemesi gerekir.

Bizimle ilgili bir zorluk, DataList 'in seçili kategori için yalnızca bu ürünleri görüntülemesini sağlar. Ayrıntılar DetailsView Ile seçilebilir bir ana GridView kullanan ana/ayrıntı için, seçili satır s ayrıntıları aynı sayfada bir DetailsView 'da görüntülenirken, satırları seçilebilecek bir GridView oluşturmayı gördünüz. GridView s ObjectDataSource, ProductsBLL s GetProducts() yöntemini kullanan tüm ürünlerle ilgili bilgileri geri döndürdü. DetailsView, GetProductsByProductID(productID) yöntemi kullanılarak seçili ürünle ilgili bilgiler almıştır. productID parametre değeri, GridView s SelectedValue özelliğinin değeriyle ilişkilendirerek bildirimli olarak sağlandı. Ne yazık ki, yineleyicisi bir SelectedValue özelliğine sahip değildir ve bir parametre kaynağı olarak görev alamaz.

Note

Bu, bir yineleyici içinde LinkButton kullanılırken görünen güçlüklerden biridir. Bunun yerine QueryString aracılığıyla CategoryID geçirmek için bir köprü kullandık, bu QueryString alanını parametre değeri için kaynak olarak kullanabiliriz.

Yineleyicisi için SelectedValue özelliğinin bulunmaması konusunda endişelenmemiz için önce DataList 'i bir ObjectDataSource 'a bağlasa ve ItemTemplatebelirteceğiz.

DataList s akıllı etiketinden, CategoryProductsDataSource adlı yeni bir ObjectDataSource eklemeyi ve ProductsBLL sınıf s GetProductsByCategoryID(categoryID) metodunu kullanacak şekilde yapılandırmayı tercih edin. Bu öğreticideki DataList bir salt okuma arabirimi sağladığından, ekleme, GÜNCELLEŞTIRME ve SILME sekmelerinden (hiçbiri) açılan listeleri ayarlamayı ücretsiz olarak hissetmeniz yeterlidir.

, ProductsBLL Class s Getproductsbycategoryıd (CategoryID) metodunu kullanacak şekilde yapılandırma

Şekil 12: ProductsBLL Class s GetProductsByCategoryID(categoryID) metodunu kullanacak şekilde ObjectDataSource 'ı yapılandırma (tam boyutlu görüntüyü görüntülemek için tıklayın)

GetProductsByCategoryID(categoryID) yöntemi bir giriş parametresi ( categoryID ) beklediği Için, veri kaynağını yapılandırma Sihirbazı, parametre kaynağını belirtmemizi sağlar. Kategorilerin bir GridView veya DataList içinde listelenmesi gerekiyordu. parametre kaynağı açılır listesini, veri Web denetiminin ID kontrol etmek ve ControlID olarak ayarlayacağız. Ancak, yineleyicisi bir SelectedValue özelliğine sahip olmadığından parametre kaynağı olarak kullanılamaz. Onay ederseniz, ControlID açılır listesinin yalnızca bir denetim ID``CategoryProducts, DataList 'in ID içerdiğini göreceksiniz.

Şimdilik, parametre kaynağı açılır listesini hiçbiri olarak ayarlayın. Yineleyicisi 'nde bir Category LinkButton tıklandığında bu parametre değerini programlı olarak atamaya başlayacağız.

CategoryID parametresi için bir parametre kaynağı belirtmeyin

Şekil 13: categoryID parametresi Için bir parametre kaynağı belirtmeyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Veri kaynağı Yapılandırma Sihirbazı 'nı tamamladıktan sonra, Visual Studio, DataList s ItemTemplateotomatik olarak oluşturur. Bu varsayılan ItemTemplate, önceki öğreticide kullandığımız şablonla değiştirin; Ayrıca, DataList s RepeatColumns özelliğini 2 olarak ayarlayın. Bu değişiklikleri yaptıktan sonra, DataList 'niz ve ilişkili ObjectDataSource için bildirim temelli biçimlendirme aşağıdaki gibi görünmelidir:

<asp:DataList ID="CategoryProducts" runat="server" DataKeyField="ProductID"
    DataSourceID="CategoryProductsDataSource" RepeatColumns="2"
    EnableViewState="False">
    <ItemTemplate>
        <h5><%# Eval("ProductName") %></h5>
        <p>
            Supplied by <%# Eval("SupplierName") %><br />
            <%# Eval("UnitPrice", "{0:C}") %>
        </p>
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="CategoryProductsDataSource"
    OldValuesParameterFormatString="original_{0}"  runat="server"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:Parameter Name="categoryID" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Şu anda CategoryProductsDataSource ObjectDataSource categoryID parametresi hiçbir zaman ayarlanmamaktadır, bu nedenle sayfa görüntülenirken hiçbir ürün gösterilmez. Bu parametre değerinin, yineleyici içindeki tıklanan kategorinin CategoryID göre ayarlanmış olması gerekir. Bu iki zorluk sergiler: ilk olarak, yineleyici ItemTemplate bir LinkButton 'ın ne zaman tıklandığını nasıl belirliyoruz; İkinci olarak, LinkButton 'a tıklandığı karşılık gelen kategorinin CategoryID nasıl belirleyebiliriz?

Düğme ve ImageButton denetimleri gibi LinkButton, bir Click olayına ve bir Command olayınasahiptir. Click olay, LinkButton öğesine tıklandığına işaret etmek üzere tasarlanmıştır. Ancak, LinkButton ' ın tıklandığını belirten ek olarak, olay işleyicisine bazı ek bilgiler iletmemiz gerekir. Bu durumda, LinkButton s CommandName ve CommandArgument özelliklerine bu ek bilgiler atanabilir. Daha sonra LinkButton tıklandığında, Command olayı başlatılır (Click olayı yerine) ve olay işleyicisi CommandName ve CommandArgument özelliklerinin değerlerini iletilir.

Yineleyicisi içindeki bir şablon içinden Command bir olay tetiklendiğinde, Repeater s ItemCommand olayı ateşlenir ve tıklanan LinkButton (veya Button veya ImageButton) CommandName ve CommandArgument değerleri geçirilir. Bu nedenle, yineleyici içindeki bir kategori LinkButton 'ın ne zaman tıklandığını anlamak için aşağıdakileri yapmanız gerekir:

  1. Repeater s ItemTemplate LinkButton 'ın CommandName özelliğini bir değere ayarlayın (ListProducts kullandım). Bu CommandName değerini ayarlayarak LinkButton s Command olayı LinkButton tıklandığında ateşlenir.
  2. LinkButton s CommandArgument özelliğini geçerli öğe s CategoryIDdeğerine ayarlayın.
  3. Yineleyici s ItemCommand olayı için bir olay işleyicisi oluşturun. Olay işleyicisinde CategoryProductsDataSource ObjectDataSource s CategoryID parametresini, geçirilen CommandArgumentdeğerine ayarlayın.

Yineleyici kategoriler için aşağıdaki ItemTemplate biçimlendirmesi 1 ve 2. adımları uygular. CommandArgument değere veri bağlama söz dizimi kullanılarak CategoryID veri öğesi için nasıl atandığını aklınızda kullanın:

<ItemTemplate>
    <li>
        <asp:LinkButton CommandName="ListProducts"  runat="server"
            CommandArgument='<%# Eval("CategoryID") %>' ID="ViewCategory"
            Text='<%# string.Format("{0} ({1:N0})", _
                Eval("CategoryName"), Eval("NumberOfProducts")) %>'>
        </asp:LinkButton>
    </li>
</ItemTemplate>

ItemCommand olay işleyicisi oluştururken, yineleyici içinde herhangi bir düğme, LinkButton veya ImageButton tarafından oluşturulan herhangi bir Command olayı ItemCommand olayının tetiklenmesine neden olacağı için, her zaman ilk önce gelen CommandName değerini denetleyemedi. Şu anda yalnızca bir LinkButton 'a Şu anda sahipsiniz (veya ekibimizin başka bir geliştirici), tıklandığı zaman aynı ItemCommand olay işleyicisini oluşturan Yineleyici için ek düğme Web denetimleri ekleyebilirler. Bu nedenle, CommandName özelliğini her zaman denetlediğinizden ve yalnızca beklenen değerle eşleşiyorsa programlama mantığınızla devam eden en iyi seçenektir.

Geçirilen CommandName değerinin ListProducts 'a eşit olduğundan emin olduktan sonra olay işleyicisi, CategoryProductsDataSource ObjectDataSource s CategoryID parametresini geçirilen CommandArgumentdeğerine atar. SelectParameters ObjectDataSource 'ta bu değişiklik otomatik olarak DataList 'in kendisini veri kaynağına yeniden bağlamasını ve yeni seçilen kategorinin ürünlerini göstermesini sağlar.

Protected Sub Categories_ItemCommand(source As Object, e As RepeaterCommandEventArgs) _
    Handles Categories.ItemCommand
    ' If it's the "ListProducts" command that has been issued...
    If String.Compare(e.CommandName, "ListProducts", True) = 0 Then
        ' Set the CategoryProductsDataSource ObjectDataSource's CategoryID parameter
        ' to the CategoryID of the category that was just clicked (e.CommandArgument)...
        CategoryProductsDataSource.SelectParameters("CategoryID").DefaultValue = _
            e.CommandArgument.ToString()
    End If
End Sub

Bu eklemeler sayesinde öğreticimiz tamamlanmıştır! Bir tarayıcıda test etmek için bir dakikanızı ayırın. Şekil 14, sayfayı ilk ziyaret eden ekranı gösterir. Bir kategori henüz seçilememiştir, hiçbir ürün gösterilmez. Bir kategoriye tıkladığınızda (örneğin,), ürün kategorisindeki bu ürünleri iki sütunlu görünümde görüntüler (bkz. Şekil 15).

sayfa Ilk ziyaret edildiğinde hiçbir ürün gösterilmez

Şekil 14: sayfa Ilk ziyaret edildiğinde hiçbir ürün gösterilmez (tam boyutlu görüntüyü görüntülemek için tıklayın)

Üretim kategorisine tıklanması , doğru eşleşen ürünleri listeler

Şekil 15: üretim kategorisine tıkladığınızda sağdaki eşleşen ürünler listelenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

Bu öğreticide ve önceki bir adımda gördüğümüz ana/ayrıntı raporları iki sayfada dağıtılabilir veya bir tane üzerinde birleştirilebilir. Bununla birlikte, tek bir sayfada ana/ayrıntı raporunu görüntülemek, sayfada ana ve ayrıntı kayıtlarının ne kadar en iyi şekilde yerleşmekte zorluk gösterilmesini sağlar. Ayrıntı DetailsView Ile seçilebilir bir ana GridView kullanan ana/ayrıntı bölümünde, Ayrıntılar kayıtları ana kayıtların üzerinde görüntülenir; Bu öğreticide, ana kayıtları ayrıntıların sol tarafında yüzer olması için CSS tekniklerini kullandık.

Ana/ayrıntı raporlarının yanı sıra, her bir kategori ile ilişkili ürün sayısını ve bir bağlantı düğmesine (veya düğmeye veya ImageButton) bir yineleyici içinden tıklandığı zaman sunucu tarafı mantığın nasıl alınacağını keşfettik.

Bu öğretici, DataList ve Repeater ile ana/ayrıntı raporlarının incelemesini tamamlar. Sonraki öğreticilerimiz, DataList denetimine nasıl özellik ekleneceğini ve bu yeteneklerin nasıl ekleneceğini gösterir.

Programlamanın kutlu olsun!

Daha Fazla Bilgi

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

Yazar hakkında

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 bağımsız danışman, Trainer ve yazıcı olarak çalışıyor. En son kitabı, 24 saat içinde ASP.NET 2,0 kendi kendinize eğitimister. mitchell@4GuysFromRolla.comadresinden erişilebilir . ya da blog aracılığıyla http://ScottOnWriting.NETbulabilirsiniz.

Özel olarak teşekkürler

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi. Bu öğretici için müşteri adayı gözden geçireni, Zack Jones idi. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz? Öyleyse, benimitchell@4GuysFromRolla.combir satır bırakın .