UI dan Navigasi

2023-07-13

Unduh Proyek Sampel Mainan Wingtip (C#) atau Unduh E-book (PDF)

Seri tutorial ini akan mengajari Anda dasar-dasar membangun aplikasi ASP.NET Web Forms menggunakan ASP.NET 4.5 dan Microsoft Visual Studio Express 2013 untuk Web. Proyek Visual Studio 2013 dengan kode sumber C# tersedia untuk menyertai seri tutorial ini.

Dalam tutorial ini, Anda akan memodifikasi UI aplikasi Web default untuk mendukung fitur aplikasi depan penyimpanan Wingtip Toys. Selain itu, Anda akan menambahkan navigasi sederhana dan terikat data. Tutorial ini dibangun pada tutorial sebelumnya "Buat Lapisan Akses Data" dan merupakan bagian dari seri tutorial Wingtip Toys.

Yang akan Anda pelajari:

Cara mengubah UI untuk mendukung fitur aplikasi depan penyimpanan Wingtip Toys.
Cara mengonfigurasi elemen HTML5 untuk menyertakan navigasi halaman.
Cara membuat kontrol berbasis data untuk menavigasi ke data produk tertentu.
Cara menampilkan data dari database yang dibuat menggunakan Kode Kerangka Kerja Entitas Terlebih Dahulu.

ASP.NET Web Forms memungkinkan Anda membuat konten dinamis untuk aplikasi Web Anda. Setiap halaman web ASP.NET dibuat dengan cara yang mirip dengan halaman Web HTML statis (halaman yang tidak menyertakan pemrosesan berbasis server), tetapi halaman Web ASP.NET menyertakan elemen tambahan yang ASP.NET mengenali dan memproses untuk menghasilkan HTML saat halaman berjalan.

Dengan halaman HTML statis (file .htm atau .html ), server memenuhi Web permintaan dengan membaca file dan mengirimkannya apa adanya ke browser. Sebaliknya, ketika seseorang meminta halaman Web ASP.NET (file .aspx ), halaman berjalan sebagai program di server Web. Saat halaman berjalan, halaman dapat melakukan tugas apa pun yang diperlukan situs Web Anda, termasuk menghitung nilai, membaca atau menulis informasi database, atau memanggil program lain. Sebagai outputnya, halaman secara dinamis menghasilkan markup (seperti elemen dalam HTML) dan mengirim output dinamis ini ke browser.

Memodifikasi UI

Anda akan melanjutkan seri tutorial ini dengan memodifikasi halaman Default.aspx . Anda akan mengubah UI yang sudah dibuat oleh templat default yang digunakan untuk membuat aplikasi. Jenis modifikasi yang akan Anda lakukan biasanya saat membuat aplikasi Formulir Web apa pun. Anda akan melakukan ini dengan mengubah judul, mengganti beberapa konten, dan menghapus konten default yang tidak perlu.

Buka atau beralih ke halaman Default.aspx .
Jika halaman muncul dalam tampilan Desain , beralihlah ke tampilan Sumber .

Di bagian atas halaman di direktif @Page , ubah Title atribut menjadi "Selamat Datang", seperti yang ditunjukkan dengan warna kuning di bawah ini.

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

Juga di halaman Default.aspx , ganti semua konten default yang terdapat dalam <asp:Content> tag sehingga markup muncul seperti di bawah ini.

<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>

Simpan halaman Default.aspx dengan memilih Simpan Default.aspx dari menu File .

Halaman Default.aspx yang dihasilkan akan muncul sebagai berikut:

<%@ 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>

Dalam contoh, Anda telah mengatur Title atribut @Page direktif. Ketika HTML ditampilkan di browser, kode <%: Page.Title %> server diselesaikan ke konten yang terkandung dalam Title atribut .

Halaman contoh menyertakan elemen dasar yang merupakan halaman Web ASP.NET. Halaman berisi teks statis seperti yang mungkin Anda miliki di halaman HTML, bersama dengan elemen yang khusus untuk ASP.NET. Konten yang terkandung dalam halaman Default.aspx akan diintegrasikan dengan konten halaman master, yang akan dijelaskan nanti dalam tutorial ini.

@Page Direktif

ASP.NET Formulir Web biasanya berisi arahan yang memungkinkan Anda menentukan properti halaman dan informasi konfigurasi untuk halaman tersebut. Arahan digunakan oleh ASP.NET sebagai instruksi tentang cara memproses halaman, tetapi tidak dirender sebagai bagian dari markup yang dikirim ke browser.

Arahan yang paling umum digunakan adalah arahan @Page , yang memungkinkan Anda menentukan banyak opsi konfigurasi untuk halaman, termasuk yang berikut ini:

Bahasa pemrograman server untuk kode di halaman, seperti C#.
Apakah halaman adalah halaman dengan kode server langsung di halaman, yang disebut halaman file tunggal, atau apakah itu adalah halaman dengan kode dalam file kelas terpisah, yang disebut halaman code-behind.
Apakah halaman memiliki halaman master terkait dan oleh karena itu harus diperlakukan sebagai halaman konten.
Opsi penelusuran kesalahan dan pelacakan.

Jika Anda tidak menyertakan @Page direktif di halaman, atau jika direktif tidak menyertakan pengaturan tertentu, pengaturan akan diwarisi dari file konfigurasi Web.config atau dari file konfigurasi Machine.config . File Machine.config menyediakan pengaturan konfigurasi tambahan untuk semua aplikasi yang berjalan pada komputer.

Catatan

Machine.config juga menyediakan detail tentang semua kemungkinan pengaturan konfigurasi.

Kontrol Server Web

Di sebagian besar aplikasi ASP.NET Web Forms, Anda akan menambahkan kontrol yang memungkinkan pengguna berinteraksi dengan halaman, seperti tombol, kotak teks, daftar, dan sebagainya. Kontrol server Web ini mirip dengan tombol HTML dan elemen input. Namun, mereka diproses di server, memungkinkan Anda menggunakan kode server untuk mengatur propertinya. Kontrol ini juga meningkatkan peristiwa yang dapat Anda tangani dalam kode server.

Kontrol server menggunakan sintaks khusus yang ASP.NET kenali saat halaman berjalan. Nama tag untuk kontrol server ASP.NET dimulai dengan awalan asp: . Ini memungkinkan ASP.NET mengenali dan memproses kontrol server ini. Awalan mungkin berbeda jika kontrol bukan bagian dari .NET Framework. Selain awalan asp: , kontrol server ASP.NET juga menyertakan runat="server" atribut dan ID yang dapat Anda gunakan untuk mereferensikan kontrol dalam kode server.

Saat halaman berjalan, ASP.NET mengidentifikasi kontrol server dan menjalankan kode yang terkait dengan kontrol tersebut. Banyak kontrol merender beberapa HTML atau markup lain ke halaman saat ditampilkan di browser.

Kode Server

Sebagian besar aplikasi ASP.NET Web Forms menyertakan kode yang berjalan di server saat halaman diproses. Seperti disebutkan di atas, kode server dapat digunakan untuk melakukan berbagai hal, seperti menambahkan data ke kontrol ListView. ASP.NET mendukung banyak bahasa untuk dijalankan di server, termasuk C#, Visual Basic, J#, dan lainnya.

ASP.NET mendukung dua model untuk menulis kode server untuk halaman Web. Dalam model file tunggal, kode untuk halaman berada dalam elemen skrip di mana tag pembuka menyertakan runat="server" atribut . Atau, Anda dapat membuat kode untuk halaman dalam file kelas terpisah, yang disebut sebagai model code-behind. Dalam hal ini, halaman ASP.NET Web Forms umumnya tidak berisi kode server. Sebaliknya, direktif @Page menyertakan informasi yang menautkan halaman .aspx dengan file code-behind terkait.

Atribut CodeBehind yang terkandung dalam direktif @Page menentukan nama file kelas terpisah, dan Inherits atribut menentukan nama kelas dalam file code-behind yang sesuai dengan halaman.

Memperbarui Halaman Master

Di ASP.NET Web Forms, halaman master memungkinkan Anda membuat tata letak yang konsisten untuk halaman di aplikasi Anda. Satu halaman master menentukan tampilan dan nuansa dan perilaku standar yang Anda inginkan untuk semua halaman (atau sekelompok halaman) di aplikasi Anda. Anda kemudian dapat membuat halaman konten individual yang berisi konten yang ingin Anda tampilkan, seperti yang dijelaskan di atas. Saat pengguna meminta halaman konten, ASP.NET menggabungkannya dengan halaman master untuk menghasilkan output yang menggabungkan tata letak halaman master dengan konten dari halaman konten.

Situs baru memerlukan satu logo untuk ditampilkan di setiap halaman. Untuk menambahkan logo ini, Anda dapat mengubah HTML pada halaman master.

Di Penjelajah Solusi, temukan dan buka halaman Site.Master.
Jika halaman berada dalam tampilan Desain , beralihlah ke tampilan Sumber .

Perbarui halaman master dengan memodifikasi atau menambahkan markup yang disorot dengan warna kuning:

<%@ 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>

HTML ini akan menampilkan gambar bernama logo.jpg dari folder Gambar aplikasi Web, yang akan Anda tambahkan nanti. Ketika halaman yang menggunakan halaman master ditampilkan di browser, logo akan ditampilkan. Jika pengguna mengklik logo, pengguna akan menavigasi kembali ke halaman Default.aspx . Tag <a> jangkar HTML membungkus kontrol server gambar dan memungkinkan gambar disertakan sebagai bagian dari tautan. Atribut href untuk tag jangkar menentukan akar "~/" situs Web sebagai lokasi tautan. Secara default, halaman Default.aspx ditampilkan saat pengguna menavigasi ke akar situs Web. Kontrol server Gambar <asp:Image> mencakup properti penambahan, seperti BorderStyle, yang dirender sebagai HTML saat ditampilkan di browser.

Halaman Induk

Halaman master adalah file ASP.NET dengan ekstensi .master (misalnya, Site.Master) dengan tata letak yang telah ditentukan sebelumnya yang dapat menyertakan teks statis, elemen HTML, dan kontrol server. Halaman master diidentifikasi oleh arahan khusus @Master yang menggantikan @Page arahan yang digunakan untuk halaman .aspx biasa.

Selain direktif @Master , halaman master juga berisi semua elemen HTML tingkat atas untuk halaman, seperti html, head, dan form. Misalnya, pada halaman master yang Anda tambahkan di atas, Anda menggunakan HTML table untuk tata letak, img elemen untuk logo perusahaan, teks statis, dan kontrol server untuk menangani keanggotaan umum untuk situs Anda. Anda dapat menggunakan HTML dan elemen ASP.NET apa pun sebagai bagian dari halaman master Anda.

Selain teks statis dan kontrol yang akan muncul di semua halaman, halaman master juga menyertakan satu atau beberapa kontrol ContentPlaceHolder . Kontrol tempat penampung ini menentukan wilayah tempat konten yang dapat diganti akan muncul. Pada gilirannya, konten yang dapat diganti ditentukan dalam halaman konten, seperti Default.aspx, menggunakan kontrol Server konten.

Menambahkan File Gambar

Gambar logo yang direferensikan di atas, bersama dengan semua gambar produk, harus ditambahkan ke aplikasi Web sehingga dapat dilihat ketika proyek ditampilkan di browser.

Unduh dari situs Sampel MSDN:

Memulai formulir web ASP.NET 4.5 dan Visual Studio 2013 - Mainan Wingtip (C#)

Unduhan mencakup sumber daya di folder WingtipToys-Assets yang digunakan untuk membuat aplikasi sampel.

Jika Anda belum melakukannya, unduh file sampel terkompresi menggunakan tautan di atas dari situs Sampel MSDN.
Setelah diunduh, buka file .zip dan salin konten ke folder lokal di komputer Anda.
Temukan dan buka folder WingtipToys-Assets .
Dengan menyeret dan menjatuhkan, salin folder Katalog dari folder lokal Anda ke akar proyek aplikasi Web di Penjelajah Solusi Visual Studio.
Selanjutnya, buat folder baru bernama Gambar dengan mengklik kanan proyek WingtipToys di Penjelajah Solusi dan memilih Tambahkan Folder ->Baru.
Salin file logo.jpg dari folder WingtipToys-Assets di File Explorer ke folder Gambar proyek aplikasi Web di Penjelajah Solusi Visual Studio.
Klik opsi Perlihatkan Semua File di bagian atas Penjelajah Solusi untuk memperbarui daftar file jika Anda tidak melihat file baru.

Penjelajah Solusi sekarang menampilkan file proyek yang diperbarui.

Menambahkan Halaman

Sebelum menambahkan navigasi ke aplikasi Web, Anda akan terlebih dahulu menambahkan dua halaman baru yang akan Anda navigasikan. Nantinya dalam seri tutorial ini, Anda akan menampilkan produk dan detail produk di halaman baru ini.

Di Penjelajah Solusi, klik kanan WingtipToys, klik Tambahkan, lalu klik Item Baru.
Kotak dialog Tambahkan Item Baru ditampilkan.
Pilih grup Visual C# ->Templat web di sebelah kiri. Lalu, pilih Formulir Web dengan Halaman Master dari daftar tengah dan beri nama ProductList.aspx.
Pilih Site.Master untuk melampirkan halaman master ke halaman .aspx yang baru dibuat.
Tambahkan halaman tambahan bernama ProductDetails.aspx dengan mengikuti langkah-langkah yang sama ini.

Memperbarui Bootstrap

Templat proyek Visual Studio 2013 menggunakan Bootstrap, kerangka kerja tata letak dan tema yang dibuat oleh Twitter. Bootstrap menggunakan CSS3 untuk menyediakan desain responsif, yang berarti tata letak dapat beradaptasi secara dinamis dengan ukuran jendela browser yang berbeda. Anda juga dapat menggunakan fitur tema Bootstrap untuk dengan mudah memengaruhi perubahan tampilan dan nuansa aplikasi. Secara default, templat Aplikasi Web ASP.NET di Visual Studio 2013 menyertakan Bootstrap sebagai paket NuGet.

Dalam tutorial ini, Anda akan mengubah tampilan dan nuansa aplikasi Wingtip Toys dengan mengganti file Bootstrap CSS.

Di Penjelajah Solusi, buka folder Konten.
Klik kanan file bootstrap.css dan ganti namanya menjadi bootstrap-original.css.
Ganti nama bootstrap.min.css menjadi bootstrap-original.min.css.
Di Penjelajah Solusi, klik kanan folder Konten dan pilih Buka Folder di File Explorer.
File Explorer akan ditampilkan. Anda akan menyimpan file CSS bootstrap yang diunduh ke lokasi ini.
Di browser Anda, buka https://bootswatch.com/3/.
Gulir jendela browser hingga Anda melihat tema Cerulean.
Unduh file bootstrap.css dan file bootstrap.min.css ke folder Konten. Gunakan jalur ke folder konten yang ditampilkan di jendela File Explorer yang sebelumnya Anda buka.
Di Visual Studio di bagian atas Penjelajah Solusi, pilih opsi Perlihatkan Semua File untuk menampilkan file baru di folder Konten.

Anda akan melihat dua file CSS baru di folder Konten , tetapi perhatikan bahwa ikon di samping setiap nama file berwarna abu-abu. Ini berarti bahwa file belum ditambahkan ke proyek.
Klik kanan bootstrap.css dan file bootstrap.min.css dan pilih Sertakan Dalam Proyek.
Ketika Anda menjalankan aplikasi Wingtip Toys nanti dalam tutorial ini, UI baru akan ditampilkan.

Catatan

Templat Aplikasi Web ASP.NET menggunakan file Bundle.config di akar proyek untuk menyimpan jalur file Bootstrap CSS.

Navigasi default untuk setiap halaman dalam aplikasi dapat dimodifikasi dengan mengubah elemen daftar navigasi yang tidak diurutkan yang ada di halaman Site.Master .

Di Penjelajah Solusi, temukan dan buka halaman Site.Master.

Tambahkan tautan navigasi tambahan yang disorot dengan warna kuning ke daftar tidak berurutan yang diperlihatkan di bawah ini:

<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>

Seperti yang Anda lihat di HTML di atas, Anda memodifikasi setiap item <li> baris yang berisi tag <a> jangkar dengan atribut tautan href . Setiap href menunjuk ke halaman di aplikasi Web. Di browser, ketika pengguna mengklik salah satu tautan ini (seperti Produk), mereka akan menavigasi ke halaman yang terkandung dalam href (seperti ProductList.aspx). Anda akan menjalankan aplikasi di akhir tutorial ini.

Catatan

Karakter tilde (~) digunakan untuk menentukan bahwa href jalur dimulai di akar proyek.

Selanjutnya, Anda akan menambahkan kontrol untuk menampilkan semua kategori dari database. Setiap kategori akan bertindak sebagai tautan ke halaman ProductList.aspx . Ketika pengguna mengklik tautan kategori di browser, mereka akan menavigasi ke halaman produk dan hanya melihat produk yang terkait dengan kategori yang dipilih.

Anda akan menggunakan kontrol ListView untuk menampilkan semua kategori yang terkandung dalam database. Untuk menambahkan kontrol ListView ke halaman master:

Di halaman Site.Master, tambahkan elemen yang disorot <div> berikut ini setelah <div> elemen yang berisi id="TitleContent" yang Anda tambahkan sebelumnya:

<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>

Kode ini akan menampilkan semua kategori dari database. Kontrol ListView menampilkan setiap nama kategori sebagai teks tautan dan menyertakan tautan ke halaman ProductList.aspx dengan nilai string kueri yang berisi ID kategori. Dengan mengatur ItemType properti dalam kontrol ListView , ekspresi Item pengikatan data tersedia dalam simpul ItemTemplate dan kontrol menjadi sangat diketik. Anda dapat memilih detail Item objek menggunakan IntelliSense, seperti menentukan CategoryName. Kode ini terkandung di dalam kontainer <%#: %> yang menandai ekspresi pengikatan data. Dengan menambahkan (:) ke akhir awalan <%# , hasil ekspresi pengikatan data dikodekan HTML. Ketika hasilnya dikodekan HTML, aplikasi Anda lebih terlindungi dari serangan injeksi skrip lintas situs (XSS) dan injeksi HTML.

Catatan

Tip

Saat Anda menambahkan kode dengan mengetik selama pengembangan, Anda dapat yakin bahwa anggota objek yang valid ditemukan karena kontrol data yang diketik dengan kuat menunjukkan anggota yang tersedia berdasarkan IntelliSense. IntelliSense menawarkan pilihan kode yang sesuai konteks saat Anda mengetik kode, seperti properti, metode, dan objek.

Pada langkah berikutnya, Anda akan menerapkan GetCategories metode untuk mengambil data.

Menautkan Kontrol Data ke Database

Sebelum Anda bisa menampilkan data dalam kontrol data, Anda perlu menautkan kontrol data ke database. Untuk membuat tautan, Anda dapat memodifikasi kode di belakang file Site.Master.cs .

Di Penjelajah Solusi, klik kanan halaman Site.Master lalu klik Tampilkan Kode. File Site.Master.cs dibuka di editor.

Di dekat awal file Site.Master.cs , tambahkan dua namespace tambahan sehingga semua namespace yang disertakan muncul sebagai berikut:

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;

Tambahkan metode yang disorot GetCategories setelah Page_Load penanganan aktivitas sebagai berikut:

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;
}

Kode di atas dijalankan ketika halaman apa pun yang menggunakan halaman master dimuat di browser. Kontrol ListView (bernama "categoryList") yang Anda tambahkan sebelumnya dalam tutorial ini menggunakan pengikatan model untuk memilih data. Dalam markup ListView kontrol, Anda mengatur properti kontrol SelectMethod ke metode , yang GetCategories ditunjukkan di atas. Kontrol ListView memanggil metode pada GetCategories waktu yang sesuai dalam siklus hidup halaman dan secara otomatis mengikat data yang dikembalikan. Anda akan mempelajari lebih lanjut tentang mengikat data dalam tutorial berikutnya.

Menjalankan Aplikasi dan Membuat Database

Sebelumnya dalam seri tutorial ini Anda membuat kelas initializer (bernama "ProductDatabaseInitializer") dan menentukan kelas ini dalam file global.asax.cs . Kerangka Kerja Entitas akan menghasilkan database ketika aplikasi dijalankan pertama kali karena metode yang Application_Start terkandung dalam file global.asax.cs akan memanggil kelas initializer. Kelas initializer akan menggunakan kelas model (Category dan Product) yang Anda tambahkan sebelumnya dalam seri tutorial ini untuk membuat database.

Di Penjelajah Solusi, klik kanan halaman Default.aspx dan pilih Atur Sebagai Halaman Mulai.
Di Visual Studio tekan F5.
Dibutuhkan sedikit waktu untuk mengatur semuanya selama eksekusi pertama ini.

Saat Anda menjalankan aplikasi, aplikasi akan dikompilasi dan database bernama wingtiptoys.mdf akan dibuat di folder App_Data . Di browser, Anda akan melihat menu navigasi kategori. Menu ini dihasilkan dengan mengambil kategori dari database. Dalam tutorial berikutnya, Anda akan menerapkan navigasi.
Tutup browser untuk menghentikan aplikasi yang sedang berjalan.

Meninjau Database

Buka file Web.config dan lihat bagian string koneksi. Anda dapat melihat bahwa AttachDbFilename nilai dalam string koneksi menunjuk ke DataDirectory untuk proyek aplikasi Web. Nilai |DataDirectory| adalah nilai cadangan yang mewakili folder App_Data dalam proyek. Folder ini adalah tempat database yang dibuat dari kelas entitas Anda berada.

<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>

Catatan

Jika folder App_Data tidak terlihat atau jika folder kosong, pilih ikon Refresh lalu ikon Perlihatkan Semua File di bagian atas jendela Penjelajah Solusi. Memperluas lebar jendela Penjelajah Solusi mungkin diperlukan untuk menampilkan semua ikon yang tersedia.

Sekarang Anda dapat memeriksa data yang terkandung dalam file database wingtiptoys.mdf dengan menggunakan jendela Server Explorer .

Perluas folder App_Data. Jika folder App_Data tidak terlihat, lihat catatan di atas.
Jika file database wingtiptoys.mdf tidak terlihat, pilih ikon Refresh lalu ikon Perlihatkan Semua File di bagian atas jendela Penjelajah Solusi.
Klik kanan file database wingtiptoys.mdf dan pilih Buka.
Penjelajah Server ditampilkan.
Luaskan folder Tabel.
Klik kanan tabel Produkdan pilih Perlihatkan Data Tabel.
Tabel Produk ditampilkan.
Tampilan ini memungkinkan Anda melihat dan memodifikasi data dalam tabel Produk secara manual.
Tutup jendela tabel Produk .
Di Server Explorer, klik kanan tabel Produk lagi dan pilih Buka Definisi Tabel.
Desain data untuk tabel Produk ditampilkan.
Di tab T-SQL Anda akan melihat pernyataan SQL DDL yang digunakan untuk membuat tabel. Anda juga dapat menggunakan UI di tab Desain untuk mengubah skema.
Di Penjelajah Server, klik kanan database WingtipToys dan pilih Tutup Koneksi.
Dengan melepaskan database dari Visual Studio, skema database akan dapat dimodifikasi nanti dalam seri tutorial ini.
Kembali ke Penjelajah Solusi oleh tab Penjelajah Solusi di bagian bawah jendela Server Explorer.

Ringkasan

Dalam tutorial seri ini Anda telah menambahkan beberapa UI dasar, grafik, halaman, dan navigasi. Selain itu, Anda menjalankan aplikasi Web, yang membuat database dari kelas data yang Anda tambahkan di tutorial sebelumnya. Anda juga melihat konten tabel Produk database dengan menampilkan database secara langsung. Dalam tutorial berikutnya, Anda akan menampilkan item data dan detail dari database.

Sumber Tambahan

Pengantar Halaman Web ASP.NET Pemrograman
Gambaran Umum Kontrol Server Web ASP.NET
CSS Tutorial

Sebelumnya Berikutnya

Bagikan melalui

UI dan Navigasi

Yang akan Anda pelajari:

Memodifikasi UI

@Page Direktif

Kontrol Server Web

Kode Server

Memperbarui Halaman Master

Halaman Induk

Menambahkan File Gambar

Unduh dari situs Sampel MSDN:

Menambahkan Halaman

Memperbarui Bootstrap

Memodifikasi Navigasi Default

Menambahkan Kontrol Data untuk Menampilkan Data Navigasi

Menautkan Kontrol Data ke Database

Menjalankan Aplikasi dan Membuat Database

Meninjau Database

Ringkasan

Sumber Tambahan

Saran dan Komentar

Sumber Daya Tambahan: