Kullanıcı Arabirimi ve Gezinti

Makale
07/13/2023

Wingtip Toys Örnek Proje (C#) veya E-kitabı İndir (PDF)

Bu öğretici serisi, web için ASP.NET 4.5 ve Microsoft Visual Studio Express 2013 kullanarak ASP.NET Web Forms uygulaması oluşturmanın temellerini öğretecektir. Bu öğretici serisine eşlik etmek için C# kaynak koduna sahip bir Visual Studio 2013 projesi kullanılabilir.

Bu öğreticide varsayılan Web uygulamasının kullanıcı arabirimini Wingtip Toys mağazası ön uygulamasının özelliklerini destekleyecek şekilde değiştireceksiniz. Ayrıca, basit ve veriye bağlı gezinti de ekleyebilirsiniz. Bu öğretici, önceki "Veri Erişim Katmanını Oluşturma" öğreticisini temel alır ve Wingtip Toys öğretici serisinin bir parçasıdır.

Öğrenecekleriniz:

Wingtip Toys mağazası ön uygulamasının özelliklerini destekleyecek şekilde kullanıcı arabirimini değiştirme.
Html5 öğesini sayfa gezintisini içerecek şekilde yapılandırma.
Belirli ürün verilerine gitmek için veri temelli denetim oluşturma.
Entity Framework Code First kullanılarak oluşturulan bir veritabanından verileri görüntüleme.

ASP.NET Web Forms Web uygulamanız için dinamik içerik oluşturmanıza olanak sağlar. Her ASP.NET Web sayfası statik HTML Web sayfasına (sunucu tabanlı işleme içermeyen bir sayfa) benzer şekilde oluşturulur, ancak ASP.NET Web sayfası, sayfa çalıştığında HTML oluşturmak için ASP.NET tanıyan ve işleyen ek öğeler içerir.

Statik HTML sayfasıyla (.htm veya .html dosyası), sunucu dosyayı okuyup tarayıcıya olduğu gibi göndererek bir Web isteği yerine getiriyor. Buna karşılık, birisi bir ASP.NET Web sayfası (.aspx dosyası) istediğinde, sayfa Web sunucusunda bir program olarak çalışır. Sayfa çalışırken, değerleri hesaplama, veritabanı bilgilerini okuma veya yazma ya da diğer programları çağırma gibi Web sitenizin gerektirdiği herhangi bir görevi gerçekleştirebilir. Çıktı olarak, sayfa dinamik olarak işaretleme (HTML'deki öğeler gibi) oluşturur ve bu dinamik çıkışı tarayıcıya gönderir.

Kullanıcı arabirimini değiştirme

Default.aspx sayfasını değiştirerek bu öğretici serisine devam edersiniz. Uygulamayı oluşturmak için kullanılan varsayılan şablon tarafından önceden oluşturulmuş olan kullanıcı arabirimini değiştireceksiniz. Herhangi bir Web Forms uygulaması oluştururken, yapacağınız değişikliklerin türü tipiktir. Bunu başlığı değiştirerek, bazı içerikleri değiştirerek ve gereksiz varsayılan içeriği kaldırarak yapacaksınız.

Default.aspx sayfasını açın veya bu sayfaya geçin.
Sayfa Tasarım görünümünde görünüyorsa Kaynak görünümüne geçin.

Yönergesindeki sayfanın @Page üst kısmında, özniteliğini Title aşağıda sarı renkle vurgulandığı gibi "Hoş Geldiniz" olarak değiştirin.

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

Ayrıca Default.aspx sayfasında, etikette <asp:Content> yer alan tüm varsayılan içeriği değiştirerek işaretlemenin aşağıda gösterildiği gibi görünmesini sağlayın.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Dosyamenüsünden Default.aspxDosyasını Kaydet'i seçerek Default.aspx sayfasını kaydedin.

Sonuçta elde edilen Default.aspx sayfası aşağıdaki gibi görünür:

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Örnekte yönergesinin @Page özniteliğini Title ayarlamışsınız. HTML bir tarayıcıda görüntülendiğinde, sunucu kodu <%: Page.Title %> özniteliğinde Title yer alan içeriğe çözümleniyor.

Örnek sayfa, ASP.NET Web sayfasını oluşturan temel öğeleri içerir. Sayfa, html sayfasında olduğu gibi statik metin ve ASP.NET özgü öğeler içerir. Default.aspx sayfasında yer alan içerik, ana sayfa içeriğiyle tümleştirilecek ve bu içerik bu öğreticinin ilerleyen bölümlerinde açıklanacaktır.

@Page Yönergesi

ASP.NET Web Forms genellikle sayfa için sayfa özelliklerini ve yapılandırma bilgilerini belirtmenize olanak sağlayan yönergeler içerir. yönergeleri, ASP.NET tarafından sayfanın nasıl işlendiğine ilişkin yönergeler olarak kullanılır, ancak tarayıcıya gönderilen işaretlemenin bir parçası olarak işlenmez.

En yaygın kullanılan yönerge, sayfa için aşağıdakiler de dahil olmak üzere birçok yapılandırma seçeneği belirtmenize olanak tanıyan yönergedir @Page :

Sayfadaki kod için C# gibi sunucu programlama dili.
Sayfanın, tek dosyalı sayfa olarak adlandırılan doğrudan sayfada sunucu kodunu içeren bir sayfa olup olmadığı veya arka planda kod olarak adlandırılan ayrı bir sınıf dosyasında kod içeren bir sayfa olup olmadığı.
Sayfanın ilişkili bir ana sayfası olup olmadığı ve bu nedenle içerik sayfası olarak kabul edilip edilmeyeceği.
Hata ayıklama ve izleme seçenekleri.

Sayfaya yönerge eklemezseniz veya yönerge belirli bir @Page ayar içermiyorsa, bir ayar Web.config yapılandırma dosyasından veya Machine.config yapılandırma dosyasından devralınır. Machine.config dosyası, bir makinede çalışan tüm uygulamalara ek yapılandırma ayarları sağlar.

Not

Machine.config tüm olası yapılandırma ayarlarıyla ilgili ayrıntıları da sağlar.

Web Sunucusu Denetimleri

Çoğu ASP.NET Web Forms uygulamada, kullanıcının sayfayla etkileşim kurmasına olanak sağlayan düğmeler, metin kutuları, listeler gibi denetimler eklersiniz. Bu Web sunucusu denetimleri HTML düğmelerine ve giriş öğelerine benzer. Ancak bunlar sunucuda işlenir ve özelliklerini ayarlamak için sunucu kodunu kullanmanıza olanak sağlar. Bu denetimler, sunucu kodunda işleyebileceğiniz olayları da tetikler.

Sunucu denetimleri, ASP.NET sayfanın ne zaman çalıştığını tanıyan özel bir söz dizimi kullanır. ASP.NET sunucu denetimlerinin etiket adı bir asp: ön ek ile başlar. Bu, ASP.NET bu sunucu denetimlerini tanımasını ve işlemesini sağlar. Denetim .NET Framework parçası değilse ön ek farklı olabilir. Ön eke asp: ek olarak, ASP.NET sunucu denetimleri de özniteliğini runat="server" ve sunucu kodundaki denetime başvurmak için kullanabileceğiniz bir ID özniteliğini içerir.

Sayfa çalıştığında, ASP.NET sunucu denetimlerini tanımlar ve bu denetimlerle ilişkili kodu çalıştırır. Birçok denetim, tarayıcıda görüntülendiğinde sayfaya bazı HTML veya diğer işaretlemeleri işler.

Sunucu Kodu

Çoğu ASP.NET Web Forms uygulama, sayfa işlendiğinde sunucuda çalışan kod içerir. Yukarıda belirtildiği gibi, sunucu kodu ListView denetimine veri ekleme gibi çeşitli işlemler yapmak için kullanılabilir. ASP.NET, C#, Visual Basic, J# ve diğerleri dahil olmak üzere sunucuda çalıştırılacak birçok dili destekler.

ASP.NET bir Web sayfası için sunucu kodu yazmak için iki modeli destekler. Tek dosyalı modelde, sayfanın kodu, açılış etiketinin özniteliğini içerdiği bir betik öğesindedir runat="server" . Alternatif olarak, sayfanın kodunu arka planda kod modeli olarak adlandırılan ayrı bir sınıf dosyasında oluşturabilirsiniz. Bu durumda, ASP.NET Web Forms sayfasında genellikle sunucu kodu yoktur. Bunun yerine yönergesi, @Page.aspx sayfasını ilişkili arka planda kod dosyasıyla bağlayan bilgiler içerir.

CodeBehind yönergesinde @Page yer alan öznitelik ayrı sınıf dosyasının adını belirtir ve Inherits özniteliği de sayfaya karşılık gelen arka kod dosyasındaki sınıfın adını belirtir.

Ana Sayfayı Güncelleştirme

ASP.NET Web Forms ana sayfalar, uygulamanızdaki sayfalar için tutarlı bir düzen oluşturmanıza olanak sağlar. Tek bir ana sayfa, uygulamanızdaki tüm sayfalar (veya bir sayfa grubu) için istediğiniz genel görünümü ve standart davranışı tanımlar. Daha sonra yukarıda açıklandığı gibi, görüntülemek istediğiniz içeriği içeren tek tek içerik sayfaları oluşturabilirsiniz. Kullanıcılar içerik sayfalarını istediğinde, ASP.NET bunları ana sayfayla birleştirerek ana sayfanın düzenini içerik sayfasındaki içerikle birleştiren bir çıktı oluşturur.

Yeni sitenin her sayfada görüntülenmesi için tek bir logo gerekir. Bu logoyu eklemek için ana sayfadaki HTML'yi değiştirebilirsiniz.

Çözüm Gezgini'daSite.Master sayfasını bulun ve açın.
Sayfa Tasarım görünümündeyse Kaynak görünümüne geçin.

Sarı renkle vurgulanan işaretlemeyi değiştirerek veya ekleyerek ana sayfayı güncelleştirin:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

Bu HTML, Daha sonra ekleyeceğiniz Web uygulamasının Images klasöründen logo.jpg adlı görüntüyü görüntüler. Ana sayfayı kullanan bir sayfa tarayıcıda görüntülendiğinde, logo görüntülenir. Bir kullanıcı logoya tıklarsa, kullanıcı Default.aspx sayfasına geri döner. HTML tutturucu etiketi <a> görüntü sunucusu denetimini sarmalar ve görüntünün bağlantının bir parçası olarak eklenmesini sağlar. href Anchor etiketinin özniteliği, bağlantı konumu olarak Web sitesinin kök "~/" değerini belirtir. Varsayılan olarak, kullanıcı Web sitesinin köküne gittiği zaman Default.aspx sayfası görüntülenir. Görüntü<asp:Image> sunucusu denetimi, tarayıcıda görüntülendiğinde HTML olarak işlenen gibi BorderStyleekleme özelliklerini içerir.

Ana Sayfalar

Ana sayfa, statik metin, HTML öğeleri ve sunucu denetimleri içerebilen önceden tanımlanmış bir düzene sahip .master uzantısına (örneğin , Site.Master) sahip bir ASP.NET dosyasıdır. Ana sayfa, sıradan .aspx sayfaları için kullanılan yönergenin @Page yerini alan özel @Master bir yönergeyle tanımlanır.

Yönergesine @Master ek olarak, ana sayfa bir sayfanın , headve formgibi htmltüm en üst düzey HTML öğelerini de içerir. Örneğin, yukarıda eklediğiniz ana sayfada, düzen için bir HTML table , şirket logosu için bir img öğe, statik metin ve sitenizin ortak üyeliğini işlemek için sunucu denetimleri kullanırsınız. Ana sayfanızın bir parçası olarak herhangi bir HTML ve ASP.NET öğesi kullanabilirsiniz.

Tüm sayfalarda görünecek statik metin ve denetimlere ek olarak, ana sayfa bir veya daha fazla ContentPlaceHolder denetimi de içerir. Bu yer tutucu denetimleri, değiştirilebilir içeriğin görüntülendiği bölgeleri tanımlar. Buna karşılık, değiştirilebilir içerik, İçerik sunucusu denetimi kullanılarak Default.aspx gibi içerik sayfalarında tanımlanır.

Görüntü Dosyaları Ekleme

Proje tarayıcıda görüntülendiğinde görülebilmesi için yukarıda başvuruda bulunılan logo resminin tüm ürün görüntüleriyle birlikte Web uygulamasına eklenmesi gerekir.

MSDN Örnekleri sitesinden indirin:

ASP.NET 4.5 Web Forms ve Visual Studio 2013 ile Çalışmaya Başlama - Wingtip Toys (C#)

İndirme işlemi, örnek uygulamayı oluşturmak için kullanılan WingtipToys-Assets klasöründeki kaynakları içerir.

Henüz yapmadıysanız MSDN Örnekleri sitesindeki yukarıdaki bağlantıyı kullanarak sıkıştırılmış örnek dosyaları indirin.
İndirildikten sonra .zip dosyasını açın ve içeriği makinenizdeki yerel bir klasöre kopyalayın.
WingtipToys-Assets klasörünü bulun ve açın.
Sürükleyip bırakarak, Katalog klasörünü yerel klasörünüzden Visual Studio'nun Çözüm Gezgini Web uygulaması projesinin köküne kopyalayın.
Ardından, Çözüm Gezgini'daWingtipToys projesine sağ tıklayıp ->Yeni KlasörEkle'yi seçerek Görüntüler adlı yeni bir klasör oluşturun.
Dosya Gezgini'daki WingtipToys-Assets klasöründekilogo.jpgdosyasını Visual Studio'nun Çözüm Gezgini Web uygulaması projesinin Images klasörüne kopyalayın.
Yeni dosyaları görmüyorsanız, dosya listesini güncelleştirmek için Çözüm Gezgini üst kısmındaki Tüm Dosyaları Göster seçeneğine tıklayın.

Çözüm Gezgini şimdi güncelleştirilmiş proje dosyalarını gösterir.

Sayfa Ekleme

Web uygulamasına gezinti eklemeden önce, önce gidebileceğiniz iki yeni sayfa ekleyeceksiniz. Bu öğretici serisinin ilerleyen bölümlerinde, bu yeni sayfalarda ürünleri ve ürün ayrıntılarını görüntüleyeceksiniz.

Çözüm Gezgini'daWingtipToys'a sağ tıklayın, Ekle'ye ve ardından Yeni Öğe'ye tıklayın.
Yeni Öğe Ekle iletişim kutusu görüntülenir.
Soldaki Visual C# ->Web şablonları grubunu seçin. Ardından, ortadaki listeden Ana Sayfalı Web Formu'nu seçin ve Bunu ProductList.aspx olarak adlandırın.
Ana sayfayı yeni oluşturulan .aspx sayfasına eklemek için Site.Master'ı seçin.
Aynı adımları izleyerek ProductDetails.aspx adlı başka bir sayfa ekleyin.

Bootstrap Güncelleştiriliyor

Visual Studio 2013 proje şablonları, Twitter tarafından oluşturulan bir düzen ve temalı çerçeve olan Bootstrap'ı kullanır. Bootstrap, hızlı yanıt veren bir tasarım sağlamak için CSS3 kullanır. Bu, düzenlerin farklı tarayıcı pencere boyutlarına dinamik olarak uyum sağlayabildiği anlamına gelir. Uygulamanın genel görünümündeki bir değişikliği kolayca etkilemek için Bootstrap'ın tema özelliğini de kullanabilirsiniz. Varsayılan olarak, Visual Studio 2013'daki ASP.NET Web Uygulaması şablonu Bootstrap'ı NuGet paketi olarak içerir.

Bu öğreticide, Bootstrap CSS dosyalarını değiştirerek Wingtip Toys uygulamasının genel görünümünü değiştireceksiniz.

Çözüm Gezgini'daİçerik klasörünü açın.
bootstrap.css dosyasına sağ tıklayın ve bootstrap-original.css olarak yeniden adlandırın.
bootstrap.min.css dosyasını bootstrap-original.min.css olarak yeniden adlandırın.
Çözüm Gezgini'daİçerik klasörüne sağ tıklayın ve Dosya Gezgini Klasörü Aç'ı seçin.
Dosya Gezgini görüntülenir. İndirilen bootstrap CSS dosyalarını bu konuma kaydedersiniz.
Tarayıcınızda https://bootswatch.com/3/ adresine gidin.
Cerulean temasını görene kadar tarayıcı penceresini kaydırın.
Hem bootstrap.css dosyasını hem de bootstrap.min.css dosyasını İçerik klasörüne indirin. Daha önce açtığınız Dosya Gezgini penceresinde görüntülenen içerik klasörünün yolunu kullanın.
Çözüm Gezgini üst kısmındaki Visual Studio'da, yeni dosyaları İçerik klasöründe görüntülemek için Tüm Dosyaları Göster seçeneğini belirleyin.

İçerik klasöründe iki yeni CSS dosyası görürsünüz, ancak her dosya adının yanındaki simgenin gri olduğuna dikkat edin. Bu, dosyanın projeye henüz eklenmediği anlamına gelir.
bootstrap.css ve bootstrap.min.css dosyalarına sağ tıklayın ve Projeye Ekle'yi seçin.
Bu öğreticinin ilerleyen bölümlerinde Wingtip Toys uygulamasını çalıştırdığınızda yeni kullanıcı arabirimi görüntülenir.

Not

ASP.NET Web Uygulaması şablonu, Bootstrap CSS dosyalarının yolunu depolamak için projenin kökündeki Bundle.config dosyasını kullanır.

Site.Master sayfasındaki sıralanmamış gezinti listesi öğesi değiştirilerek uygulamadaki her sayfanın varsayılan gezintisi değiştirilebilir.

Çözüm Gezgini'daSite.Master sayfasını bulun ve açın.

Sarı renkle vurgulanan ek gezinti bağlantısını aşağıda gösterilen sıralanmamış listeye ekleyin:

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

Yukarıdaki HTML'de görebileceğiniz gibi, bağlantı href özniteliğine sahip bir yer işareti etiketi <a> içeren her satır öğesini <li> değiştirdiniz. Her href biri Web uygulamasındaki bir sayfayı gösterir. Tarayıcıda, bir kullanıcı bu bağlantılardan birine (Ürünler gibi) tıkladığında, içinde (ProductList.aspx gibi) bulunan href sayfaya gider. Bu öğreticinin sonunda uygulamayı çalıştıracaksınız.

Not

tilde (~) karakteri, yolun projenin kökünde başladığını belirtmek href için kullanılır.

Ardından, veritabanındaki tüm kategorileri görüntülemek için bir denetim ekleyeceksiniz. Her kategori , ProductList.aspx sayfasına bağlantı görevi görür. Kullanıcı tarayıcıda bir kategori bağlantısına tıkladığında ürünler sayfasına gider ve yalnızca seçili kategoriyle ilişkili ürünleri görür.

Veritabanındaki tüm kategorileri görüntülemek için ListView denetimi kullanacaksınız. Ana sayfaya ListView denetimi eklemek için:

Site.Master sayfasında, daha önce eklediğiniz öğesini içeren öğesinden <div>sonra aşağıdaki vurgulanan <div> öğeyi id="TitleContent" ekleyin:

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

Bu kod veritabanındaki tüm kategorileri görüntüler. ListView denetimi her kategori adını bağlantı metni olarak görüntüler ve ProductList.aspx sayfasına, kategorinin değerini içeren ID bir sorgu dizesi değeri içeren bir bağlantı içerir. ListView denetiminde özelliğini ayarlayarakItemType, veri bağlama ifadesi Item düğüm içinde ItemTemplate kullanılabilir ve denetim kesin olarak yazılır. IntelliSense kullanarak nesnenin Item ayrıntılarını seçebilirsiniz, örneğin öğesini CategoryNamebelirtebilirsiniz. Bu kod, bir veri bağlama ifadesini işaretleyen kapsayıcının <%#: %> içinde yer alır. (:) ön ekin <%# sonuna kadar veri bağlama ifadesinin sonucu HTML kodlamalı olur. Sonuç HTML ile kodlandığında, uygulamanız siteler arası betik ekleme (XSS) ve HTML ekleme saldırılarına karşı daha iyi korunur.

Not

İpucu

Geliştirme sırasında yazarak kod eklediğinizde, kesin olarak yazılan veri denetimleri IntelliSense'i temel alan kullanılabilir üyeleri gösterdiğinden nesnenin geçerli bir üyesinin bulunduğundan emin olabilirsiniz. IntelliSense, siz kod yazarken özellikler, yöntemler ve nesneler gibi bağlama uygun kod seçimleri sunar.

Sonraki adımda, verileri almak için yöntemini uygulayacaksınız GetCategories .

Veri Denetimini Veritabanına Bağlama

Verileri veri denetiminde görüntüleyebilmeniz için önce veri denetimini veritabanına bağlamanız gerekir. Bağlantıyı oluşturmak için Site.Master.cs dosyasının arkasındaki kodu değiştirebilirsiniz.

Çözüm Gezgini'daSite.Master sayfasına sağ tıklayın ve ardından Kodu Görüntüle'ye tıklayın. Site.Master.cs dosyası düzenleyicide açılır.

Site.Master.cs dosyasının başlangıcına yakın bir yerde, eklenen tüm ad alanlarının aşağıdaki gibi görünmesi için iki ad alanı daha ekleyin:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;

Vurgulanan GetCategories yöntemi olay işleyicisinin Page_Load arkasına aşağıdaki gibi ekleyin:

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

Yukarıdaki kod, ana sayfayı kullanan herhangi bir sayfa tarayıcıda yüklendiğinde yürütülür. Bu öğreticide ListView daha önce eklediğiniz denetim ("categoryList" olarak adlandırılır), verileri seçmek için model bağlamayı kullanır. Denetimin ListView işaretlemesinde, denetimin SelectMethod özelliğini yukarıda gösterilen yöntemine GetCategories ayarlarsınız. Denetim, ListView sayfa yaşam döngüsünde uygun zamanda yöntemini çağırır GetCategories ve döndürülen verileri otomatik olarak bağlar. Sonraki öğreticide verileri bağlama hakkında daha fazla bilgi edineceksiniz.

Uygulamayı Çalıştırma ve Veritabanını Oluşturma

Bu öğretici serisinin önceki bölümlerinde bir başlatıcı sınıfı ("ProductDatabaseInitializer" adlı) oluşturdunuz ve bu sınıfı global.asax.cs dosyasında belirttiniz . Entity Framework, uygulama ilk kez çalıştırıldığında veritabanını oluşturur çünkü Application_Startglobal.asax.cs dosyasındaki yöntem başlatıcı sınıfını çağırır. Başlatıcı sınıfı, veritabanını oluşturmak için bu öğretici serisinin önceki bölümlerinde eklediğiniz model sınıflarını (Category ve Product) kullanır.

Çözüm Gezgini'daDefault.aspx sayfasına sağ tıklayın ve Başlangıç Sayfası Olarak Ayarla'yı seçin.
Visual Studio'da F5 tuşuna basın.
Bu ilk çalıştırma sırasında her şeyi ayarlamak biraz zaman alacaktır.

Uygulamayı çalıştırdığınızda uygulama derlenir ve wingtiptoys.mdf adlı veritabanı App_Data klasöründe oluşturulur. Tarayıcıda bir kategori gezinti menüsü görürsünüz. Bu menü, veritabanından kategoriler alınarak oluşturuldu. Sonraki öğreticide gezintiyi uygulayacaksınız.
Çalışan uygulamayı durdurmak için tarayıcıyı kapatın.

Veritabanını Gözden Geçirme

Web.config dosyasını açın ve bağlantı dizesi bölümüne bakın. Bağlantı dizesindeki değerin AttachDbFilename Web uygulaması projesi için öğesine DataDirectory işaret ettiğini görebilirsiniz. değer |DataDirectory| , projedeki App_Data klasörünü temsil eden ayrılmış bir değerdir. Bu klasör, varlık sınıflarınızdan oluşturulan veritabanının bulunduğu klasördür.

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

Not

App_Data klasörü görünmüyorsa veya klasör boşsa Yenile simgesini ve ardından Çözüm Gezgini penceresinin üst kısmındaki Tüm Dosyaları Göster simgesini seçin. Kullanılabilir tüm simgeleri göstermek için Çözüm Gezgini pencerelerin genişliğinin genişletilmesi gerekebilir.

Artık Sunucu Gezgini penceresini kullanarak wingtiptoys.mdf veritabanı dosyasında bulunan verileri inceleyebilirsiniz.

App_Data klasörünü genişletin. App_Data klasörü görünmüyorsa yukarıdaki nota bakın.
wingtiptoys.mdf veritabanı dosyası görünmüyorsa Yenile simgesini ve ardından Çözüm Gezgini penceresinin üst kısmındaki Tüm Dosyaları Göster simgesini seçin.
wingtiptoys.mdf veritabanı dosyasına sağ tıklayın ve Aç'ı seçin.
Sunucu Gezgini görüntülenir.
Tablolar klasörünü genişletin.
Ürünlertablosuna sağ tıklayın ve Tablo Verilerini Göster'i seçin.
Ürünler tablosu görüntülenir.
Bu görünüm , Ürünler tablosundaki verileri el ile görmenizi ve değiştirmenizi sağlar.
Ürünler tablosu penceresini kapatın.
Sunucu Gezgini'ndeÜrünler tablosuna yeniden sağ tıklayın ve Tablo Tanımını Aç'ı seçin.
Ürünler tablosunun veri tasarımı görüntülenir.
T-SQL sekmesinde, tabloyu oluşturmak için kullanılan SQL DDL deyimini görürsünüz. Şemayı değiştirmek için Tasarım sekmesindeki kullanıcı arabirimini de kullanabilirsiniz.
Sunucu Gezgini'ndeWingtipToys veritabanı'na sağ tıklayın ve Bağlantıyı Kapat'ı seçin.
Veritabanını Visual Studio'dan ayırarak, veritabanı şeması bu öğretici serisinin ilerleyen bölümlerinde değiştirilebilir.
Sunucu Gezgini penceresinin en altındaki Çözüm Gezgini sekmesini seçerek Çözüm Gezgini dönün.

Özet

Serinin bu öğreticisinde bazı temel kullanıcı arabirimi, grafikler, sayfalar ve gezinti eklediniz. Ayrıca, veritabanını önceki öğreticide eklediğiniz veri sınıflarından oluşturan Web uygulamasını çalıştırmıştınız. Veritabanını doğrudan görüntüleyerek veritabanının Products tablosunun içeriğini de görüntülemişsinizdir. Sonraki öğreticide veritabanındaki veri öğelerini ve ayrıntıları görüntüleyeceksiniz.

Ek Kaynaklar

Programlama ASP.NET Web Sayfalarına Giriş
ASP.NET Web Sunucusu Denetimlerine Genel Bakış
CSS Öğreticisi

Önceki Sonraki

Aracılığıyla paylaş