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

Makale
07/13/2023

Bu öğretici serisi, ASP.NET 4.7 ve Microsoft Visual Studio 2017 ile ASP.NET Web Forms uygulaması oluşturmanın temellerini öğretir.

Bu öğreticide, ASP.NET Web Forms ve Entity Framework Code First ile veri öğelerini ve veri öğesi ayrıntılarını görüntülemeyi öğreneceksiniz. Bu öğretici, Wingtip Oyuncak Mağazası öğ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örüntülemek için veri denetimi ekleme
Seçili verilere veri denetimi bağlama
Veritabanındaki ürün ayrıntılarını görüntülemek için veri denetimi ekleme
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 sunulan ö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 alt komutlar şunlardır:

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

Verileri bağlamak için veri kaynağı denetimi kullanma

Veri kaynağı denetimi eklemek, veri kaynağı denetimini verileri görüntüleyen denetime bağlamanızı sağlar. Bu yaklaşımla, sunucu tarafı denetimlerini program aracılığıyla değil bildirim temelli olarak veri kaynaklarına bağlayabilirsiniz.

Verileri bağlamak için elle kodlayın

Elle kodlama şunları içerir:

Değer okuma
Null olup olmadığını denetleme
Uygun bir türe dönüştürme
Dönüştürme başarısı denetleniyor
Sorgudaki değeri kullanma

Bu yaklaşım, veri erişim mantığınız üzerinde tam denetim sahibi olmanıza olanak tanır.

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

Model bağlama, sonuçları çok daha az kodla bağlamanıza olanak tanır ve işlevi uygulamanızda yeniden kullanabilmenizi sağlar. Zengin, veri bağlama çerçevesi sağlamaya devam ederken kod odaklı veri erişim mantığıyla çalışmayı kolaylaştırır.

Ürünleri görüntüleme

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

Çözüm Gezgini'daProductList.aspx dosyasını açın.

Var olan işaretlemeyi şu işaretlemeyle 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örüntülemek için adlı productList bir ListView denetimi kullanır.

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

Şablonlar ve stiller sayesinde ListView denetiminin verileri nasıl görüntülediği açıklanır. Yinelenen herhangi bir yapıdaki veriler için yararlıdır. Bu ListView örneği yalnızca veritabanı verilerini görüntülese de, kod olmadan kullanıcıların verileri düzenlemesine, eklemesine ve silmesine, verileri sıralamasına ve sayfaya eklemesine de olanak tanıyabilirsiniz.

ListView denetiminde özelliğini ayarlayarakItemType, veri bağlama ifadesi Item kullanılabilir ve denetim kesin olarak yazılır. Önceki öğreticide belirtildiği gibi, IntelliSense ile Öğe nesnesi ayrıntıları'nı ProductNameseçebilirsiniz, örneğin:

Veri Öğelerini ve Ayrıntıları Görüntüleme - IntelliSense

Ayrıca bir SelectMethod değer belirtmek için model bağlaması da kullanıyorsunuz. Bu değer (GetProducts), sonraki adımda ürünleri görüntülemek için arkadaki koda ekleyeceğiniz yönteme karşılık gelir.

Ürünleri görüntülemek için kod ekleme

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

Çözüm Gezgini'daProductList.aspx'e sağ tıklayın ve kodu görüntüle'yi seçin.

ProductList.aspx.cs dosyasındaki mevcut kodu şununla 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 ItemTypeProductList.aspx sayfasında özellik başvurusu yaptığı yöntemi gösterirGetProducts. Sonuçları belirli bir veritabanı kategorisiyle sınırlamak için kod, ProductList.aspx sayfasına gidildiğinde ProductList.aspx sayfasına geçirilen sorgu dizesi değerinden değeri ayarlarcategoryId. QueryStringAttribute ad alanında System.Web.ModelBinding sınıfı, sorgu dizesi değişkeninin iddeğerini almak için kullanılır. Bu, model bağlamanın çalışma zamanında sorgu dizesinden parametreye bir değer bağlamayı denemesini categoryId sağlar.

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

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

Sayfada yalnızca öğesinin eşit 1olduğu categoryId ürünler görüntülenir.

ProductList.aspx sayfası çağrıldığında sorgu dizesi eklenmediğinde tüm ürünler görüntülenir.

Bu yöntemlerin değer kaynaklarına değer sağlayıcıları ( QueryString gibi) ve kullanılacak değer sağlayıcısını belirten parametre öznitelikleri değer sağlayıcısı öznitelikleri (gibi id) olarak adlandırılır. ASP.NET sorgu dizesi, tanımlama bilgileri, form değerleri, denetimler, görüntüleme durumu, oturum durumu ve profil özellikleri gibi bir Web Forms uygulamasındaki tüm tipik kullanıcı girişi kaynakları için değer sağlayıcılarını ve bunlara karşılık gelen öznitelikleri içerir. Özel değer sağlayıcıları da yazabilirsiniz.

Uygulamayı çalıştırma

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

Uygulamayı çalıştırmak için Visual Studio'dayken F5 tuşuna basın.
Tarayıcı açılır ve Default.aspx sayfasını gösterir.
Ürün kategorisi gezinti menüsünden Arabalar'ı seçin.
ProductList.aspx sayfasında yalnızca Otomobil kategorisi ürünleri gösterilir. Bu öğreticinin ilerleyen bölümlerinde ürün ayrıntılarını görüntüleyeceksiniz.
Üstteki gezinti menüsünden Ürünler'i seçin.
Yine ProductList.aspx sayfası görüntülenir, ancak bu kez ürün listesinin tamamını gösterir.
Tarayıcıyı kapatın ve Visual Studio'ya dönün.

Ürün ayrıntılarını görüntülemek için veri denetimi ekleme

Ardından, belirli ürün bilgilerini görüntülemek için önceki öğreticide eklediğiniz ProductDetails.aspx sayfasındaki işaretlemeyi değiştireceksiniz.

Çözüm Gezgini'daProductDetails.aspx dosyasını açın.

Var olan işaretlemeyi şu işaretlemeyle 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örüntülemek için bir FormView denetimi kullanır. Bu işaretleme , ProductList.aspx sayfasındaki verileri görüntülemek için kullanılan yöntemler gibi yöntemleri kullanır. FormView denetimi, bir veri kaynağından tek seferde tek bir kaydı görüntülemek için kullanılır. FormView denetimini kullandığınızda, veriye bağlı değerleri görüntülemek ve düzenlemek için şablonlar oluşturursunuz. Bu şablonlar, formun görünümünü ve işlevselliğini tanımlayan denetimler, bağlama ifadeleri ve biçimlendirme içerir.

Önceki işaretlemenin veritabanına bağlanması için ek kod gerekir.

Çözüm Gezgini'daProductDetails.aspx'e sağ tıklayın ve ardından Kodu Görüntüle'ye tıklayın.
ProductDetails.aspx.cs dosyası görüntülenir.

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ğerini denetler. Geçerli bir sorgu dizesi değeri bulunursa eşleşen ürün görüntülenir. Sorgu dizesi bulunamazsa veya değeri geçerli değilse hiçbir ürün görüntülenmez.

Uygulamayı çalıştırma

Artık uygulamayı çalıştırarak ürün kimliğine göre tek bir ürünün görüntülendiğini görebilirsiniz.

Uygulamayı çalıştırmak için Visual Studio'dayken F5 tuşuna basın.
Tarayıcı açılır ve Default.aspx sayfasını gösterir.
Kategori gezinti menüsünde Tekneler'i seçin.
ProductList.aspx sayfası görüntülenir.
Ürün listesinden Kağıt Tekne'yi seçin. ProductDetails.aspx sayfası görüntülenir.
Tarayıcıyı kapatın.

Ek kaynaklar

Model bağlama ve web formlarıyla verileri alma ve görüntüleme

Sonraki adımlar

Bu öğreticide, ürünleri ve ürün ayrıntılarını görüntülemek için işaretleme ve kod eklediniz. Kesin olarak yazılan veri denetimleri, model bağlama ve değer sağlayıcıları hakkında bilgi edindiyseniz. Sonraki öğreticide Wingtip Toys örnek uygulamasına bir alışveriş sepeti ekleyeceksiniz.

Önceki Sonraki

Aracılığıyla paylaş

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

Şunları öğrenirsiniz:

Bu öğreticide sunulan özellikler:

Veri denetimi ekleme

Verileri bağlamak için veri kaynağı denetimi kullanma

Verileri bağlamak için elle kodlayın

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

Ürünleri görüntüleme

Ürünleri görüntülemek için kod ekleme

Uygulamayı çalıştırma

Ürün ayrıntılarını görüntülemek için veri denetimi ekleme

Uygulamayı çalıştırma

Ek kaynaklar

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar