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 Tim Perkemahan Web
Versi baru ASP.NET Web Forms memperkenalkan sejumlah peningkatan yang berfokus pada peningkatan pengalaman pengguna saat bekerja dengan data.
Di versi Web Forms sebelumnya, saat menggunakan pengikatan data untuk memancarkan nilai anggota objek, Anda menggunakan ekspresi pengikatan data Bind() atau Eval(). Dalam versi baru ASP.NET, Anda dapat mendeklarasikan jenis data apa yang akan diikat kontrol dengan menggunakan properti ItemType baru. Mengatur properti ini akan memungkinkan Anda menggunakan variabel yang sangat ditik untuk menerima manfaat penuh dari pengalaman pengembangan Visual Studio, seperti IntelliSense, navigasi anggota, dan pemeriksaan waktu kompilasi.
Dengan kontrol terikat data, Anda sekarang juga dapat menentukan metode kustom Anda sendiri untuk memilih, memperbarui, menghapus, dan menyisipkan data, menyederhanakan interaksi antara kontrol halaman dan logika aplikasi Anda. Selain itu, kemampuan pengikatan model telah ditambahkan ke ASP.NET, yang berarti Anda dapat memetakan data dari halaman langsung ke parameter jenis metode.
Memvalidasi input pengguna juga harus lebih mudah dengan versi terbaru Formulir Web. Anda sekarang dapat membuat anotasi kelas model Anda dengan atribut validasi dari namespace Layanan System.ComponentModel.DataAnnotations dan meminta semua kontrol situs Anda memvalidasi input pengguna menggunakan informasi tersebut. Validasi sisi klien di Formulir Web sekarang terintegrasi dengan jQuery, menyediakan kode sisi klien yang lebih bersih dan fitur JavaScript yang tidak mengganggu.
Di area validasi permintaan, penyempurnaan telah dilakukan untuk mempermudah menonaktifkan validasi permintaan secara selektif untuk bagian tertentu dari aplikasi Anda atau membaca data permintaan yang tidak valid.
Beberapa penyempurnaan telah dilakukan pada kontrol server Formulir Web untuk memanfaatkan fitur baru HTML5:
- Properti TextMode kontrol TextBox telah diperbarui untuk mendukung jenis input HTML5 baru seperti email, tanggalwaktu, dan sebagainya.
- Kontrol FileUpload sekarang mendukung beberapa unggahan file dari browser yang mendukung fitur HTML5 ini.
- Kontrol validator sekarang mendukung validasi elemen input HTML5.
- Elemen HTML5 baru yang memiliki atribut yang mewakili URL sekarang mendukung runat="server". Akibatnya, Anda dapat menggunakan konvensi ASP.NET di jalur URL, seperti operator ~ untuk mewakili akar aplikasi (misalnya, <video runat="server" src="~/myVideo.wmv"></video>).
- Kontrol UpdatePanel telah diperbaiki untuk mendukung posting bidang input HTML5.
Di portal ASP.NET resmi, Anda dapat menemukan lebih banyak contoh fitur baru di ASP.NET WebForms 4.5: Apa yang Baru di ASP.NET 4.5 dan Visual Studio 2012
Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web.
Tujuan
Di lab langsung ini, Anda akan mempelajari cara:
- Gunakan ekspresi pengikatan data yang sangat ditik
- Menggunakan fitur pengikatan model baru di Formulir Web
- Menggunakan penyedia nilai untuk memetakan data halaman ke metode code-behind
- Menggunakan Anotasi Data untuk validasi input pengguna
- Manfaatkan validasi sisi klien yang tidak mengganggu dengan jQuery di Formulir Web
- Menerapkan validasi permintaan terperinci
- Menerapkan pemrosesan halaman asinkron dalam Formulir Web
Prasyarat
Anda harus memiliki item berikut untuk menyelesaikan lab ini:
- Microsoft Visual Studio Express 2012 untuk Web atau superior (baca Lampiran A untuk petunjuk tentang cara menginstalnya).
Siapkan
Menginstal Cuplikan Kode
Untuk kenyamanan, banyak kode yang akan Anda kelola di sepanjang lab ini tersedia sebagai cuplikan kode Visual Studio. Untuk menginstal cuplikan kode, jalankan file .\Source\Setup\CodeSnippets.vsi .
Jika Anda tidak terbiasa dengan Cuplikan Visual Studio Code, dan ingin mempelajari cara menggunakannya, Anda dapat merujuk ke lampiran dari dokumen ini "Lampiran C: Menggunakan Cuplikan Kode".
Latihan
Lab langsung ini mencakup latihan berikut:
- Latihan 1: Pengikatan Model dalam Formulir Web ASP.NET
- Latihan 2: Validasi Data
- Latihan 3: Pemrosesan Halaman Asinkron dalam Formulir Web ASP.NET
Catatan
Setiap latihan disertai dengan folder Akhir yang berisi solusi yang dihasilkan yang harus Anda peroleh setelah menyelesaikan latihan. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan untuk mengerjakan latihan.
Perkiraan waktu untuk menyelesaikan lab ini: 60 menit.
Latihan 1: Pengikatan Model dalam Formulir Web ASP.NET
Versi baru ASP.NET Web Forms memperkenalkan sejumlah penyempurnaan yang berfokus pada peningkatan pengalaman saat bekerja dengan data. Sepanjang latihan ini, Anda akan mempelajari tentang kontrol data dan pengikatan model yang sangat diketik.
Tugas 1 - Menggunakan Pengikatan Data yang Sangat Dititik
Dalam tugas ini, Anda akan menemukan pengikatan baru yang diketik dengan kuat yang tersedia di ASP.NET 4.5.
Buka folder Mulai solusi yang terletak di Source/Ex1-ModelBinding/Begin/.
Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
Terakhir, bangun solusi dengan mengklik Build | Build Solution.
Catatan
Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka halaman Customers.aspx . Tempatkan daftar tanpa nomor dalam kontrol utama dan sertakan kontrol pengulang di dalamnya untuk mencantumkan setiap pelanggan. Atur nama pengulang ke customersRepeater seperti yang ditunjukkan dalam kode berikut.
Di versi Web Forms sebelumnya, saat menggunakan pengikatan data untuk memancarkan nilai anggota pada objek yang Anda ikat datanya, Anda akan menggunakan ekspresi pengikatan data, bersama dengan panggilan ke metode Eval, meneruskan nama anggota sebagai string.
Pada runtime, panggilan ke Eval ini akan menggunakan pantulan terhadap objek yang saat ini terikat untuk membaca nilai anggota dengan nama yang diberikan, dan menampilkan hasilnya dalam HTML. Pendekatan ini membuatnya sangat mudah untuk mengikat data terhadap data yang tidak dibentuk secara arbitrer.
Sayangnya, Anda kehilangan banyak fitur pengalaman waktu pengembangan yang hebat di Visual Studio, termasuk IntelliSense untuk nama anggota, dukungan untuk navigasi (seperti Definisi Buka), dan pemeriksaan waktu kompilasi.
... <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> <h3>Customers</h3> <ul> <asp:Repeater ID="customersRepeater" runat="server"> <ItemTemplate> <li> <%# Eval("FirstName") %> <%# Eval("LastName") %> </li> </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Buka file Customers.aspx.cs.
Tambahkan pernyataan penggunaan berikut.
using System.Linq;Dalam metode Page_Load, tambahkan kode untuk mengisi pengulang dengan daftar pelanggan.
(Cuplikan Kode - Lab Formulir Web - Ex01 - Mengikat Sumber Data Pelanggan)
protected void Page_Load(object sender, EventArgs e) { using (var db = new WebFormsLab.Model.ProductsContext()) { this.customersRepeater.DataSource = db.Customers.ToList(); this.customersRepeater.DataBind(); } }Solusi ini menggunakan EntityFramework bersama dengan CodeFirst untuk membuat dan mengakses database. Dalam kode berikut, customersRepeater terikat ke kueri materialisasi yang mengembalikan semua pelanggan dari database.
Tekan F5 untuk menjalankan solusi dan masuk ke halaman Pelanggan untuk melihat pengulang beraksi. Karena solusinya menggunakan CodeFirst, database akan dibuat dan diisi di instans SQL Express lokal Anda saat menjalankan aplikasi.
Mencantumkan pelanggan dengan pengulang
Catatan
Di Visual Studio 2012, IIS Express adalah server pengembangan Web default.
Tutup browser dan kembali ke Visual Studio.
Sekarang ganti implementasi untuk menggunakan pengikatan yang ditik dengan kuat. Buka halaman Customers.aspx dan gunakan atribut ItemType baru di pengulang untuk mengatur jenis Pelanggan sebagai jenis pengikatan.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul> <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server"> <ItemTemplate> ... </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Properti ItemType memungkinkan Anda mendeklarasikan jenis data mana yang akan diikat kontrol dan memungkinkan Anda menggunakan pengikatan yang diketik dengan kuat di dalam kontrol terikat data.
Ganti konten ItemTemplate dengan kode berikut.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> ... <ul> <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server"> <ItemTemplate> <li> <a href="CustomerDetails.aspx?id=<%#: Item.Id %>"> <%#: Item.FirstName %> <%#: Item.LastName %> </a> </li> </ItemTemplate> </asp:Repeater> </ul> <a href="CustomerDetails.aspx">Add a New Customer</a> </asp:Content>Salah satu kelemahan dengan pendekatan di atas adalah bahwa panggilan ke Eval() dan Bind() terikat terlambat - yang berarti Anda meneruskan string untuk mewakili nama properti. Ini berarti Anda tidak mendapatkan Intellisense untuk nama anggota, dukungan untuk navigasi kode (seperti Definisi Buka), atau dukungan pemeriksaan waktu kompilasi.
Mengatur properti ItemType menyebabkan dua variabel jenis baru dihasilkan dalam cakupan ekspresi pengikatan data: Item dan BindItem. Anda dapat menggunakan variabel yang sangat di ketik ini dalam ekspresi pengikatan data dan mendapatkan manfaat penuh dari pengalaman pengembangan Visual Studio.
": " yang digunakan dalam ekspresi akan secara otomatis mengodekan HTML output untuk menghindari masalah keamanan (misalnya, serangan skrip lintas situs). Notasi ini tersedia sejak .NET 4 untuk penulisan respons, tetapi sekarang juga tersedia dalam ekspresi pengikatan data.
Catatan
Anggota Item berfungsi untuk pengikatan satu arah. Jika Anda ingin melakukan pengikatan dua arah, gunakan anggota BindItem .
Dukungan IntelliSense dalam pengikatan yang sangat ditik
Tekan F5 untuk menjalankan solusi dan buka halaman Pelanggan untuk memastikan perubahan berfungsi seperti yang diharapkan.
Mencantumkan detail pelanggan
Tutup browser dan kembali ke Visual Studio.
Tugas 2 - Memperkenalkan Pengikatan Model dalam Formulir Web
Dalam versi ASP.NET Web Forms sebelumnya, saat Anda ingin melakukan pengikatan data dua arah, baik mengambil maupun memperbarui data, Anda perlu menggunakan objek Sumber Data. Ini bisa berupa Sumber Data Objek, Sumber Data SQL, Sumber Data LINQ, dan sebagainya. Namun jika skenario Anda memerlukan kode kustom untuk menangani data, Anda perlu menggunakan Sumber Data Objek dan ini membawa beberapa kelemahan. Misalnya, Anda perlu menghindari jenis kompleks dan Anda perlu menangani pengecualian saat menjalankan logika validasi.
Dalam versi baru ASP.NET Web Forms kontrol terikat data mendukung pengikatan model. Ini berarti Anda dapat menentukan metode pilih, perbarui, sisipkan, dan hapus langsung di kontrol terikat data untuk memanggil logika dari file code-behind Anda atau dari kelas lain.
Untuk mempelajari tentang hal ini, Anda akan menggunakan GridView untuk mencantumkan kategori produk menggunakan atribut SelectMethod baru. Atribut ini memungkinkan Anda menentukan metode untuk mengambil data GridView.
Buka halaman Products.aspx dan sertakan GridView. Konfigurasikan GridView seperti yang ditunjukkan di bawah ini untuk menggunakan pengikatan yang ditik dengan kuat dan mengaktifkan pengurutan dan penomoran.
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> <asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryID"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </asp:Content>Gunakan atribut SelectMethod baru untuk mengonfigurasi GridView untuk memanggil metode GetCategories untuk memilih data.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>Buka file Products.aspx.cs code-behind dan tambahkan yang berikut menggunakan pernyataan.
(Cuplikan Kode - Web Forms Lab - Ex01 - Namespace)
using System.Collections.Generic; using System.Data.Entity; using System.Data.Entity.Infrastructure; using System.Linq; using WebFormsLab.Model;Tambahkan anggota privat di kelas Produk dan tetapkan instans baru ProductsContext. Properti ini akan menyimpan konteks data Kerangka Kerja Entitas yang memungkinkan Anda menyambungkan ke database.
public partial class Products : System.Web.UI.Page { private ProductsContext db = new ProductsContext(); ...Buat metode GetCategories untuk mengambil daftar kategori menggunakan LINQ. Kueri akan menyertakan properti Produk sehingga GridView dapat menampilkan jumlah produk untuk setiap kategori. Perhatikan bahwa metode mengembalikan objek IQueryable mentah yang mewakili kueri yang akan dijalankan nanti pada siklus hidup halaman.
(Cuplikan Kode - Lab Formulir Web - Ex01 - GetCategories)
public IQueryable<Category> GetCategories() { var query = this.db.Categories .Include(c => c.Products); return query; }Catatan
Dalam versi ASP.NET Web Forms sebelumnya, mengaktifkan pengurutan dan penomoran menggunakan logika repositori Anda sendiri dalam konteks Sumber Data Objek, diperlukan untuk menulis kode kustom Anda sendiri dan menerima semua parameter yang diperlukan. Sekarang, karena metode pengikatan data dapat mengembalikan IQueryable dan ini mewakili kueri yang masih harus dijalankan, ASP.NET dapat mengurus modifikasi kueri untuk menambahkan parameter pengurutan dan penomoran yang tepat.
Tekan F5 untuk mulai menelusuri kesalahan situs dan masuk ke halaman Produk. Anda akan melihat bahwa GridView diisi dengan kategori yang dikembalikan oleh metode GetCategories.
Mengisi GridView menggunakan pengikatan model
Tekan SHIFT+F5 Hentikan penelusuran kesalahan.
Tugas 3 - Penyedia Nilai dalam Pengikatan Model
Pengikatan model tidak hanya memungkinkan Anda menentukan metode kustom untuk bekerja dengan data Anda langsung dalam kontrol terikat data, tetapi juga memungkinkan Anda untuk memetakan data dari halaman ke parameter dari metode ini. Pada parameter metode, Anda dapat menggunakan atribut penyedia nilai untuk menentukan sumber data nilai. Contohnya:
- Kontrol pada halaman
- Nilai string kueri
- Menampilkan data
- Status sesi
- Cookie
- Data formulir yang diposting
- Tampilkan status
- Penyedia nilai kustom juga didukung
Jika Anda telah menggunakan ASP.NET MVC 4, Anda akan melihat dukungan pengikatan model serupa. Memang, fitur-fitur ini diambil dari ASP.NET MVC dan dipindahkan ke perakitan System.Web untuk dapat menggunakannya pada Formulir Web juga.
Dalam tugas ini, Anda akan memperbarui GridView untuk memfilter hasilnya berdasarkan jumlah produk untuk setiap kategori, menerima parameter filter dengan pengikatan model.
Kembali ke halaman Products.aspx .
Di bagian atas GridView, tambahkan Label dan ComboBox untuk memilih jumlah produk untuk setiap kategori seperti yang ditunjukkan di bawah ini.
<h3>Categories</h3> <asp:Label ID="Label1" runat="server" AssociatedControlID="minProductsCount"> Show categories with at least this number of products: </asp:Label> <asp:DropDownList runat="server" ID="minProductsCount" AutoPostBack="true"> <asp:ListItem Value="" Text="-" /> <asp:ListItem Text="1" /> <asp:ListItem Text="3" /> <asp:ListItem Text="5" /> </asp:DropDownList> <br/>Tambahkan EmptyDataTemplate ke GridView untuk menampilkan pesan ketika tidak ada kategori dengan jumlah produk yang dipilih.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories"> <Columns> <asp:BoundField DataField="CategoryId" HeaderText="ID" /> <asp:BoundField DataField="CategoryName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" /> <asp:TemplateField HeaderText="# of Products"> <ItemTemplate><%#: Item.Products.Count %></ItemTemplate> </asp:TemplateField> </Columns> <EmptyDataTemplate> No categories found with a product count of <%#: minProductsCount.SelectedValue %> </EmptyDataTemplate> </asp:GridView>Buka Products.aspx.cs code-behind dan tambahkan pernyataan penggunaan berikut.
using System.Web.ModelBinding;Ubah metode GetCategories untuk menerima argumen minProductsCount bilangan bulat dan filter hasil yang dikembalikan. Untuk melakukan ini, ganti metode dengan kode berikut.
(Cuplikan Kode - Lab Formulir Web - Ex01 - GetCategories 2)
public IQueryable<Category> GetCategories([Control]int? minProductsCount) { var query = this.db.Categories .Include(c => c.Products); if (minProductsCount.HasValue) { query = query.Where(c => c.Products.Count >= minProductsCount); } return query; }Atribut [Control] baru pada argumen minProductsCount akan memberi tahu ASP.NET nilainya harus diisi menggunakan kontrol di halaman. ASP.NET akan mencari kontrol apa pun yang cocok dengan nama argumen (minProductsCount) dan melakukan pemetaan dan konversi yang diperlukan untuk mengisi parameter dengan nilai kontrol.
Atau, atribut menyediakan konstruktor yang kelebihan beban yang memungkinkan Anda menentukan kontrol dari mana mendapatkan nilai.
Catatan
Salah satu tujuan dari fitur pengikatan data adalah untuk mengurangi jumlah kode yang perlu ditulis untuk interaksi halaman. Selain penyedia nilai [Kontrol], Anda dapat menggunakan penyedia pengikatan model lain dalam parameter metode Anda. Beberapa di antaranya tercantum dalam pengantar tugas.
Tekan F5 untuk mulai menelusuri kesalahan situs dan masuk ke halaman Produk. Pilih sejumlah produk di daftar drop-down dan perhatikan bagaimana GridView sekarang diperbarui.
Memfilter GridView dengan nilai daftar drop-down
Hentikan penelusuran kesalahan.
Tugas 4 - Menggunakan Pengikatan Model untuk Pemfilteran
Dalam tugas ini, Anda akan menambahkan GridView anak kedua untuk menampilkan produk dalam kategori yang dipilih.
Buka halaman Products.aspx dan perbarui kategori GridView untuk membuat tombol Pilih secara otomatis.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories" AutoGenerateSelectButton="true">Tambahkan GridView kedua bernama productsGrid di bagian bawah. Atur ItemType ke WebFormsLab.Model.Product, DataKeyNames ke ProductId dan SelectMethod ke GetProducts. Atur AutoGenerateColumns ke false dan tambahkan kolom untuk ProductId, ProductName, Description dan UnitPrice.
<h3>Products</h3> <asp:GridView ID="productsGrid" runat="server" CellPadding="4" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Product" DataKeyNames="ProductId" SelectMethod="GetProducts"> <Columns> <asp:BoundField DataField="ProductId" HeaderText="ID" /> <asp:BoundField DataField="ProductName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" /> <asp:BoundField DataField="UnitPrice" HeaderText="Price" /> </Columns> <EmptyDataTemplate> Select a category above to see its products </EmptyDataTemplate> </asp:GridView>Buka file Products.aspx.cs code-behind. Terapkan metode GetProducts untuk menerima ID kategori dari kategori GridView dan filter produk. Pengikatan model akan mengatur nilai parameter menggunakan baris yang dipilih di categoriesGrid. Karena nama argumen dan nama kontrol tidak cocok, Anda harus menentukan nama kontrol di penyedia nilai Kontrol.
(Cuplikan Kode - Web Forms Lab - Ex01 - GetProducts)
public IEnumerable<Product> GetProducts([Control("categoriesGrid")]int? categoryId) { return this.db.Products.Where(p => p.CategoryId == categoryId); }Catatan
Pendekatan ini memudahkan pengujian unit metode ini. Pada konteks pengujian unit, di mana Formulir Web tidak dijalankan, atribut [Kontrol] tidak akan melakukan tindakan tertentu.
Buka halaman Products.aspx dan temukan produk GridView. Perbarui produk GridView untuk menampilkan tautan untuk mengedit produk yang dipilih.
<h3>Products</h3> <asp:GridView ID="productsGrid" runat="server" CellPadding="4" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Product" DataKeyNames="ProductId" SelectMethod="GetProducts"> <Columns> <asp:TemplateField> <ItemTemplate> <a href="ProductDetails.aspx?productId=<%#: Item.ProductId %>">View</a> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ProductId" HeaderText="ID" /> <asp:BoundField DataField="ProductName" HeaderText="Name" /> <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" /> <asp:BoundField DataField="UnitPrice" HeaderText="Price" /> </Columns> <EmptyDataTemplate> Select a category above to see its products </EmptyDataTemplate> </asp:GridView>Buka kode halaman ProductDetails.aspx di belakang dan ganti metode SelectProduct dengan kode berikut.
(Cuplikan Kode - Web Forms Lab - Ex01 - SelectProduct Method)
public Product SelectProduct([QueryString]int? productId) { return this.db.Products.Find(productId); }Catatan
Perhatikan bahwa atribut [QueryString] digunakan untuk mengisi parameter metode dari parameter productId dalam string kueri.
Tekan F5 untuk mulai menelusuri kesalahan situs dan masuk ke halaman Produk. Pilih kategori apa pun dari kategori GridView dan perhatikan bahwa produk GridView diperbarui.
Menampilkan produk dari kategori yang dipilih
Klik tautan Tampilkan pada produk untuk membuka halaman ProductDetails.aspx.
Perhatikan bahwa halaman mengambil produk dengan SelectMethod menggunakan parameter productId dari string kueri.
Menampilkan detail produk
Catatan
Kemampuan untuk mengetik deskripsi HTML akan diimplementasikan dalam latihan berikutnya.
Tugas 5 - Menggunakan Pengikatan Model untuk Operasi Pembaruan
Dalam tugas sebelumnya, Anda telah menggunakan pengikatan model terutama untuk memilih data, dalam tugas ini Anda akan mempelajari cara menggunakan pengikatan model dalam operasi pembaruan.
Anda akan memperbarui kategori GridView untuk membiarkan kategori pembaruan pengguna.
Buka halaman Products.aspx dan perbarui kategori GridView untuk membuat tombol Edit secara otomatis dan gunakan atribut UpdateMethod baru untuk menentukan metode UpdateCategory untuk memperbarui item yang dipilih.
<asp:GridView ID="categoriesGrid" runat="server" AutoGenerateColumns="false" ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId" SelectMethod="GetCategories" AutoGenerateSelectButton="true" AutoGenerateEditButton="true" UpdateMethod="UpdateCategory">Atribut DataKeyNames di GridView menentukan anggota mana yang secara unik mengidentifikasi objek yang terikat model dan oleh karena itu, yang merupakan parameter metode pembaruan setidaknya harus menerima.
Buka file Products.aspx.cs code-behind dan terapkan metode UpdateCategory. Metode harus menerima ID kategori untuk memuat kategori saat ini, mengisi nilai dari GridView lalu memperbarui kategori.
(Cuplikan Kode - Lab Formulir Web - Ex01 - UpdateCategory)
public void UpdateCategory(int categoryId) { var category = this.db.Categories.Find(categoryId); this.TryUpdateModel(category); if (this.ModelState.IsValid) { this.db.SaveChanges(); } }Metode TryUpdateModel baru di kelas Halaman bertanggung jawab untuk mengisi objek model menggunakan nilai dari kontrol di halaman. Dalam hal ini, ini akan menggantikan nilai yang diperbarui dari baris GridView saat ini yang diedit ke dalam objek kategori .
Catatan
Latihan berikutnya akan menjelaskan penggunaan ModelState.IsValid untuk memvalidasi data yang dimasukkan oleh pengguna saat mengedit objek.
Jalankan situs dan masuk ke halaman Produk. Edit kategori. Ketik nama baru lalu klik Perbarui untuk mempertahankan perubahan.
Mengedit kategori
Latihan 2: Validasi Data
Dalam latihan ini, Anda akan mempelajari tentang fitur validasi data baru di ASP.NET 4.5. Anda akan melihat fitur validasi baru yang tidak mengganggu di Formulir Web. Anda akan menggunakan anotasi data di kelas model aplikasi untuk validasi input pengguna, dan akhirnya, Anda akan mempelajari cara mengaktifkan atau menonaktifkan validasi permintaan ke kontrol individual di halaman.
Tugas 1 - Validasi Tidak Mengganggu
Formulir dengan data kompleks termasuk validator cenderung menghasilkan terlalu banyak kode JavaScript di halaman, yang dapat mewakili sekitar 60% dari kode. Dengan validasi yang tidak mengganggu diaktifkan, kode HTML Anda akan terlihat lebih bersih dan lebih rapi.
Di bagian ini, Anda akan mengaktifkan validasi yang tidak mengganggu di ASP.NET untuk membandingkan kode HTML yang dihasilkan oleh kedua konfigurasi.
Buka Visual Studio 2012 dan buka solusi Mulai yang terletak di folder Source\Ex2-Validation\Begin lab ini. Atau, Anda dapat terus mengerjakan solusi yang ada dari latihan sebelumnya.
Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, di Penjelajah Solusi, klik proyek WebFormsLab Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
Terakhir, bangun solusi dengan mengklik Build | Build Solution.
Catatan
Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Tekan F5 untuk memulai aplikasi web. Buka halaman Pelanggan dan klik tautan Tambahkan Pelanggan Baru.
Klik kanan pada halaman browser, dan pilih opsi Tampilkan Sumber untuk membuka kode HTML yang dihasilkan oleh aplikasi.
Menampilkan kode HTML halaman
Gulir kode sumber halaman dan perhatikan bahwa ASP.NET telah menyuntikkan kode JavaScript dan validator data di halaman untuk melakukan validasi dan menampilkan daftar kesalahan.
Kode JavaScript validasi di halaman CustomerDetails
Tutup browser dan kembali ke Visual Studio.
Sekarang Anda akan mengaktifkan validasi yang tidak mengganggu. Buka Web.Config dan temukan kunci ValidationSettings:UnobtrusiveValidationMode di bagian AppSettings . Atur nilai kunci ke WebForms.
<configuration> ... <appSettings> <add key="aspnet:uselegacysynchronizationcontext" value="false" /> <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>Catatan
Anda juga dapat mengatur properti ini dalam peristiwa "Page_Load" jika Anda ingin mengaktifkan Validasi Tidak Mengganggu hanya untuk beberapa halaman.
Buka CustomerDetails.aspx dan tekan F5 untuk memulai aplikasi Web.
Tekan tombol F12 untuk membuka alat pengembang IE. Setelah alat pengembang terbuka, pilih tab skrip. Pilih CustomerDetails.aspx dari menu dan perhatikan bahwa skrip yang diperlukan untuk menjalankan jQuery pada halaman telah dimuat ke browser dari situs lokal.
Memuat file jQuery JavaScript langsung dari server IIS lokal
Tutup browser untuk kembali ke Visual Studio. Buka file Site.Master lagi dan temukan ScriptManager. Tambahkan properti EnableCdn atribut dengan nilai True. Ini akan memaksa jQuery untuk dimuat dari URL online, bukan dari URL situs lokal.
Buka CustomerDetails.aspx di Visual Studio. Tekan tombol F5 untuk menjalankan situs. Setelah Internet Explorer terbuka, tekan tombol F12 untuk membuka alat pengembang. Pilih tab Skrip , lalu lihat daftar drop-down. Perhatikan bahwa file jQuery JavaScript tidak lagi dimuat dari situs lokal, melainkan dari cdn jQuery online.
Memuat file JavaScript jQuery dari CDN
Buka kode sumber halaman HTML lagi menggunakan opsi Tampilkan sumber di browser. Perhatikan bahwa dengan mengaktifkan validasi yang tidak mengganggu ASP.NET telah mengganti kode JavaScript yang disuntikkan dengan data- *atribut.
Kode validasi yang tidak mengganggu
Catatan
Dalam contoh ini, Anda melihat bagaimana ringkasan validasi dengan anotasi Data disederhanakan hanya ke beberapa baris HTML dan JavaScript. Sebelumnya, tanpa validasi yang tidak mengganggu, semakin banyak kontrol validasi yang Anda tambahkan, semakin besar kode validasi JavaScript Anda akan tumbuh.
Tugas 2 - Memvalidasi Model dengan Anotasi Data
ASP.NET 4.5 memperkenalkan validasi anotasi data untuk Formulir Web. Alih-alih memiliki kontrol validasi pada setiap input, Anda sekarang dapat menentukan batasan di kelas model Anda dan menggunakannya di semua aplikasi web Anda. Di bagian ini, Anda akan mempelajari cara menggunakan anotasi data untuk memvalidasi formulir pelanggan baru/edit.
Buka halaman CustomerDetail.aspx . Perhatikan bahwa nama depan pelanggan dan nama kedua di bagian EditItemTemplate dan InsertItemTemplate divalidasi menggunakan kontrol RequiredFieldValidator. Setiap validator dikaitkan dengan kondisi tertentu, jadi Anda perlu menyertakan validator sebanyak mungkin sebagai syarat untuk memeriksa.
Tambahkan anotasi data untuk memvalidasi kelas Model pelanggan. Buka kelas Customer.cs di folder Model dan hiasi setiap properti menggunakan atribut anotasi data.
(Cuplikan Kode - Web Forms Lab - Ex02 - Anotasi Data)
namespace WebFormsLab.Model { using System.Collections.Generic; using System.ComponentModel.DataAnnotations; public class Customer { [Key] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Range(0, 130)] public int Age { get; set; } public Address Address { get; set; } [Phone] public string DaytimePhone { get; set; } [EmailAddress, StringLength(256)] public string EmailAddress { get; set; } } }Catatan
.NET Framework 4.5 telah memperluas pengumpulan anotasi data yang ada. Ini adalah beberapa anotasi data yang dapat Anda gunakan: [CreditCard], [Phone], [EmailAddress], [Range], [Compare], [Url], [FileExtensions], [Required], [Key], [RegularExpression].
Beberapa contoh penggunaan:
[Kunci]: Menentukan bahwa atribut adalah pengidentifikasi unik
[Range(0.4, 0.5, ErrorMessage="{Write an error message}"]: Double range
[EmailAddress(ErrorMessage="Email Tidak Valid"), MaxLength(56)]: Dua anotasi dalam baris yang sama.
Anda juga dapat menentukan pesan kesalahan Anda sendiri dalam setiap atribut.
Buka CustomerDetails.aspx dan hapus semua RequiredFieldValidators untuk bidang nama depan dan belakang di bagian EditItemTemplate dan InsertItemTemplate dari kontrol FormView.
<EditItemTemplate> <fieldset> <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" /> </p> <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" /> </p> ... <InsertItemTemplate> <fieldset> <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" /> </p> <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p> <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' /> <asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" /> </p> ...Catatan
Salah satu keuntungan menggunakan anotasi data adalah logika validasi tidak diduplikasi di halaman aplikasi Anda. Anda menentukannya sekali dalam model, dan menggunakannya di semua halaman aplikasi yang memanipulasi data.
Buka CustomerDetails.aspx code-behind dan temukan metode SaveCustomer. Metode ini dipanggil saat menyisipkan pelanggan baru dan menerima parameter Pelanggan dari nilai kontrol FormView. Ketika pemetaan antara kontrol halaman dan objek parameter terjadi, ASP.NET akan menjalankan validasi model terhadap semua atribut anotasi data dan mengisi kamus ModelState dengan kesalahan yang ditemui, jika ada.
ModelState.IsValid hanya akan mengembalikan true jika semua bidang pada model Anda valid setelah melakukan validasi.
public void SaveCustomer(Customer customer) { if (this.ModelState.IsValid) { using (var db = new ProductsContext()) { ...Tambahkan kontrol ValidationSummary di akhir halaman CustomerDetails untuk menampilkan daftar kesalahan model.
</fieldset> </InsertItemTemplate> </asp:FormView> <asp:ValidationSummary runat="server" ShowModelStateErrors="true" ForeColor="Red" HeaderText="Please check the following errors:"/> </asp:Content>ShowModelStateErrors adalah properti baru pada kontrol ValidationSummary yang ketika diatur ke true, kontrol akan menampilkan kesalahan dari kamus ModelState. Kesalahan ini berasal dari validasi anotasi data.
Tekan F5 untuk menjalankan aplikasi Web. Lengkapi formulir dengan beberapa nilai yang salah dan klik Simpan untuk menjalankan validasi. Perhatikan ringkasan kesalahan di bagian bawah.
Validasi dengan Anotasi Data
Tugas 3 - Menangani Kesalahan Database Kustom dengan ModelState
Dalam versi Formulir Web sebelumnya, menangani kesalahan database seperti string yang terlalu panjang atau pelanggaran kunci unik dapat melibatkan melemparkan pengecualian dalam kode repositori Anda lalu menangani pengecualian pada kode Anda di belakang untuk menampilkan kesalahan. Sejumlah besar kode diperlukan untuk melakukan sesuatu yang relatif sederhana.
Di Web Forms 4.5, objek ModelState dapat digunakan untuk menampilkan kesalahan di halaman, baik dari model Anda atau dari database, dengan cara yang konsisten.
Dalam tugas ini, Anda akan menambahkan kode untuk menangani pengecualian database dengan benar dan memperlihatkan pesan yang sesuai kepada pengguna menggunakan objek ModelState.
Saat aplikasi masih berjalan, coba perbarui nama kategori menggunakan nilai duplikat.
Memperbarui kategori dengan nama duplikat
Perhatikan bahwa pengecualian dilemparkan karena batasan "unik" dari kolom CategoryName .
Pengecualian untuk nama kategori duplikat
Hentikan penelusuran kesalahan. Dalam file Products.aspx.cs code-behind, perbarui metode UpdateCategory untuk menangani pengecualian yang dilemparkan oleh db. Panggilan metode SaveChanges() dan tambahkan kesalahan ke objek ModelState.
Metode TryUpdateModel baru memperbarui objek kategori yang diambil dari database menggunakan data formulir yang disediakan oleh pengguna.
(Cuplikan Kode - Web Forms Lab - Ex02 - UpdateCategory Handle Errors)
public void UpdateCategory(int categoryId) { var category = this.db.Categories.Find(categoryId); this.TryUpdateModel(category); if (this.ModelState.IsValid) { try { this.db.SaveChanges(); } catch (DbUpdateException) { var message = string.Format("A category with the name {0} already exists.", category.CategoryName); this.ModelState.AddModelError("CategoryName", message); } } }Catatan
Idealnya, Anda harus mengidentifikasi penyebab DbUpdateException dan memeriksa apakah akar penyebabnya adalah pelanggaran batasan kunci yang unik.
Buka Products.aspx dan tambahkan kontrol ValidationSummary di bawah kategori GridView untuk menampilkan daftar kesalahan model.
<asp:GridView ID="categoriesGrid" runat="server" ... </asp:GridView> <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowModelStateErrors="true" /> <h3>Products</h3>Jalankan situs dan masuk ke halaman Produk. Cobalah untuk memperbarui nama kategori menggunakan nilai duplikat.
Perhatikan bahwa pengecualian ditangani dan pesan kesalahan muncul di kontrol ValidationSummary .
Kesalahan kategori duplikat
Tugas 4 - Meminta Validasi di ASP.NET Web Forms 4.5
Fitur validasi permintaan di ASP.NET memberikan tingkat perlindungan default tertentu terhadap serangan scripting lintas situs (XSS). Di versi ASP.NET sebelumnya, validasi permintaan diaktifkan secara default dan hanya dapat dinonaktifkan untuk seluruh halaman. Dengan versi baru ASP.NET Web Forms, Anda sekarang dapat menonaktifkan validasi permintaan untuk satu kontrol, melakukan validasi permintaan malas atau mengakses data permintaan yang tidak divalidasi (berhati-hatilah jika Anda melakukannya!).
Tekan Ctrl+F5 untuk memulai situs tanpa penelusuran kesalahan dan masuk ke halaman Produk. Pilih kategori lalu klik tautan Edit pada salah satu produk.
Ketik deskripsi yang berisi konten yang berpotensi berbahaya, misalnya termasuk tag HTML. Perhatikan pengecualian yang dilemparkan karena validasi permintaan.
Mengedit produk dengan konten yang berpotensi berbahaya
Pengecualian dilemparkan karena validasi permintaan
Tutup halaman dan, di Visual Studio, tekan SHIFT+F5 untuk menghentikan penelusuran kesalahan.
Buka halaman ProductDetails.aspx dan temukan Kotak Teks Deskripsi.
Tambahkan properti ValidateRequestMode baru ke TextBox dan atur nilainya ke Dinonaktifkan.
Atribut ValidateRequestMode baru memungkinkan Anda menonaktifkan validasi permintaan secara terperinci pada setiap kontrol. Ini berguna ketika Anda ingin menggunakan input yang mungkin menerima kode HTML, tetapi ingin menjaga validasi berfungsi untuk sisa halaman.
<p> <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>' ValidateRequestMode="Disabled" /> </p>Tekan F5 untuk menjalankan aplikasi web. Buka halaman edit produk lagi dan lengkapi deskripsi produk termasuk tag HTML. Perhatikan bahwa Anda sekarang dapat menambahkan konten HTML ke deskripsi.
Validasi permintaan dinonaktifkan untuk deskripsi produk
Catatan
Dalam aplikasi produksi, Anda harus membersihkan kode HTML yang dimasukkan oleh pengguna untuk memastikan hanya tag HTML aman yang dimasukkan (misalnya, tidak <ada tag skrip> ). Untuk melakukan ini, Anda dapat menggunakan Microsoft Web Protection Library.
Edit produk lagi. Ketik kode HTML di bidang Nama dan klik Simpan. Perhatikan bahwa Validasi Permintaan hanya dinonaktifkan untuk bidang Deskripsi dan bidang lainnya masih divalidasi terhadap konten yang berpotensi berbahaya.
Validasi permintaan diaktifkan di bidang lainnya
ASP.NET Web Forms 4.5 menyertakan mode validasi permintaan baru untuk melakukan validasi permintaan dengan malas. Dengan mode validasi permintaan diatur ke 4.5, jika sepotong kode mengakses Request.Form["key"], ASP.NET validasi permintaan 4.5 hanya akan memicu validasi permintaan untuk elemen tertentu tersebut dalam kumpulan formulir.
Selain itu, ASP.NET 4.5 sekarang menyertakan rutinitas pengodean inti dari Microsoft Anti-XSS Library v4.0. Rutinitas pengodean Anti-XSS diimplementasikan oleh jenis AntiXssEncoder baru yang ditemukan di namespace System.Web.Security.AntiXss baru. Dengan parameter encoderType yang dikonfigurasi untuk menggunakan AntiXssEncoder, semua pengodean output dalam ASP.NET secara otomatis menggunakan rutinitas pengodean baru.
ASP.NET validasi permintaan 4.5 juga mendukung akses yang tidak divalidasi ke data permintaan. ASP.NET 4.5 menambahkan properti koleksi baru ke objek HttpRequest yang disebut Tidak Valid. Ketika Anda menavigasi ke HttpRequest.Unvalidated , Anda memiliki akses ke semua bagian umum data permintaan, termasuk Formulir, QueryStrings, Cookie, URL, dan sebagainya.
Objek Request.Unvalidated
Catatan
Silakan gunakan properti HttpRequest.Unvalidated dengan hati-hati! Pastikan Anda dengan hati-hati melakukan validasi kustom pada data permintaan mentah untuk memastikan bahwa teks berbahaya tidak disandingkan kembali dan dirender kembali ke pelanggan yang tidak terduga!
Latihan 3: Pemrosesan Halaman Asinkron dalam Formulir Web ASP.NET
Dalam latihan ini, Anda akan diperkenalkan ke fitur pemrosesan halaman asinkron baru di ASP.NET Web Forms.
Tugas 1 - Memperbarui Halaman Detail Produk untuk Mengunggah dan Menampilkan Gambar
Dalam tugas ini, Anda akan memperbarui halaman detail produk untuk memungkinkan pengguna menentukan URL gambar untuk produk dan menampilkannya dalam tampilan baca-saja. Anda akan membuat salinan lokal gambar yang ditentukan dengan mengunduhnya secara sinkron. Dalam tugas berikutnya, Anda akan memperbarui implementasi ini agar berfungsi secara asinkron.
Buka Visual Studio 2012 dan muat solusi Mulai yang terletak di Source\Ex3-Async\Begin dari folder lab ini. Atau, Anda dapat terus mengerjakan solusi yang ada dari latihan sebelumnya.
Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, di Penjelajah Solusi, klik proyek WebFormsLab dan pilih Kelola Paket NuGet.
Dalam dialog Kelola Paket NuGet, klik Pulihkan untuk mengunduh paket yang hilang.
Terakhir, bangun solusi dengan mengklik Build | Build Solution.
Catatan
Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.
Buka sumber halaman ProductDetails.aspx dan tambahkan bidang di ItemTemplate FormView untuk menampilkan gambar produk.
<ItemTemplate> <fieldset> <p><b><asp:Label ID="Label2" runat="server" AssociatedControlID="itemProductName">Name:</asp:Label></b></p> <p><asp:Label runat="server" ID="itemProductName" Text='<%#: Item.ProductName %>' /></p> <p><b><asp:Label ID="Label3" runat="server" AssociatedControlID="itemDescription">Description (HTML):</asp:Label></b></p> <p><asp:Label runat="server" ID="itemDescription" Text='<%# Item.Description %>' /></p> <p><b><asp:Label ID="Label4" runat="server" AssociatedControlID="itemUnitPrice">Price:</asp:Label></b></p> <p><asp:Label runat="server" ID="itemUnitPrice" Text='<%#: Item.UnitPrice %>' /></p> <p><b><asp:Label ID="Label5" runat="server" AssociatedControlID="itemUnitPrice">Image:</asp:Label></b></p> <p> <img src="<%# string.IsNullOrEmpty(Item.ImagePath) ? "/Images/noimage.jpg" : Item.ImagePath %>" alt="Image" /> </p> <br /> <p> <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" /> <asp:HyperLink NavigateUrl="~/Products.aspx" Text="Back" runat="server" /> </p> </fieldset> </ItemTemplate>Tambahkan bidang untuk menentukan URL gambar di EditTemplate FormView.
<fieldset> <p><asp:Label ID="Label2" runat="server" AssociatedControlID="ProductName">Name:</asp:Label></p> <p><asp:TextBox runat="server" ID="ProductName" Text='<%#: BindItem.ProductName %>' /></p> <p><asp:Label ID="Label3" runat="server" AssociatedControlID="Description">Description (HTML):</asp:Label></p> <p> <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>' ValidateRequestMode="Disabled" /> </p> <p><asp:Label ID="Label4" runat="server" AssociatedControlID="UnitPrice">Price:</asp:Label></p> <p><asp:TextBox runat="server" ID="UnitPrice" Text='<%#: BindItem.UnitPrice %>' /></p> <p><asp:Label ID="Label1" runat="server" AssociatedControlID="ImagePath">Image URL:</asp:Label></p> <p><asp:TextBox runat="server" ID="ImagePath" Text='<%#: BindItem.ImagePath %>' /></p> <br /> <p> <asp:Button runat="server" CommandName="Update" Text="Save" /> <asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" /> </p> </fieldset>Buka file ProductDetails.aspx.cs code-behind dan tambahkan direktif namespace berikut.
(Cuplikan Kode - Web Forms Lab - Ex03 - Namespace)
using System.IO; using System.Net; using System.Web;Buat metode UpdateProductImage untuk menyimpan gambar jarak jauh di folder Gambar lokal dan perbarui entitas produk dengan nilai lokasi gambar baru.
(Cuplikan Kode - Lab Formulir Web - Ex03 - UpdateProductImage)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); using (var wc = new WebClient()) { wc.DownloadFile(imageUrl, Server.MapPath(product.ImagePath)); } } }Perbarui metode UpdateProduct untuk memanggil metode UpdateProductImage.
(Cuplikan Kode - Web Forms Lab - Ex03 - UpdateProductImage Call)
public void UpdateProduct(int productId) { var product = this.db.Products.Find(productId); this.TryUpdateModel(product); this.UpdateProductImage(product); if (this.ModelState.IsValid) { this.db.SaveChanges(); } }Jalankan aplikasi dan coba unggah gambar untuk produk.
Mengatur gambar untuk produk
Tugas 2 - Menambahkan Pemrosesan Asinkron ke Halaman Detail Produk
Dalam tugas ini, Anda akan memperbarui halaman detail produk untuk membuatnya berfungsi secara asinkron. Anda akan meningkatkan tugas jangka panjang - proses pengunduhan gambar - dengan menggunakan pemrosesan halaman asinkron ASP.NET 4.5.
Metode asinkron dalam aplikasi web dapat digunakan untuk mengoptimalkan cara ASP.NET kumpulan utas digunakan. Dalam ASP.NET ada sejumlah utas terbatas di kumpulan utas untuk menghadiri permintaan, dengan demikian, ketika semua utas sibuk, ASP.NET mulai menolak permintaan baru, mengirim pesan kesalahan aplikasi dan membuat situs Anda tidak tersedia.
Operasi yang memakan waktu di situs web Anda adalah kandidat yang bagus untuk pemrograman asinkron karena mereka menempati utas yang ditetapkan untuk waktu yang lama. Ini termasuk permintaan jangka panjang, halaman dengan banyak elemen dan halaman berbeda yang memerlukan operasi offline, seperti mengkueri database atau mengakses server web eksternal. Keuntungannya adalah bahwa jika Anda menggunakan metode asinkron untuk operasi ini, saat halaman sedang diproses, utas dibebaskan dan dikembalikan ke kumpulan utas dan dapat digunakan untuk menghadiri permintaan halaman baru. Ini berarti, halaman akan mulai memproses dalam satu utas dari kumpulan utas dan mungkin menyelesaikan pemrosesan di yang berbeda, setelah pemrosesan asinkron selesai.
Buka halaman ProductDetails.aspx . Tambahkan atribut Asinkron di elemen Halaman dan atur ke true. Atribut ini memberi tahu ASP.NET untuk mengimplementasikan antarmuka IHttpAsyncHandler.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails" Async="true" %>Tambahkan Label di bagian bawah halaman untuk memperlihatkan detail utas yang menjalankan halaman.
<EmptyDataTemplate>Product not found</EmptyDataTemplate> </asp:FormView> <asp:Label ID="threadsMessageLabel" runat="server" /> </asp:Content>Buka ProductDetails.aspx.cs dan tambahkan direktif namespace berikut.
(Cuplikan Kode - Web Forms Lab - Ex03 - Namespace 2)
using System.Web.UI; using System.Threading;Ubah metode UpdateProductImage untuk mengunduh gambar dengan tugas asinkron. Anda akan mengganti metode WebClient DownloadFile dengan metode DownloadFileTaskAsync dan menyertakan kata kunci tunggu .
(Cuplikan Kode - Web Forms Lab - Ex03 - UpdateProductImage Async)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); this.RegisterAsyncTask(new PageAsyncTask(async (t) => { using (var wc = new WebClient()) { await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath)); } })); } }RegisterAsyncTask mendaftarkan tugas asinkron halaman baru untuk dijalankan di utas yang berbeda. Ini menerima ekspresi lambda dengan Tugas (t) yang akan dijalankan. Kata kunci tunggu dalam metode DownloadFileTaskAsync mengonversi sisa metode menjadi callback yang dipanggil secara asinkron setelah metode DownloadFileTaskAsync selesai. ASP.NET akan melanjutkan eksekusi metode dengan secara otomatis mempertahankan semua nilai asli permintaan HTTP. Model pemrograman asinkron baru di .NET 4.5 memungkinkan Anda menulis kode asinkron yang terlihat sangat mirip kode sinkron, dan membiarkan pengompilasi menangani komplikasi fungsi panggilan balik atau kode kelanjutan.
Catatan
RegisterAsyncTask dan PageAsyncTask sudah tersedia sejak .NET 2.0. Kata kunci yang ditunggu baru dari model pemrograman asinkron .NET 4.5 dan dapat digunakan bersama dengan metode TaskAsync baru dari objek .NET WebClient.
Tambahkan kode untuk menampilkan utas tempat kode dimulai dan selesai dijalankan. Untuk melakukan ini, perbarui metode UpdateProductImage dengan kode berikut.
(Cuplikan Kode - Web Forms Lab - Ex03 - Tampilkan utas)
private void UpdateProductImage(Product product) { string imageUrl = product.ImagePath; if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl)) { product.ImagePath = string.Format( "/Images/{0}{1}", product.ProductId, Path.GetExtension(imageUrl)); this.RegisterAsyncTask(new PageAsyncTask(async (t) => { var startThread = Thread.CurrentThread.ManagedThreadId; using (var wc = new WebClient()) { await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath)); } var endThread = Thread.CurrentThread.ManagedThreadId; this.threadsMessageLabel.Text = string.Format("Started on thread: {0}<br /> Finished on thread: {1}", startThread, endThread); })); } }Buka file Web.config situs web. Tambahkan variabel appSetting berikut.
<add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/>Tekan F5 untuk menjalankan aplikasi dan mengunggah gambar untuk produk. Perhatikan ID utas tempat kode dimulai dan selesai mungkin berbeda. Ini karena tugas asinkron berjalan pada utas terpisah dari kumpulan utas ASP.NET. Ketika tugas selesai, ASP.NET menempatkan tugas kembali dalam antrean dan menetapkan salah satu utas yang tersedia.
Mengunduh gambar secara asinkron
Catatan
Selain itu, Anda dapat menyebarkan aplikasi ini ke Azure setelah Lampiran B: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy.
Ringkasan
Di lab langsung ini, konsep berikut telah ditangani dan ditunjukkan:
- Gunakan ekspresi pengikatan data yang sangat ditik
- Menggunakan fitur pengikatan model baru di Formulir Web
- Menggunakan penyedia nilai untuk memetakan data halaman ke metode code-behind
- Menggunakan Anotasi Data untuk validasi input pengguna
- Manfaatkan validasi sisi klien yang tidak mengganggu dengan jQuery di Formulir Web
- Menerapkan validasi permintaan terperinci
- Menerapkan pemrosesan halaman asinkron dalam Formulir Web
Lampiran A: Menginstal Visual Studio Express 2012 untuk Web
Anda dapat menginstal Microsoft Visual Studio Express 2012 untuk Web atau versi "Ekspres" lainnya menggunakan Microsoft Web Platform Installer. Instruksi berikut memandu Anda melalui langkah-langkah yang diperlukan untuk menginstal Visual studio Express 2012 untuk Web menggunakan Microsoft Web Platform Installer.
Buka [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Atau, jika Anda sudah menginstal Penginstal Platform Web, Anda dapat membukanya dan mencari produk "Visual Studio Express 2012 untuk Web dengan Azure SDK".
Klik Instal Sekarang. Jika Anda tidak memiliki Penginstal Platform Web, Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.
Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.
Menginstal Visual Studio Express
Baca semua lisensi dan ketentuan produk dan klik Saya Terima untuk melanjutkan.
Menerima persyaratan lisensi
Tunggu hingga proses pengunduhan dan penginstalan selesai.
Kemajuan penginstalan
Setelah penginstalan selesai, klik Selesai.
Penginstalan selesai
Klik Keluar untuk menutup Penginstal Platform Web.
Untuk membuka Visual Studio Express for Web, buka layar Mulai dan mulai menulis "VS Express", lalu klik petak VS Express untuk Web .
Vs Express untuk petak web
Lampiran B: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy
Lampiran ini akan menunjukkan kepada Anda cara membuat situs web baru dari Portal Microsoft Azure dan menerbitkan aplikasi yang Anda peroleh dengan mengikuti lab, memanfaatkan fitur penerbitan Web Deploy yang disediakan oleh Azure.
Tugas 1 - Membuat Situs Web Baru dari Portal Microsoft Azure
Buka Portal Manajemen Azure dan masuk menggunakan kredensial Microsoft yang terkait dengan langganan Anda.
Catatan
Dengan Azure, Anda dapat menghosting 10 ASP.NET Web Sites secara gratis lalu menskalakan seiring pertumbuhan lalu lintas Anda. Anda dapat mendaftar di sini.
Masuk ke Portal
Klik Baru pada bilah perintah.
Membuat Situs Web baru
Klik Situs Web Komputasi. | Lalu pilih opsi Buat Cepat. Sediakan URL yang tersedia untuk situs web baru dan klik Buat Situs Web.
Catatan
Azure adalah host untuk aplikasi web yang berjalan di cloud yang dapat Anda kontrol dan kelola. Opsi Buat Cepat memungkinkan Anda menyebarkan aplikasi web yang telah selesai ke Azure dari luar portal. Ini tidak termasuk langkah-langkah untuk menyiapkan database.
Membuat Situs Web baru menggunakan Buat Cepat
Tunggu hingga Situs Web baru dibuat.
Setelah Situs Web dibuat, klik tautan di bawah kolom URL . Periksa apakah Situs Web baru berfungsi.
Menelusuri ke situs web baru
Situs web berjalan
Kembali ke portal dan klik nama situs web di bawah kolom Nama untuk menampilkan halaman manajemen.
Membuka halaman manajemen Situs Web
Di halaman Dasbor , di bawah bagian sekilas , klik tautan Unduh profil terbitkan.
Catatan
Profil penerbitan berisi semua informasi yang diperlukan untuk menerbitkan aplikasi web ke Azure untuk setiap metode publikasi yang diaktifkan. Profil penerbitan berisi URL, kredensial pengguna, dan string database yang diperlukan untuk menyambungkan dan mengautentikasi terhadap setiap titik akhir tempat metode publikasi diaktifkan. Dukungan Microsoft WebMatrix 2, Microsoft Visual Studio Express untuk Web dan Microsoft Visual Studio 2012 membaca profil penerbitan untuk mengotomatiskan konfigurasi program ini untuk menerbitkan aplikasi web ke Azure.
Mengunduh profil penerbitan Situs Web
Unduh file profil publikasi ke lokasi yang diketahui. Selanjutnya dalam latihan ini Anda akan melihat cara menggunakan file ini untuk menerbitkan aplikasi web ke Azure dari Visual Studio.
Menyimpan file profil publikasi
Tugas 2 - Mengonfigurasi Server Database
Jika aplikasi Anda menggunakan database SQL Server, Anda harus membuat server SQL Database. Jika Anda ingin menyebarkan aplikasi sederhana yang tidak menggunakan SQL Server, Anda mungkin melewati tugas ini.
Anda akan memerlukan server SQL Database untuk menyimpan database aplikasi. Anda dapat melihat server SQL Database dari langganan Anda di portal Manajemen Azure di Dasbor | | Server Server Sql Database. Jika Anda tidak memiliki server yang dibuat, Anda dapat membuatnya menggunakan tombol Tambahkan pada bilah perintah. Perhatikan nama server dan URL, nama masuk administrator dan kata sandi, karena Anda akan menggunakannya dalam tugas berikutnya. Jangan membuat database, karena akan dibuat di tahap selanjutnya.
Dasbor SQL Database Server
Dalam tugas berikutnya Anda akan menguji koneksi database dari Visual Studio, karena alasan itu Anda perlu menyertakan alamat IP lokal Anda dalam daftar Alamat IP yang Diizinkan di server. Untuk melakukannya, klik Konfigurasikan, pilih alamat IP dari Alamat IP Klien Saat Ini dan tempelkan pada kotak teks Alamat IP Mulai dan Alamat IP Akhir dan klik tombol
.
Menambahkan Alamat IP Klien
Setelah Alamat IP Klien ditambahkan ke daftar alamat IP yang diizinkan, klik Simpan untuk mengonfirmasi perubahan.
Konfirmasi Perubahan
Tugas 3 - Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy
Kembali ke solusi MVC 4 ASP.NET. Di Penjelajah Solusi, klik kanan proyek situs web dan pilih Terbitkan.
Menerbitkan situs web
Impor profil penerbitan yang Anda simpan di tugas pertama.
Mengimpor profil penerbitan
Klik Validasi Koneksi. Setelah Validasi selesai, klik Berikutnya.
Catatan
Validasi selesai setelah Anda melihat tanda centang hijau muncul di samping tombol Validasi Koneksi.
Memvalidasi koneksi
Di halaman Pengaturan , di bawah bagian Database , klik tombol di samping kotak teks koneksi database Anda (yaitu DefaultConnection).
Konfigurasi penyebaran web
Konfigurasikan koneksi database sebagai berikut:
Di nama Server ketik URL server SQL Database Anda menggunakan awalan tcp: .
Di Nama pengguna ketik nama masuk administrator server Anda.
Di Kata Sandi ketik kata sandi masuk administrator server Anda.
Ketik nama database baru.
Mengonfigurasi string koneksi tujuan
Lalu klik OK. Ketika diminta untuk membuat database, klik Ya.
Membuat database
string koneksi yang akan Anda gunakan untuk menyambungkan ke SQL Database di Azure ditampilkan dalam kotak teks Koneksi Default. Lalu, klik Berikutnya.
String koneksi menunjuk ke SQL Database
Di halaman Pratinjau , klik Terbitkan.
Menerbitkan aplikasi web
Setelah proses penerbitan selesai, browser default Anda akan membuka situs web yang diterbitkan.
Lampiran C: Menggunakan Cuplikan Kode
Dengan cuplikan kode, Anda memiliki semua kode yang Anda butuhkan di ujung jari Anda. Dokumen lab akan memberi tahu Anda kapan tepatnya Anda dapat menggunakannya, seperti yang ditunjukkan pada gambar berikut.
Menggunakan cuplikan kode Visual Studio untuk menyisipkan kode ke dalam proyek Anda
Untuk menambahkan cuplikan kode menggunakan keyboard (hanya C#)
- Tempatkan kursor tempat Anda ingin menyisipkan kode.
- Mulai ketik nama cuplikan (tanpa spasi atau tanda hubung).
- Tonton saat IntelliSense menampilkan nama cuplikan yang cocok.
- Pilih cuplikan yang benar (atau terus ketik hingga seluruh nama cuplikan dipilih).
- Tekan tombol Tab dua kali untuk menyisipkan cuplikan di lokasi kursor.
Mulai ketik nama cuplikan
Tekan Tab untuk memilih cuplikan yang disorot
Tekan Tab lagi dan cuplikan akan diperluas
Untuk menambahkan cuplikan kode menggunakan mouse (C#, Visual Basic dan XML) 1. Klik kanan tempat Anda ingin menyisipkan cuplikan kode.
- Pilih Sisipkan Cuplikan diikuti dengan Cuplikan Kode Saya.
- Pilih cuplikan yang relevan dari daftar, dengan mengkliknya.
Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan
Pilih cuplikan yang relevan dari daftar, dengan mengkliknya