Bir Ayrıntılar DataList’i ile Madde İşaretli Ana Kayıt Listesi Kullanan Ana/Ayrıntı (C#)Master/Detail Using a Bulleted List of Master Records with a Details DataList (C#)

Scott Mitchell tarafındanby Scott Mitchell

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

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.In this tutorial we'll compress the two-page master/detail report of the previous tutorial into a single page, showing a bulleted list of category names on the left side of the screen and the selected category's products on the right of the screen.

GirişIntroduction

Yukarıdaki öğreticide , ana/ayrıntı raporunu iki sayfada nasıl ayıracağız.In the preceding tutorial we looked at how to separate a master/detail report across two pages. Ana sayfada, madde işaretli kategori listesini işlemek için bir yineleyici denetimi kullandık.In the master page we used a Repeater control to render a bulleted list of categories. 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.Each category name was a hyperlink that, when clicked, would take the user to the details page, where a two-column DataList showed those products belonging to the selected category.

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.In this tutorial we'll compress the two-page tutorial into a single page, showing a bulleted list of category names on the left side of the screen with each category name rendered as a LinkButton. 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.Clicking one of the category name LinkButtons induces a postback and binds the selected category s products to a two-column DataList on the right of the screen. 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).In addition to displaying each category s name, the Repeater on the left shows how many total products there are for a given category (see Figure 1).

kategori adı ve toplam ürün sayısı solda görüntülenirThe Category s Name and Total Number of Products are Displayed on the Left

Ş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)Figure 1: The Category s Name and Total Number of Products are Displayed on the Left (Click to view full-size image)

1. Adım: bir yineleyici ekranın sol bölümünde görüntülemeStep 1: Displaying a Repeater in the Left Portion of the Screen

Bu öğreticide, seçili kategori ürünlerinin solunda sol tarafta yer alan kategori listesi bulunması gerekir.For this tutorial we need to have the bulleted list of categories appear to the left of the selected category s products. 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.Content within a web page can be positioned using standard HTML elements paragraph tags, non-breaking spaces, <table> s, and so on or through cascading stylesheet (CSS) techniques. Bu nedenle tüm öğreticilerimiz, konumlandırma için CSS tekniklerini kullandı.All of our tutorials thus far have used CSS techniques for positioning. 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.When we built the navigation user interface in our master page in the Master Pages and Site Navigation tutorial we used absolute positioning, indicating the precise pixel offset for the navigation list and the main content. Alternatif olarak, CSS, bir öğeyi diğerinin sağına veya soluna kayanbir şekilde konumlandırmak için kullanılabilir.Alternatively, CSS can be used to position one element to the right or left of another through floating. Seçilen kategorinin sol tarafında, DataList 'in sol tarafında bulunan Repeater ' ın solunda görünmesini sağlayabilirsiniz.We can have the bulleted list of categories appear to the left of the selected category s products by floating the Repeater to the left of the DataList

DataListRepeaterFiltering klasöründen CategoriesAndProducts.aspx sayfasını açın ve bir yineleyici ve DataList sayfasına ekleyin.Open the CategoriesAndProducts.aspx page from the DataListRepeaterFiltering folder and add to the page a Repeater and a DataList. Yineleyicisi ID, CategoryProductsiçin Categories ve DataList 'leri olarak ayarlayın.Set the Repeater s ID to Categories and the DataList s to CategoryProducts. Kaynak görünümüne gidin ve yineleyici ve DataList denetimlerini kendi <div> öğelerine yerleştirin.Go to the Source view and put the Repeater and DataList controls within their own <div> elements. 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.That is, enclose the Repeater within a <div> element first and then the DataList in its own <div> element directly after the Repeater. Bu noktadaki biçimlerinizin aşağıdakine benzer şekilde görünmesi gerekir:Your markup at this point should look similar to the following:

<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:To float the Repeater to the left of the DataList, we need to use the float CSS style attribute, like so:

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

float: left; ikinci öğenin solundaki ilk <div> öğeyi float.The float: left; floats the first <div> element to the left of the second one. 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.The width and padding-right settings indicate the first <div> s width and how much padding is added between the <div> element s content and its right margin. CSS 'deki kayan öğeler hakkında daha fazla bilgi için Floatutorialbakın.For more information on floating elements in CSS check out the Floatutorial.

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:Rather than specify the style setting directly through the first <p> element s style attribute, let s instead create a new CSS class in Styles.css named FloatLeft:

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

Ardından <div> <div class="FloatLeft">ile değiştirebilirsiniz.Then we can replace the <div> with <div class="FloatLeft">.

CSS sınıfını ekledikten ve CategoriesAndProducts.aspx sayfasında işaretlemeyi yapılandırdıktan sonra tasarımcıya gidin.After adding the CSS class and configuring the markup in the CategoriesAndProducts.aspx page, go to the Designer. 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).You should see the Repeater floating to the left of the DataList (although right now both just appear as gray boxes since we ve yet to configure their data sources or templates).

Yineleyicisi 'nin DataList 'in soluna doğru The Repeater is Floated to the Left of the DataList

Şekil 2: Repeater, DataList 'in soluna eklenir (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 2: The Repeater is Floated to the Left of the DataList (Click to view full-size image)

2. Adım: her bir kategorinin ürün sayısını belirlemeStep 2: Determining the Number of Products for Each Category

Yineleyicileri ve DataList 'i çevreleyen biçimlendirme tamamlandıktan sonra, kategori verilerini Yineleyici denetimine bağlamaya hazırız.With the Repeater and DataList s surrounding markup complete, we re ready to bind the category data to the Repeater control. 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.However, as the bulleted list of categories in Figure 1 shows, in addition to each category s name we also need to display the number of products associated with the category. Bu bilgilere erişmek için şunlardan birini yapabilirsiniz:To access this information we can either:

  • Bu bilgileri ASP.NET Page s arka plan kod sınıfından öğrenin.Determine this information from the ASP.NET page s code-behind class. Belirli bir categoryID verildiğinde, ProductsBLL sınıf s GetProductsByCategoryID(categoryID) metodunu çağırarak ilişkili ürünlerin sayısını belirleyebiliriz.Given a particular categoryID we can determine the number of associated products by calling the ProductsBLL class s GetProductsByCategoryID(categoryID) method. 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.This method returns a ProductsDataTable object whose Count property indicates how many ProductsRow s exists, which is the number of products for the specified categoryID. 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.We can create an ItemDataBound event handler for the Repeater that, for each category bound to the Repeater, calls the ProductsBLL class s GetProductsByCategoryID(categoryID) method and includes its count in the output.
  • Türü belirtilmiş veri kümesindeki CategoriesDataTable bir NumberOfProducts sütunu içerecek şekilde güncelleştirin.Update the CategoriesDataTable in the Typed DataSet to include a NumberOfProducts column. 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.We can then update the GetCategories() method in the CategoriesDataTable to include this information or, alternatively, leave GetCategories() as-is and create a new CategoriesDataTable method called GetCategoriesAndNumberOfProducts().

Bu tekniklerin her ikisini de keşfedelim.Let s explore both of these techniques. 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.The first approach is simpler to implement since we don t need to update the Data Access Layer; however, it requires more communications with the database. 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.The call to the ProductsBLL class s GetProductsByCategoryID(categoryID) method in the ItemDataBound event handler adds an extra database call for each category displayed in the Repeater. Bu teknikle, n + 1 veritabanı çağrısı vardır; burada n , yineleyici içinde görüntülenen kategorilerin sayısıdır.With this technique there are N + 1 database calls, where N is the number of categories displayed in the Repeater. İ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.With the second approach, the product count is returned with information about each category from the CategoriesBLL class s GetCategories() (or GetCategoriesAndNumberOfProducts()) method, thereby resulting in just one trip to the database.

Itemveriye bağlı olay Işleyicisindeki ürünlerin sayısını belirlemeDetermining the Number of Products in the ItemDataBound Event Handler

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.Determining the number of products for each category in the Repeater s ItemDataBound event handler does not require any modifications to our existing Data Access Layer. Tüm değişiklikler doğrudan CategoriesAndProducts.aspx sayfası içinde yapılabilir.All modifications can be made directly within the CategoriesAndProducts.aspx page. Yineleyici s akıllı etiketi aracılığıyla CategoriesDataSource adlı yeni bir ObjectDataSource ekleyerek başlayın.Start by adding a new ObjectDataSource named CategoriesDataSource via the Repeater s smart tag. Sonra, CategoriesBLL sınıf s GetCategories() yönteminden verilerini alması için CategoriesDataSource ObjectDataSource 'u yapılandırın.Next, configure the CategoriesDataSource ObjectDataSource so that it retrieves its data from the CategoriesBLL class s GetCategories() method.

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

Ş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ınFigure 3: Configure the ObjectDataSource to Use the CategoriesBLL class s GetCategories() Method (Click to view full-size image)

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.Each item in the Categories Repeater needs to be clickable and, when clicked, cause the CategoryProducts DataList to display those products for the selected category. 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.This can be accomplished by making each category a hyperlink, linking back to this same page (CategoriesAndProducts.aspx), but passing the CategoryID through the querystring, much like we saw in the previous tutorial. 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.The advantage of this approach is that a page displaying a particular category s products can be bookmarked and indexed by a search engine.

Alternatif olarak, her bir kategoriyi Bu öğreticide kullanacağımız yaklaşım olan bir LinkButton yapabiliriz.Alternatively, we can make each category a LinkButton, which is the approach we'll use for this tutorial. 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.The LinkButton renders in the user s browser as a hyperlink but, when clicked, induces a postback; on postback, the DataList s ObjectDataSource needs to be refreshed to display those products belonging to the selected category. 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.For this tutorial, using a hyperlink makes more sense than using a LinkButton; however, there may be other scenarios where using a LinkButton is more advantageous. Köprü yaklaşımı Bu örnek için ideal olacaktır, bunun yerine LinkButton öğesini kullanmayı göz atalım.While the hyperlink approach would be ideal for this example, let s instead explore using the LinkButton. Göreceğiniz gibi, LinkButton 'ın kullanılması, bir köprüyle sonuçlanmayacak bazı güçlükleri ortaya koymaktadır.As we'll see, using a LinkButton introduces some challenges that would not otherwise arise with a hyperlink. 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.Therefore, using a LinkButton in this tutorial will highlight these challenges and help provide solutions for those scenarios where we may want to use a LinkButton instead of a hyperlink.

Note

Bu öğreticiyi, LinkButton yerine bir HyperLink denetimi veya <a> öğesi kullanarak tekrarlamanız önerilir.You are encouraged to repeat this tutorial using a HyperLink control or <a> element in lieu of the LinkButton.

Aşağıdaki biçimlendirme yineleyici ve ObjectDataSource için bildirime dayalı sözdizimini gösterir.The following markup shows the declarative syntax for the Repeater and the ObjectDataSource. Yineleyicisi 'nin şablonlarının her öğe için LinkButton olarak bir madde işaretli liste işlemesini unutmayın:Note that the Repeater s templates render a bulleted list with each item as a LinkButton:

<asp:Repeater ID="Categories" runat="server" DataSourceID="CategoriesDataSource">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li><asp:LinkButton runat="server" ID="ViewCategory" /></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).For this tutorial the Repeater must have its view state enabled (note the omission of the EnableViewState="False" from the Repeater s declarative syntax). 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.In step 3 we'll be creating an event handler for the Repeater s ItemCommand event in which we'll be updating the DataList s ObjectDataSource s SelectParameters collection. Yineleyiciye ItemCommand, ancak görünüm durumu devre dışıysa tetiklenmeyecektir.The Repeater s ItemCommand, however, won't fire if view state is disabled. 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.See A Stumper of an ASP.NET Question and its solution for more information on why view state must be enabled for a Repeater s ItemCommand event to fire.

ViewCategory ID özellik değerine sahip LinkButton, Text özellik kümesine sahip değil.The LinkButton with the ID property value of ViewCategory does not have its Text property set. Kategori adını yalnızca göstermek istiyorduk, metin özelliğini bildirimli olarak, veri bağlama söz dizimi ile şöyle ayarlayacağız:If we had just wanted to display the category name, we would have set the Text property declaratively, through databinding syntax, like so:

<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.However, we want to show both the category s name and the number of products belonging to that category. 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:This information can be retrieved from the Repeater s ItemDataBound event handler by making a call to the ProductBLL class s GetCategoriesByProductID(categoryID) method and determining how many records are returned in the resulting ProductsDataTable, as the following code illustrates:

protected void Categories_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // Make sure we're working with a data item...
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // Reference the CategoriesRow instance bound to this RepeaterItem
        Northwind.CategoriesRow category =
            (Northwind.CategoriesRow) ((System.Data.DataRowView) e.Item.DataItem).Row;
        // Determine how many products are in this category
        NorthwindTableAdapters.ProductsTableAdapter productsAPI =
            new NorthwindTableAdapters.ProductsTableAdapter();
        int productCount =
            productsAPI.GetProductsByCategoryID(category.CategoryID).Count;
        // Reference the ViewCategory LinkButton and set its Text property
        LinkButton ViewCategory = (LinkButton)e.Item.FindControl("ViewCategory");
        ViewCategory.Text =
            string.Format("{0} ({1:N0})", category.CategoryName, productCount);
    }
}

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.We start out by ensuring that we re working with a data item (one whose ItemType is Item or AlternatingItem) and then reference the CategoriesRow instance that has just been bound to the current RepeaterItem. 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.Next, we determine the number of products for this category by creating an instance of the ProductsBLL class, calling its GetCategoriesByProductID(categoryID) method, and determining the number of records returned using the Count property. 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.Finally, the ViewCategory LinkButton in the ItemTemplate is references and its Text property is set to CategoryName (NumberOfProductsInCategory), where NumberOfProductsInCategory is formatted as a number with zero decimal places.

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.Alternatively, we could have added a formatting function to the ASP.NET page s code-behind class that accepts a category s CategoryName and CategoryID values and returns the CategoryName concatenated with the number of products in the category (as determined by calling the GetCategoriesByProductID(categoryID) method). 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.The results of such a formatting function could be declaratively assigned to the LinkButton s Text property replacing the need for the ItemDataBound event handler. 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.Refer to the Using TemplateFields in the GridView Control or Formatting the DataList and Repeater Based Upon Data tutorials for more information on using formatting functions.

Bu olay işleyicisini ekledikten sonra sayfayı bir tarayıcı ile test etmek için bir dakikanızı ayırın.After adding this event handler, take a moment to test the page through a browser. 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).Note how each category is listed in a bulleted list, displaying the category s name and the number of products associated with the category (see Figure 4).

Her kategorinin adı ve ürün sayısı görüntülenirEach Category s Name and Number of Products are Displayed

Ş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)Figure 4: Each Category s Name and Number of Products are Displayed (Click to view full-size image)

CategoriesDataTableveCategoriesTableAdapterher bir kategorinin ürün sayısını Içerecek şekilde güncelleştiriliyorUpdating theCategoriesDataTableandCategoriesTableAdapterto Include the Number of Products for Each Category

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.Rather than determining the number of products for each category as it s bound to the Repeater, we can streamline this process by adjusting the CategoriesDataTable and CategoriesTableAdapter in the Data Access Layer to include this information natively. Bunu başarmak için, ilişkili ürünlerin sayısını tutmak üzere CategoriesDataTable yeni bir sütun eklememiz gerekir.To achieve this, we must add a new column to CategoriesDataTable to hold the number of associated products. 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.To add a new column to a DataTable, open the Typed DataSet (App_Code\DAL\Northwind.xsd), right-click on the DataTable to modify, and choose Add / Column. CategoriesDataTable yeni bir sütun ekleyin (bkz. Şekil 5).Add a new column to the CategoriesDataTable (see Figure 5).

Kategorilerverikaynağına yeni bir sütun eklemek Add a New Column to the CategoriesDataSource

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

Bu, yalnızca farklı bir ada yazarak değiştirebileceğiniz Column1adlı yeni bir sütun ekler.This will add a new column named Column1, which you can change by simply typing in a different name. Bu yeni sütunu NumberOfProductsolarak yeniden adlandırın.Rename this new column to NumberOfProducts. Daha sonra, bu sütun özelliklerini yapılandırmamız gerekir.Next, we need to configure this column s properties. Yeni sütununa tıklayın ve Özellikler penceresi gidin.Click on the new column and go to the Properties window. Ş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.Change the column s DataType property from System.String to System.Int32 and set the ReadOnly property to True, as shown in Figure 6.

Yeni sütunun DataType ve ReadOnly özelliklerini ayarla

Şekil 6: yeni sütunun DataType ve ReadOnly özelliklerini ayarlayınFigure 6: Set the DataType and ReadOnly Properties of the New Column

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.While the CategoriesDataTable now has a NumberOfProducts column, its value is not set by any of the corresponding TableAdapter s queries. 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.We can update the GetCategories() method to return this information if we want such information returned every time category information is retrieved. 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.If, however, we only need to grab the number of associated products for the categories in rare instances (such as just for this tutorial), then we can leave GetCategories() as-is and create a new method that returns this information. GetCategoriesAndNumberOfProducts()adlı yeni bir yöntem oluşturarak bu ikinci yaklaşımı kullanalım.Let s use this latter approach, creating a new method named GetCategoriesAndNumberOfProducts().

Bu yeni GetCategoriesAndNumberOfProducts() yöntemi eklemek için, CategoriesTableAdapter sağ tıklayıp yeni sorgu ' yı seçin.To add this new GetCategoriesAndNumberOfProducts() method, right-click on the CategoriesTableAdapter and choose New Query. Bu, önceki öğreticilerde çok sayıda kez kullandığımız TableAdapter sorgu Yapılandırma Sihirbazı 'nı getirir.This brings up the TableAdapter Query Configuration Wizard, which we ve used numerous times in previous tutorials. Bu yöntem için, sorgunun satırları döndüren bir geçici SQL ifadesini kullandığını belirterek sihirbazı başlatın.For this method, start the wizard by indicating that the query uses an ad-hoc SQL statement that returns rows.

geçici bir SQL Ifadesini kullanarak yöntem oluşturmaCreate the Method Using an Ad-Hoc SQL Statement

Ş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)Figure 7: Create the Method Using an Ad-Hoc SQL Statement (Click to view full-size image)

SQL deyimindeki satırları döndüren The SQL Statement Returns Rows

Şekil 8: SQL Ifadesinin satırları döndürmesi (tam boyutlu görüntüyü görüntülemek için tıklatın)Figure 8: The SQL Statement Returns Rows (Click to view full-size image)

Sonraki sihirbaz ekranı, sorgunun kullanması için bizi ister.The next wizard screen prompts us for the query to use. 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:To return each category s CategoryID, CategoryName, and Description fields, along with the number of products associated with the category, use the following SELECT statement:

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

Kullanılacak sorguyu belirtmek Specify the Query to Use

Şekil 9: kullanılacak sorguyu belirtin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 9: Specify the Query to Use (Click to view full-size image)

Kategorisiyle ilişkili ürün sayısını hesaplayan alt sorgunun NumberOfProductsolarak diğer adı olduğunu unutmayın.Note that the subquery that computes the number of products associated with the category is aliased as NumberOfProducts. Bu adlandırma eşleşmesi, bu alt sorgunun döndürdüğü değerin CategoriesDataTable s NumberOfProducts sütunuyla ilişkilendirilmesine neden olur.This naming match causes the value returned by this subquery to be associated with the CategoriesDataTable s NumberOfProducts column.

Bu sorguyu girdikten sonra, son adım yeni yöntemin adını seçmekte.After entering this query, the last step is to choose the name for the new method. DataTable Fill ve sırasıyla bir DataTable desenleri döndüren FillWithNumberOfProducts ve GetCategoriesAndNumberOfProducts kullanın.Use FillWithNumberOfProducts and GetCategoriesAndNumberOfProducts for the Fill a DataTable and Return a DataTable patterns, respectively.

Yeni TableAdapter s yöntemleri FillWithNumberOfProducts ve GetCategoriesAndNumberOfProducts adıName the New TableAdapter s Methods FillWithNumberOfProducts and GetCategoriesAndNumberOfProducts

Ş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)Figure 10: Name the New TableAdapter s Methods FillWithNumberOfProducts and GetCategoriesAndNumberOfProducts (Click to view full-size image)

Bu noktada, veri erişim katmanı kategori başına ürün sayısını içerecek şekilde genişletilmiştir.At this point the Data Access Layer has been extended to include the number of products per category. 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:Since all our presentation layer routes all calls to the DAL through a separate Business Logic Layer we need to add a corresponding GetCategoriesAndNumberOfProducts method to the CategoriesBLL class:

[System.ComponentModel.DataObjectMethodAttribute
    (System.ComponentModel.DataObjectMethodType.Select, false)]
public Northwind.CategoriesDataTable GetCategoriesAndNumberOfProducts()
{
    return Adapter.GetCategoriesAndNumberOfProducts();
}

DAL ve BLL ile, bu verileri CategoriesAndProducts.aspx``Categories yineleyicisi 'ne bağlamayı yeniden hazırlarız!With the DAL and BLL complete, we re ready to bind this data to the Categories Repeater in CategoriesAndProducts.aspx! 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.If you ve already created an ObjectDataSource for the Repeater from the Determining the Number of Products in the ItemDataBound Event Handler section, delete this ObjectDataSource and remove the Repeater s DataSourceID property setting; also unwire the Repeater s ItemDataBound event from the event handler by removing the Handles Categories.OnItemDataBound syntax in the ASP.NET code-behind class.

Yineleyici, özgün durumuna geri döndüğünüzde, yineleyici s akıllı etiketi aracılığıyla CategoriesDataSource adlı yeni bir ObjectDataSource ekleyin.With the Repeater back in its original state, add a new ObjectDataSource named CategoriesDataSource via the Repeater s smart tag. 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).Configure the ObjectDataSource to use the CategoriesBLL class, but instead of having it use the GetCategories() method, have it use GetCategoriesAndNumberOfProducts() instead (see Figure 11).

, GetCategoriesAndNumberOfProducts metodunu kullanmak için ObjectDataSource 'u yapılandırmaConfigure the ObjectDataSource to Use the GetCategoriesAndNumberOfProducts Method

Ş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)Figure 11: Configure the ObjectDataSource to Use the GetCategoriesAndNumberOfProducts Method (Click to view full-size image)

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.Next, update the ItemTemplate so that the LinkButton s Text property is declaratively assigned using databinding syntax and includes both the CategoryName and NumberOfProducts data fields. Yineleyici ve CategoriesDataSource ObjectDataSource için tüm bildirim temelli biçimlendirme şu şekilde yapılır:The complete declarative markup for the Repeater and the CategoriesDataSource ObjectDataSource follow:

<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.The output rendered by updating the DAL to include a NumberOfProducts column is the same as using the ItemDataBound event handler approach (refer back to Figure 4 to see a screen shot of the Repeater showing the category names and number of products).

3. Adım: Seçili Kategori ürünlerini görüntülemeStep 3: Displaying the Selected Category s Products

Bu noktada, kategorilerin listesini her bir kategorideki ürünlerin sayısıyla birlikte görüntüleyen Categories Yineleyici vardır.At this point we have the Categories Repeater displaying the list of categories along with the number of products in each category. 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.The Repeater uses a LinkButton for each category that, when clicked, causes a postback, at which point we need to display those products for the selected category in the CategoryProducts DataList.

Bizimle ilgili bir zorluk, DataList 'in seçili kategori için yalnızca bu ürünleri görüntülemesini sağlar.One challenge facing us is how to have the DataList display just those products for the selected category. 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.In the Master/Detail Using a Selectable Master GridView with a Details DetailsView tutorial we saw how to build a GridView whose rows could be selected, with the selected row s details being displayed in a DetailsView on the same page. 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.The GridView s ObjectDataSource returned information about all products using the ProductsBLL s GetProducts() method while the DetailsView s ObjectDataSource retrieved information about the selected product using the GetProductsByProductID(productID) method. productID parametre değeri, GridView s SelectedValue özelliğinin değeriyle ilişkilendirerek bildirimli olarak sağlandı.The productID parameter value was provided declaratively by associating it with the value of the GridView s SelectedValue property. Ne yazık ki, yineleyicisi bir SelectedValue özelliğine sahip değildir ve bir parametre kaynağı olarak görev alamaz.Unfortunately, the Repeater does not have a SelectedValue property and cannot serve as a parameter source.

Note

Bu, bir yineleyici içinde LinkButton kullanılırken görünen güçlüklerden biridir.This is one of those challenges that appear when using the LinkButton in a Repeater. 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.Had we used a hyperlink to pass in the CategoryID through the querystring instead, we could use that QueryString field as the source for the parameter s value.

Yineleyicisi için SelectedValue özelliğinin bulunmaması konusunda endişelenmemiz için önce DataList 'i bir ObjectDataSource 'a bağlasa ve ItemTemplatebelirteceğiz.Before we worry about the lack of a SelectedValue property for the Repeater, though, let s first bind the DataList to an ObjectDataSource and specify its ItemTemplate.

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.From the DataList s smart tag, opt to add a new ObjectDataSource named CategoryProductsDataSource and configure it to use the ProductsBLL class s GetProductsByCategoryID(categoryID) method. 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.Since the DataList in this tutorial offers a read-only interface, feel free to set the drop-down lists in the INSERT, UPDATE, and DELETE tabs to (None).

, ProductsBLL Class s Getproductsbycategoryıd (CategoryID) metodunu kullanacak şekilde yapılandırmaConfigure the ObjectDataSource to Use ProductsBLL Class s GetProductsByCategoryID(categoryID) Method

Ş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)Figure 12: Configure the ObjectDataSource to Use ProductsBLL Class s GetProductsByCategoryID(categoryID) Method (Click to view full-size image)

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.Since the GetProductsByCategoryID(categoryID) method expects an input parameter (categoryID), the Configure Data Source wizard allows us to specify the parameter s source. 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.Had the categories been listed in a GridView or a DataList, we d set the Parameter source drop-down list to Control and the ControlID to the ID of the data Web control. Ancak, yineleyicisi bir SelectedValue özelliğine sahip olmadığından parametre kaynağı olarak kullanılamaz.However, since the Repeater lacks a SelectedValue property it cannot be used as a parameter source. Onay ederseniz, ControlID açılır listesinin yalnızca bir denetim ID``CategoryProducts, DataList 'in ID içerdiğini göreceksiniz.If you check, you'll find that the ControlID drop-down list only contains one control ID``CategoryProducts, the ID of the DataList.

Şimdilik, parametre kaynağı açılır listesini hiçbiri olarak ayarlayın.For now, set the Parameter source drop-down list to None. Yineleyicisi 'nde bir Category LinkButton tıklandığında bu parametre değerini programlı olarak atamaya başlayacağız.We'll end up programmatically assigning this parameter value when a category LinkButton is clicked in the Repeater.

CategoryID parametresi için bir parametre kaynağı belirtmeyin Do Not Specify a Parameter Source for the categoryID Parameter

Ş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)Figure 13: Do Not Specify a Parameter Source for the categoryID Parameter (Click to view full-size image)

Veri kaynağı Yapılandırma Sihirbazı 'nı tamamladıktan sonra, Visual Studio, DataList s ItemTemplateotomatik olarak oluşturur.After completing the Configure Data Source wizard, Visual Studio auto-generates the DataList s ItemTemplate. Bu varsayılan ItemTemplate, önceki öğreticide kullandığımız şablonla değiştirin; Ayrıca, DataList s RepeatColumns özelliğini 2 olarak ayarlayın.Replace this default ItemTemplate with the template we used in the preceding tutorial; also, set the DataList s RepeatColumns property to 2. 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:After making these changes the declarative markup for your DataList and its associated ObjectDataSource should look like the following:

<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.Currently, the CategoryProductsDataSource ObjectDataSource s categoryID parameter is never set, so no products are displayed when viewing the page. Bu parametre değerinin, yineleyici içindeki tıklanan kategorinin CategoryID göre ayarlanmış olması gerekir.What we need to do is have this parameter value set based on the CategoryID of the clicked category in the Repeater. 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?This introduces two challenges: first, how do we determine when a LinkButton in the Repeater s ItemTemplate has been clicked; and second, how can we determine the CategoryID of the corresponding category whose LinkButton was clicked?

Düğme ve ImageButton denetimleri gibi LinkButton, bir Click olayına ve bir Command olayınasahiptir.The LinkButton like the Button and ImageButton controls has a Click event and a Command event. Click olay, LinkButton öğesine tıklandığına işaret etmek üzere tasarlanmıştır.The Click event is designed to simply note that the LinkButton has been clicked. Ancak, LinkButton ' ın tıklandığını belirten ek olarak, olay işleyicisine bazı ek bilgiler iletmemiz gerekir.At times, however, in addition to noting that the LinkButton has been clicked we also need to pass some extra information to the event handler. Bu durumda, LinkButton s CommandName ve CommandArgument özelliklerine bu ek bilgiler atanabilir.If this is the case, the LinkButton s CommandName and CommandArgument properties can be assigned this extra information. 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.Then, when the LinkButton is clicked, its Command event fires (instead of its Click event) and the event handler is passed the values of the CommandName and CommandArgument properties.

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.When a Command event is raised from within a template in the Repeater, the Repeater s ItemCommand event fires and is passed the CommandName and CommandArgument values of the clicked LinkButton (or Button or ImageButton). Bu nedenle, yineleyici içindeki bir kategori LinkButton 'ın ne zaman tıklandığını anlamak için aşağıdakileri yapmanız gerekir:Therefore, to determine when a category LinkButton in the Repeater has been clicked, we need to do the following:

  1. Repeater s ItemTemplate LinkButton 'ın CommandName özelliğini bir değere ayarlayın (ListProducts kullandım).Set the CommandName property of the LinkButton in the Repeater s ItemTemplate to some value (I ve used ListProducts ). Bu CommandName değerini ayarlayarak LinkButton s Command olayı LinkButton tıklandığında ateşlenir.By setting this CommandName value, the LinkButton s Command event fires when the LinkButton is clicked.
  2. LinkButton s CommandArgument özelliğini geçerli öğe s CategoryIDdeğerine ayarlayın.Set the LinkButton s CommandArgument property to the value of the current item s CategoryID.
  3. Yineleyici s ItemCommand olayı için bir olay işleyicisi oluşturun.Create an event handler for the Repeater s ItemCommand event. Olay işleyicisinde CategoryProductsDataSource ObjectDataSource s CategoryID parametresini, geçirilen CommandArgumentdeğerine ayarlayın.In the event handler, set the CategoryProductsDataSource ObjectDataSource s CategoryID parameter to the value of the passed-in CommandArgument.

Yineleyici kategoriler için aşağıdaki ItemTemplate biçimlendirmesi 1 ve 2. adımları uygular.The following ItemTemplate markup for the Categories Repeater implements steps 1 and 2. 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:Note how the CommandArgument value is assigned the data item s CategoryID using databinding syntax:

<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.Whenever creating an ItemCommand event handler it is prudent to always first check the incoming CommandName value because any Command event raised by any Button, LinkButton, or ImageButton within the Repeater will cause the ItemCommand event to fire. Ş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.While we currently only have one such LinkButton now, in the future we (or another developer on our team) might add additional button Web controls to the Repeater that, when clicked, raises the same ItemCommand event handler. 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.Therefore, it s best to always make sure you check the CommandName property and only proceed with your programmatic logic if it matches up to the value expected.

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.After ensuring that the passed-in CommandName value equals ListProducts, the event handler then assigns the CategoryProductsDataSource ObjectDataSource s CategoryID parameter to the value of the passed-in CommandArgument. 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.This modification to the ObjectDataSource s SelectParameters automatically causes the DataList to rebind itself to the data source, showing the products for the newly selected category.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    // If it's the "ListProducts" command that has been issued...
    if (string.Compare(e.CommandName, "ListProducts", true) == 0)
    {
        // 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();
    }
}

Bu eklemeler sayesinde öğreticimiz tamamlanmıştır!With these additions, our tutorial is complete! Bir tarayıcıda test etmek için bir dakikanızı ayırın.Take a moment to test it out in a browser. Şekil 14, sayfayı ilk ziyaret eden ekranı gösterir.Figure 14 shows the screen when first visiting the page. Bir kategori henüz seçilememiştir, hiçbir ürün gösterilmez.Since a category has yet to be selected, no products are displayed. 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).Clicking on a category, such as Produce, displays those products in the Product category in a two-column view (see Figure 15).

sayfa Ilk ziyaret edildiğinde hiçbir ürün gösterilmezNo Products are Displayed When First Visiting the Page

Ş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)Figure 14: No Products are Displayed When First Visiting the Page (Click to view full-size image)

Üretim kategorisine tıklanması , doğru eşleşen ürünleri listelerClicking the Produce Category Lists the Matching Products to the Right

Ş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)Figure 15: Clicking the Produce Category Lists the Matching Products to the Right (Click to view full-size image)

ÖzetSummary

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.As we saw in this tutorial and the preceding one, master/detail reports can be spread out across two pages, or consolidated on one. 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.Displaying a master/details report on a single page, however, introduces some challenges on how best to layout the master and details records on the page. 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.In the Master/Detail Using a Selectable Master GridView with a Details DetailsView tutorial we had the details records appear above the master records; in this tutorial we used CSS techniques to have the master records float to the left of the details.

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.Along with displaying master/details reports, we also had the opportunity to explore how to retrieve the number of products associated with each category as well as how to perform server-side logic when a LinkButton (or Button or ImageButton) is clicked from within a Repeater.

Bu öğretici, DataList ve Repeater ile ana/ayrıntı raporlarının incelemesini tamamlar.This tutorial completes our examination of master/detail reports with the DataList and Repeater. Sonraki öğreticilerimiz, DataList denetimine nasıl özellik ekleneceğini ve bu yeteneklerin nasıl ekleneceğini gösterir.Our next set of tutorials will illustrate how to add editing and deleting capabilities to the DataList control.

Programlamanın kutlu olsun!Happy Programming!

Daha Fazla BilgiFurther Reading

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:For more information on the topics discussed in this tutorial, refer to the following resources:

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 müşteri adayı gözden geçireni, Zack Jones idi.Lead reviewer for this tutorial was Zack Jones. 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.