Veri öğelerini ve ayrıntılarını görüntüleme

by Erik Reitan

Bu öğretici serisi, ASP.NET 4,7 ve Microsoft Visual Studio 2017 ile bir ASP.NET Web Forms uygulamasının oluşturulmasına ilişkin temel bilgileri öğretir.

Bu öğreticide, ASP.NET Web Forms ve Code First Entity Framework ile veri öğelerini ve veri öğesi ayrıntılarını görüntülemeyi öğreneceksiniz. Bu öğretici, Wingtip Oyunstore öğretici serisinin bir parçası olarak önceki "UI ve gezinti" öğreticisini oluşturur. Bu Öğreticiyi tamamladıktan sonra Productslist. aspx sayfasında ürünleri ve ProductDetails. aspx sayfasında bir ürünün ayrıntılarını görürsünüz.

Şunları öğrenirsiniz:

  • Veritabanındaki ürünleri göstermek için bir veri denetimi ekleyin
  • Veri denetimini seçili verilere bağlama
  • Veritabanından ürün ayrıntılarını göstermek için bir veri denetimi ekleyin
  • Sorgu dizesinden bir değer alın ve veritabanından alınan verileri sınırlamak için bu değeri kullanın

Bu öğreticide tanıtılan Özellikler:

  • Model bağlama
  • Değer sağlayıcıları

Veri denetimi ekleme

Bir sunucu denetimine veri bağlamak için birkaç farklı seçenek kullanabilirsiniz. En yaygın şunlar şunlardır:

  • Veri kaynağı denetimi ekleme
  • El ile kod ekleme
  • Model bağlamayı kullanma

Veri bağlamak için bir veri kaynağı denetimi kullanın

Veri kaynağı denetimi eklemek, veri kaynağı denetimini verileri görüntüleyen denetime bağlayabilmeniz için izin verir. Bu yaklaşımda, programlı olarak değil, sunucu tarafı denetimlerini veri kaynaklarına bağlamak için bildirimli olarak kullanabilirsiniz.

Verileri bağlamak için el ile kod

El ile kodlama şunları içerir:

  1. Bir değer okunuyor
  2. Null olup olmadığı denetleniyor
  3. Uygun bir türe dönüştürülüyor
  4. Dönüştürme başarılı denetleniyor
  5. Sorgudaki değeri kullanma

Bu yaklaşım, veri erişim mantığınız üzerinde tam denetime sahip olmanızı sağlar.

Veri bağlamak için model bağlamayı kullanma

Model bağlama, sonuçları çok daha az kodla bağlamanızı sağlar ve uygulamanızı genelinde işlevselliği yeniden kullanma olanağı sunar. Hala zengin, veri bağlama çerçevesi sağlarken kod odaklı veri erişim mantığı ile çalışmayı basitleştirir.

Ürünleri görüntüleme

Bu öğreticide, veri bağlamak için model bağlamayı kullanacaksınız. Veri seçmek üzere model bağlamayı kullanmak üzere bir veri denetimi yapılandırmak için, denetimin SelectMethod özelliğini sayfanın kodundaki bir yöntem adına ayarlarsınız. Veri denetimi, yöntemi sayfa yaşam döngüsünde uygun zamanda çağırır ve döndürülen verileri otomatik olarak bağlar. DataBind yöntemi açıkça çağrılmaya gerek yoktur.

  1. Çözüm Gezgini, ProductList. aspx' i açın.

  2. Var olan işaretlemeyi bu biçimlendirme ile değiştirin:

    <%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
             CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <section>
            <div>
                <hgroup>
                    <h2><%: Page.Title %></h2>
                </hgroup>
    
                <asp:ListView ID="productList" runat="server" 
                    DataKeyNames="ProductID" GroupItemCount="4"
                    ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts">
                    <EmptyDataTemplate>
                        <table >
                            <tr>
                                <td>No data was returned.</td>
                            </tr>
                        </table>
                    </EmptyDataTemplate>
                    <EmptyItemTemplate>
                        <td/>
                    </EmptyItemTemplate>
                    <GroupTemplate>
                        <tr id="itemPlaceholderContainer" runat="server">
                            <td id="itemPlaceholder" runat="server"></td>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td runat="server">
                            <table>
                                <tr>
                                    <td>
                                        <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                            <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
                                                width="100" height="75" style="border: solid" /></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
                                            <span>
                                                <%#:Item.ProductName%>
                                            </span>
                                        </a>
                                        <br />
                                        <span>
                                            <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
                                        </span>
                                        <br />
                                    </td>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                            </p>
                        </td>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <table style="width:100%;">
                            <tbody>
                                <tr>
                                    <td>
                                        <table id="groupPlaceholderContainer" runat="server" style="width:100%">
                                            <tr id="groupPlaceholder"></tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                </tr>
                                <tr></tr>
                            </tbody>
                        </table>
                    </LayoutTemplate>
                </asp:ListView>
            </div>
        </section>
    </asp:Content>
    

Bu kod, ürünleri göstermek için productList adlı bir ListView denetimi kullanır.

<asp:ListView ID="productList" runat="server"

Şablonlar ve stiller ile ListView denetiminin verileri nasıl görüntülediğini tanımlarsınız. Herhangi bir yinelenen yapıdaki veriler için faydalıdır. Bu ListView örneği yalnızca veritabanı verilerini görüntülüyor olsa da, kod olmadan, kullanıcıların verileri düzenlemesini, eklemesini ve silmesini ve verileri sıralama ve görüntüleme olanağı sağlar.

ListView denetimindeki ItemType özelliğini ayarlayarak, veri bağlama ifadesi Item kullanılabilir ve denetimin türü kesin olarak belirlenmiş olur. Önceki öğreticide belirtildiği gibi, ProductNamebelirtmek gibi IntelliSense ile öğe nesnesi ayrıntılarını seçebilirsiniz:

Veri öğelerini ve ayrıntıları görüntüleme-IntelliSense

Ayrıca, SelectMethod bir değer belirtmek için model bağlama de kullanıyorsunuz. Bu değer (GetProducts), sonraki adımda ürünlerin gösterilmesi için arka plandaki koda ekleyeceğiniz yönteme karşılık gelir.

Ürünleri göstermek için kod ekleme

Bu adımda, veritabanındaki ürün verileriyle ListView denetimini doldurmak için kod ekleyeceksiniz. Kod, tüm ürünlerin ve bireysel kategori ürünlerinin gösterilmesini destekler.

  1. Çözüm Gezgini, ProductList. aspx öğesine sağ tıklayın ve ardından kodu görüntüle' yi seçin.

  2. ProductList.aspx.cs dosyasındaki mevcut kodu şu kodla değiştirin:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WingtipToys.Models;
    using System.Web.ModelBinding;
    
    namespace WingtipToys
    {
        public partial class ProductList : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId)
            {
                var _db = new WingtipToys.Models.ProductContext();
                    IQueryable<Product> query = _db.Products;
                    if (categoryId.HasValue && categoryId > 0)
                    {
                        query = query.Where(p => p.CategoryID == categoryId);
                    }
                    return query;
            }
        }
    }
    

Bu kod, ListView denetiminin ItemType özelliğinin ProductList. aspx sayfasında başvurduğu GetProducts yöntemini gösterir. Sonuçları belirli bir veritabanı kategorisiyle sınırlamak için, kod ProductList. aspx sayfasına gidildiği zaman ProductList. aspx sayfasına geçirilen sorgu dizesi değerindeki categoryId değerini ayarlar. System.Web.ModelBinding ad alanındaki QueryStringAttribute sınıfı, idsorgu dizesi değişkeninin değerini almak için kullanılır. Bu, model bağlamaya, sorgu dizesinden bir değeri, çalışma zamanında categoryId parametresine bağlamayı denemeye yönlendirir.

Geçerli bir kategori bir sorgu dizesi olarak sayfaya geçirildiğinde, sorgunun sonuçları, veritabanındaki categoryId değerle eşleşen bu ürünlerle sınırlıdır. Örneğin, Productslist. aspx sayfası URL 'si ise:

http://localhost/ProductList.aspx?id=1

Sayfa yalnızca categoryId 1eşit olan ürünleri görüntüler.

Tüm ürünler, ProductList. aspx sayfası çağrıldığında hiçbir sorgu dizesi dahil edilmediğinde görüntülenir.

Bu yöntemlere ait değer kaynakları, değer sağlayıcıları ( QueryStringgibi) olarak adlandırılır ve kullanılacak değer sağlayıcısını belirten parametre öznitelikleri, değer sağlayıcı öznitelikleri (örneğin, id) olarak adlandırılır. ASP.NET, sorgu dizesi, tanımlama bilgileri, form değerleri, denetimler, Görünüm durumu, oturum durumu ve profil özellikleri gibi Web Forms bir uygulamadaki tüm tipik Kullanıcı girişi kaynakları için değer sağlayıcıları ve karşılık gelen öznitelikler içerir. Ayrıca, özel değer sağlayıcıları yazabilirsiniz.

Uygulamayı çalıştırma

Tüm ürünleri veya bir kategorinin ürünlerini görüntülemek için uygulamayı şimdi çalıştırın.

  1. Uygulamayı çalıştırmak için Visual Studio 'da F5 tuşuna basın.
    Tarayıcı açılır ve default. aspx sayfasını gösterir.

  2. Ürün kategorisi gezinti menüsünden otomobilleri seçin.
    ProductList. aspx sayfası yalnızca araba kategorisi ürünlerini gösterir. Bu öğreticide daha sonra ürün ayrıntıları görüntülenir.

    Veri öğelerini ve ayrıntılarını görüntüleme-otomobiller

  3. Üstteki gezinti menüsünden Ürünler ' i seçin.
    Ayrıca, ProductList. aspx sayfası görüntülenir, ancak bu kez tüm ürün listesini gösterir.

    Veri öğelerini ve ayrıntıları görüntüleme-ürünler

  4. Tarayıcıyı kapatın ve Visual Studio 'ya geri dönün.

Ürün ayrıntılarını göstermek için bir veri denetimi ekleyin

Daha sonra, belirli ürün bilgilerini göstermek için önceki öğreticide eklediğiniz ProductDetails. aspx sayfasındaki biçimlendirmeyi değiştireceksiniz.

  1. Çözüm Gezgini' de ProductDetails. aspx' i açın.

  2. Var olan işaretlemeyi bu biçimlendirme ile değiştirin:

    <%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
             CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false">
            <ItemTemplate>
                <div>
                    <h1><%#:Item.ProductName %></h1>
                </div>
                <br />
                <table>
                    <tr>
                        <td>
                            <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/>
                        </td>
                        <td>&nbsp;</td>  
                        <td style="vertical-align: top; text-align:left;">
                            <b>Description:</b><br /><%#:Item.Description %>
                            <br />
                            <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.UnitPrice) %></span>
                            <br />
                            <span><b>Product Number:</b>&nbsp;<%#:Item.ProductID %></span>
                            <br />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:FormView>
    </asp:Content>
    

    Bu kod, belirli ürün ayrıntılarını göstermek için bir FormView denetimi kullanır. Bu biçimlendirme, ProductList. aspx sayfasında verileri göstermek için kullanılan yöntemler gibi yöntemleri kullanır. FormView denetimi, bir veri kaynağından tek seferde tek bir kayıt göstermek için kullanılır. FormView denetimini kullandığınızda, veri bağlantılı değerleri göstermek ve düzenlemek için şablonlar oluşturursunuz. Bu şablonlar denetimleri, bağlama ifadelerini ve formun görünümünü ve işlevselliğini tanımlayan biçimlendirmeyi içerir.

Önceki biçimlendirmeyi veritabanına bağlamak ek kod gerektirir.

  1. Çözüm Gezgini, ProductDetails. aspx öğesine sağ tıklayın ve ardından kodu görüntüle' ye tıklayın.
    ProductDetails.aspx.cs dosyası görüntülenir.

  2. Mevcut kodu şu kodla değiştirin:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using WingtipToys.Models;
    using System.Web.ModelBinding;
    
    namespace WingtipToys
    {
        public partial class ProductDetails : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            public IQueryable<Product> GetProduct([QueryString("productID")] int? productId)
            {
                var _db = new WingtipToys.Models.ProductContext();
                    IQueryable<Product> query = _db.Products;
                    if (productId.HasValue && productId > 0)
                    {
                        query = query.Where(p => p.ProductID == productId);
                    }
                    else
                    {
                        query = null;
                    }
                    return query;
            }
        }
    }
    

Bu kod, bir "productID" sorgu dizesi değeri olup olmadığını denetler. Geçerli bir sorgu dizesi değeri bulunursa, eşleşen ürün görüntülenir. Sorgu dizesi bulunmazsa veya değeri geçerli değilse, ürün gösterilmez.

Uygulamayı çalıştırma

Artık, ürün KIMLIĞI temelinde bir ürünün görüntülendiğini görmek için uygulamayı çalıştırabilirsiniz.

  1. Uygulamayı çalıştırmak için Visual Studio 'da F5 tuşuna basın.
    Tarayıcı açılır ve default. aspx sayfasını gösterir.

  2. Kategori gezinti menüsünden Boats öğesini seçin.
    ProductList. aspx sayfası görüntülenir.

  3. Ürün listesinden Kağıt bot ' ı seçin. ProductDetails. aspx sayfası görüntülenir.

    Veri öğelerini ve ayrıntıları görüntüleme-ürünler

  4. Tarayıcıyı kapatın.

Ek kaynaklar

Model bağlama ve Web formları ile verileri alma ve görüntüleme

Sonraki adımlar

Bu öğreticide, ürünleri ve ürün ayrıntılarını göstermek için biçimlendirme ve kod eklediniz. Kesin tür belirtilmiş veri denetimleri, model bağlama ve değer sağlayıcıları hakkında bilgi edindiniz. Sonraki öğreticide, Wingtip Toys örnek uygulamasına bir alışveriş sepeti ekleyeceksiniz.