Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Erik Reitan
Seri tutorial ini mengajarkan Anda dasar-dasar membangun aplikasi ASP.NET Web Forms dengan ASP.NET 4.7 dan Microsoft Visual Studio 2017.
Dalam tutorial ini, Anda akan mempelajari cara menampilkan item data dan detail item data dengan ASP.NET Web Forms dan Entity Framework Code First. Tutorial ini dibangun pada tutorial "UI dan Navigasi" sebelumnya sebagai bagian dari seri tutorial Wingtip Toy Store. Setelah menyelesaikan tutorial ini, Anda akan melihat produk di halaman ProductsList.aspx dan detail produk di halaman ProductDetails.aspx .
Anda akan mempelajari cara:
- Menambahkan kontrol data untuk menampilkan produk dari database
- Menyambungkan kontrol data ke data yang dipilih
- Menambahkan kontrol data untuk menampilkan detail produk dari database
- Mengambil nilai dari string kueri dan menggunakan nilai tersebut untuk membatasi data yang diambil dari database
Fitur yang diperkenalkan dalam tutorial ini:
- Pengikatan model
- Penyedia nilai
Menambahkan kontrol data
Anda dapat menggunakan beberapa opsi berbeda untuk mengikat data ke kontrol server. Paling umum termasuk:
- Menambahkan kontrol sumber data
- Menambahkan kode dengan tangan
- Menggunakan pengikatan model
Menggunakan kontrol sumber data untuk mengikat data
Menambahkan kontrol sumber data memungkinkan Anda menautkan kontrol sumber data ke kontrol yang menampilkan data. Dengan pendekatan ini, Anda dapat secara deklaratif, daripada secara terprogram, menghubungkan kontrol sisi server ke sumber data.
Kode dengan tangan ke data yang terikat
Pengkodian dengan tangan melibatkan:
- Membaca nilai
- Memeriksa apakah null
- Mengonversinya ke jenis yang sesuai
- Memeriksa keberhasilan konversi
- Menggunakan nilai dalam kueri
Pendekatan ini memungkinkan Anda memiliki kontrol penuh atas logika akses data Anda.
Menggunakan pengikatan model untuk mengikat data
Pengikatan model memungkinkan Anda mengikat hasil dengan kode yang jauh lebih sedikit dan memberi Anda kemampuan untuk menggunakan kembali fungsionalitas di seluruh aplikasi Anda. Ini menyederhanakan bekerja dengan logika akses data yang berfokus pada kode sambil tetap menyediakan kerangka kerja pengikatan data yang kaya.
Menampilkan produk
Dalam tutorial ini, Anda akan menggunakan pengikatan model untuk mengikat data. Untuk mengonfigurasi kontrol data untuk menggunakan pengikatan model untuk memilih data, Anda mengatur properti kontrol SelectMethod ke nama metode dalam kode halaman. Kontrol data memanggil metode pada waktu yang sesuai dalam siklus hidup halaman dan secara otomatis mengikat data yang dikembalikan. Tidak perlu memanggil DataBind metode secara eksplisit.
Di Penjelajah Solusi, buka ProductList.aspx.
Ganti markup yang sudah ada dengan markup ini:
<%@ 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> </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>
Kode ini menggunakan kontrol ListView bernama productList untuk menampilkan produk.
<asp:ListView ID="productList" runat="server"
Dengan templat dan gaya, Anda menentukan bagaimana kontrol ListView menampilkan data. Ini berguna untuk data dalam struktur berulang apa pun. Meskipun contoh ListView ini hanya menampilkan data database, Anda juga dapat, tanpa kode, memungkinkan pengguna untuk mengedit, menyisipkan, dan menghapus data, dan untuk mengurutkan dan halaman data.
Dengan mengatur ItemType properti dalam kontrol ListView , ekspresi Item pengikatan data tersedia dan kontrol menjadi sangat diketik. Seperti disebutkan dalam tutorial sebelumnya, Anda dapat memilih Detail objek item dengan IntelliSense, seperti menentukan ProductName:
Anda juga menggunakan pengikatan model untuk menentukan SelectMethod nilai. Nilai ini (GetProducts) sesuai dengan metode yang akan Anda tambahkan ke kode di belakang untuk menampilkan produk di langkah berikutnya.
Menambahkan kode untuk menampilkan produk
Dalam langkah ini, Anda akan menambahkan kode untuk mengisi kontrol ListView dengan data produk dari database. Kode ini mendukung menampilkan semua produk dan produk kategori individu.
Di Penjelajah Solusi, klik kanan ProductList.aspx lalu pilih Tampilkan Kode.
Ganti kode yang ada dalam file ProductList.aspx.cs dengan ini:
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; } } }
Kode ini memperlihatkan GetProducts metode yang dirujuk ItemType properti kontrol ListView di halaman ProductList.aspx. Untuk membatasi hasil ke kategori database tertentu, kode menetapkan categoryId nilai dari nilai string kueri yang diteruskan ke halaman ProductList.aspx saat halaman ProductList.aspx dinavigasi. Kelas QueryStringAttribute di System.Web.ModelBinding namespace digunakan untuk mengambil nilai variabel idstring kueri . Ini menginstruksikan pengikatan model untuk mencoba mengikat nilai dari string kueri ke parameter pada categoryId durasi.
Saat kategori yang valid diteruskan sebagai string kueri ke halaman, hasil kueri terbatas pada produk tersebut dalam database yang cocok dengan categoryId nilai. Misalnya, jika URL halaman ProductsList.aspx adalah ini:
http://localhost/ProductList.aspx?id=1
Halaman hanya menampilkan produk di mana sama categoryId dengan 1.
Semua produk ditampilkan jika tidak ada string kueri yang disertakan saat halaman ProductList.aspx dipanggil.
Sumber nilai untuk metode ini disebut sebagai penyedia nilai (seperti QueryString), dan atribut parameter yang menunjukkan penyedia nilai mana yang akan digunakan disebut sebagai atribut penyedia nilai (seperti id). ASP.NET menyertakan penyedia nilai dan atribut terkait untuk semua sumber input pengguna yang khas dalam aplikasi Formulir Web seperti string kueri, cookie, nilai formulir, kontrol, status tampilan, status sesi, dan properti profil. Anda juga dapat menulis penyedia nilai kustom.
Menjalankan aplikasi
Jalankan aplikasi sekarang untuk melihat semua produk atau produk kategori.
Tekan F5 saat berada di Visual Studio untuk menjalankan aplikasi.
Browser terbuka dan menampilkan halaman Default.aspx .Pilih Mobil dari menu navigasi kategori produk.
Halaman ProductList.aspx hanya menampilkan produk kategori Mobil . Nanti dalam tutorial ini, Anda akan menampilkan detail produk.
Pilih Produk dari menu navigasi di bagian atas.
Sekali lagi, halaman ProductList.aspx ditampilkan, namun kali ini menunjukkan seluruh daftar produk.
Tutup browser dan kembali ke Visual Studio.
Menambahkan kontrol data untuk menampilkan detail produk
Selanjutnya, Anda akan memodifikasi markup di halaman ProductDetails.aspx yang Anda tambahkan di tutorial sebelumnya untuk menampilkan informasi produk tertentu.
Di Penjelajah Solusi, buka ProductDetails.aspx.
Ganti markup yang sudah ada dengan markup ini:
<%@ 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> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#:Item.ProductID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView> </asp:Content>Kode ini menggunakan kontrol FormView untuk menampilkan detail produk tertentu. Markup ini menggunakan metode seperti metode yang digunakan untuk menampilkan data di halaman ProductList.aspx . Kontrol FormView digunakan untuk menampilkan satu rekaman pada satu waktu dari sumber data. Saat Anda menggunakan kontrol FormView , Anda membuat templat untuk menampilkan dan mengedit nilai terikat data. Templat ini berisi kontrol, ekspresi pengikatan, dan pemformatan yang menentukan tampilan dan fungsionalitas formulir.
Menyambungkan markup sebelumnya ke database memerlukan kode tambahan.
Di Penjelajah Solusi, klik kanan ProductDetails.aspx lalu klik Tampilkan Kode.
File ProductDetails.aspx.cs ditampilkan.Ganti kode yang ada dengan kode ini:
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; } } }
Kode ini memeriksa nilai string kueri "productID". Jika nilai string kueri yang valid ditemukan, produk yang cocok akan ditampilkan. Jika string kueri tidak ditemukan, atau nilainya tidak valid, tidak ada produk yang ditampilkan.
Menjalankan aplikasi
Sekarang Anda dapat menjalankan aplikasi untuk melihat produk individual yang ditampilkan berdasarkan ID produk.
Tekan F5 saat berada di Visual Studio untuk menjalankan aplikasi.
Browser terbuka dan menampilkan halaman Default.aspx .Pilih Perahu dari menu navigasi kategori.
Halaman ProductList.aspx ditampilkan.Pilih Perahu Kertas dari daftar produk. Halaman ProductDetails.aspx ditampilkan.
Tutup browser.
Sumber Daya Tambahan:
Mengambil dan menampilkan data dengan pengikatan model dan formulir web
Langkah berikutnya
Dalam tutorial ini, Anda menambahkan markup dan kode untuk menampilkan produk dan detail produk. Anda mempelajari tentang kontrol data yang diketik dengan kuat, pengikatan model, dan penyedia nilai. Dalam tutorial berikutnya, Anda akan menambahkan ke cart belanja ke aplikasi sampel Wingtip Toys.