ASP.NET Dengan Template Baru

Dalam latihan ini, Anda akan menjelajahi ASP.NET 4  proyek template baru yang disediakan dalam Visual Studio 2010. ASP.NET 4 memperkenalkan tiga template baru, satu untuk sebuah project Empty Web application, dan masing-masing untuk Web Application dan project Web Site.Empty Web application adalah stripped-down Web Application project, sangat mirip dengan versi sebelumnya, termasuk file web.config yang minimal.Template baru lainnya mengandung perubahan besar, misalnya:

• Basic Membership Functionality : Sebagian besar situs web atau aplikasi membutuhkan beberapa jenis keamanan dan otentikasi. Template baru memiliki implementasi sederhana dari sebuah modul keamanan yang memungkinkan Anda dengan cepat memulai dalam mengamankan akses ke aplikasi baru.
• Default Master Page : Sering, master halaman yang digunakan untuk mendefinisikan render umum di sebuah aplikasi web, seperti header, menu, status login, dll template baru termasuk halaman master yang digunakan oleh halaman default.
• Default CSS file: UI dapat dengan mudah diubah jika situs ini dibangun menggunakan CSS. Semua komponen UI yang membentuk proyek yang diciptakan oleh template baru memanfaatkan Cascading style sheet definisi disediakan file, Site.css bernama. Selain itu, ASP.NET Web Forms 4 meliputi perbaikan pada dukungan CSS dalam controlRenderingCompatibilityVersion atribut halaman web.config yang menunjukkan tingkat kompatibilitas ke belakang.
• Minified Web.config : Dengan Kerangka Microsoft.NET 4, semua konfigurasi yang dibutuhkan untuk setiap modul yang tidak aplikasi-spesifik, dapat disimpulkan dari file machine.config terletak di dalam direktori Framework.NET. Hal ini membantu memiliki Web.config sederhana yang hanya mencakup data yang adalah aplikasi-spesifik, menghindari duplikasi pengaturan kebutuhan dan dengan demikian memiliki file konfigurasi yang lebih sederhana dan konsumsi.
• jQuery Integration : jQuery adalah perpustakaan open source yang sangat populer JavaScript library yang disertakan dengan kedua Formulir Web ASP.NET dan ASP.NET MVC. Microsoft Ajax Library dirancang untuk menarik pengembang jQuery. Anda dapat mencampur jQuery plug-in dan Microsoft klien Ajax kontrol mulus dalam aplikasi Ajax yang sama.

Pada latihan ini, Anda akan membuat aplikasi web menggunakan ASP.NET 4 WebForms template yang baru, mengeksplorasi proyek yang dibuat untuk mengidentifikasi unsur-unsur yang disebutkan di atas, dan menerapkan contoh sederhana menggunakan jQuery.Tugas 1 - Membuat Aplikasi Web baruDalam tugas ini, Anda akan membuat Aplikasi Web baru menggunakan template proyek yang diberikan dengan ASP.NET 4 Web Forms. 

1.  Buka Microsoft Visual Studio 2010. Klik Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2.  Dari menu File, pilih New | Project.
3.  Dalam dialog New Project, pilih template yang ASP.NET Web Application, terletak di bawah Web template. 
4.  Tipe NewWebApplicationTemplate sebagai Nama dan mengatur lokasi untuk Ex01-NewTemplates \ Begin \ (Memilih folder yang sesuai dengan bahasa pilihan Anda) di dalam folder Sumber ini. Pastikan bahwa Buat direktori untuk solusi tersebut akan diperiksa, dan klik OK untuk membuat proyek.

 Gambar 1
Membuat Aplikasi Web menggunakan template baru (C #)

Gambar 2
Membuat Aplikasi Web menggunakan template baru (VB)

5.  Solusi anda akan terlihat seperti berikut :

 

Gambar 3
Aplikasi web dibuat menggunakan Template Proyek yang baru (C #)

 

 Gambar 4
Aplikasi web dibuat menggunakan Template Proyek yang baru (VB)

Anda dapat dengan mudah mengidentifikasi fitur-fitur baru disebutkan dalam pendahuluan dengan memeriksa struktur proyek:

Catatan :

• Basic Membership Functionality : Semua fungsi keamanan telah diterapkan di dalam folder Rekening proyek.
• Default Master Page : Halaman utama disediakan disebut Site.Master dapat ditemukan pada bagian Aplikasi Web.
• Default CSS file : Sebuah gaya folder dengan di dalam file Site.css secara otomatis dibuat oleh template. Ini adalah di mana gaya untuk seluruh situs didefinisikan.
• Minified Web.config : Membuka file web.config di bagian dari Aplikasi Web akan menampilkan file konfigurasi benar-benar sederhana dan bersih.
• jQuery Integration : jQuery JavaScript file-file library yang terletak di dalam folder Script baru.

Anda akan melihat bahwa ada 3 file .Js di dalam folder Script. Semua dari mereka adalah versi yang berbeda dari jQuery:

• jquery-1.4.1-vsdoc.js : File ini memiliki komentar inline untuk dukungan IntelliSense Visual Studio. Anda tidak harus menggunakannya di situs web Anda; memang ditujukan untuk penggunaan di waktu desain oleh Visual Studio. 
• jquery-1.4.1.js : File ini adalah library jQuery itu sendiri. Anda akan menggunakannya saat mengembangkan aplikasi Anda. 
• jquery-1.4.1.min.js : File ini adalah versi minified dari jquery-1.3.2.js. Tidak perlu ruang kosong-telah dihapus dan nama variabel yang runtuh dari yang sebelumnya. File ini dioptimalkan untuk bandwidth yang digunakan pada produksi penyelamatan lingkungan pengguna.

Tugas 2 - Menjelajahi Out-of-the-Box Otentikasi Mekanisme

Anda sudah menyadari bahwa baru ASP.NET Web Forms 4 template menyediakan fungsionalitas keanggotaan dasar untuk mengamankan aplikasi web Anda, dalam tugas ini, Anda akan menjelajahi pelaksanaan, mengidentifikasi elemen kunci itu.

1.  Dalam Solution Explorer, buka folder account. Anda akan melihat 4 halaman dan file web.config di dalamnya.

 Gambar 5
Folder di dalam Proyek Template baru (C #)

 

Gambar 6
Folder di dalam Proyek Template baru (VB)

 Catatan :

file web.config terletak di dalam folder memungkinkan pengguna yang tidak berkepentingan untuk mengakses halaman Register.aspx. Akses ke halaman lain dibatasi untuk pengguna otentik saja.
Perizinan untuk halaman Login.aspx tidak diperlukan karena didefinisikan sebagai Formulir Otentikasi halaman login sehingga secara otomatis dapat diakses oleh setiap pengguna (otentik atau tidak).

2.  Dalam Solution Explorer, klik ganda pada file Login.aspx. Ini adalah login default halaman yang berisi kontrol Login dengan layout template kustom. 

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2> Log In </h2>
<p>
Please enter your username and password.
<asp:HyperLink ID="RegisterHyperLink" runat="server" EnableViewState="false">Register</asp:HyperLink> if you don't have an account.
</p>
<asp:Login ID="LoginUser" runat="server" EnableViewState="false" RenderOuterTable="false">
<LayoutTemplate>
...
</LayoutTemplate>
</asp:Login>
</asp:Content>

3.  Buka file Site.Master, yang terletak di tingkat bagian proyek NewWebApplicationTemplate, dan menemukan kontrol LoginView.

Catatan : 

• Kontrol LoginView digunakan untuk menunjukkan status login, dan memberikan link untuk login / logout. Menambahkan kontrol ini untuk Master Page menyiratkan itu akan diberikan di semua halaman web di seluruh aplikasi web yang memiliki halaman master ini ditetapkan.
• Kontrol adalah dikonfigurasi untuk menampilkan nama login pengguna, atau link ke halaman login ketika seorang pengguna anonim mengakses situs ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1></div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div></div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div></div>
<div class="footer">
</div></form></body>
</html>

Catatan :

• Halaman Register.aspx dan ChangePassword.aspx juga diimplementasikan menggunakan ASP.NET Kontrol Login. 
• Register.aspx menggunakan kontrol CreateUserWizard untuk memandu pengguna melalui proses pendaftaran, sementara ChangePassword.aspx menggunakan kontrol ChangePassword.

Semua kontrol Login dikonfigurasi untuk menggunakan Formulir Otentikasi dengan Keanggotaan Peran SQL, dan penyedia Profil. Konfigurasi ini dapat ditemukan di Web.config terletak di direktori bagian dari aplikasi Anda.
4.  Dalam Solution Explorer, klik ganda pada Web.config terletak di direktori root aplikasi Anda untuk membukanya.
5.  Cari elemen <authentication> terletak di dalam bagian konfigurasi <system.web>. Bagian ini mengkonfigurasikan bentuk otentikasi login sebagai dijelaskan di atas.

<membership>
<providers>
<clear/>
<add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
applicationName="/" />
</providers>
</membership>
<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
</providers>
</profile>
<roleManager enabled="false">
<providers>
<clear/>
<add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
<add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
</providers>
</roleManager>

Tugas 3 - Menjelajahi Web.config minified

1. Dalam Framework Microsoft NET. 4, elemen konfigurasi utama telah dipindahkan ke file machine.config, dan aplikasi sekarang mewarisi pengaturan ini. Hal ini memungkinkan file web.config di ASP.NET 4 aplikasi baik untuk menjadi kosong atau mengandung hanya beberapa baris. 
2. ASP.NET Web Forms 4 template baru mengambil keuntungan dari fitur baru ini dengan menghapus konfigurasi berlebihan dari file konfigurasi. File web.config kemudian mewarisi konfigurasi umum, seperti AJAX, routing, dan integrasi dengan IIS 7, dari file machine.config secara default. 
3. Dalam tugas ini, Anda akan menjelajahi default file web.config yang mendeteksi unsur-unsur yang diperlukan. 
4. Dalam Solution Explorer, klik ganda di file web.config, yang terletak di direktori bagian proyek NewWebApplicationTemplate Anda untuk membukanya.

Anda akan melihat bahwa itu adalah versi pendek dari sebelumnya ASP.NET 's file web.config. Dalam aplikasi Web Formulir Kosong, satu-satunya elemen yang diperlukan dalam file web.config adalah elemen kompilasi terletak di bagian konfigurasi <system.web>. Elemen ini menunjukkan kepada compiler versi aplikasi kerangka yang ditargetkan.

<!-- ... -->
<system.web>
<compilation debug="true" targetFramework="4.0" />
<!-- ... -->
</system.web>
</configuration>

Tugas 4 - Menggunakan Out-of-the-Box Script jQuery

Seperti telah dijelaskan, jQuery adalah library JavaScript yang sangat populer yang menyediakan pengembang dengan kerangka untuk berinteraksi dengan komponen UI yang diberikan dalam halaman web. Template baru termasuk perpustakaan ini out-of-the-box.

Dalam tugas ini, Anda akan mendapatkan keuntungan dari jQuery untuk mengubah warna dari judul halaman web.

1.  Dalam Solution Explorer, klik ganda pada file Default.aspx untuk membukanya.

 Gambar 7
Membuka file Default.aspx dalam Aplikasi Web (C #)

 

 Gambar 8
Membuka file Default.aspx dalam Aplikasi Web (VB)

2.  Dalam konten MainContent, tambahkan sebuah tombol yang akan bertanggung jawab untuk mengubah warna judul "Selamat Datang untuk ASP.NET". Untuk melakukan hal ini, paste kode berikut di tebal bawah markup halaman.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2><p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p><p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<input type="button" id="btnChangeTitleStyle" value="Change Title Style" /> </asp:Content>

3.  Untuk menggunakan jQuery, Anda harus menambahkan referensi ke Perpustakaan jQuery. Untuk melakukan hal ini, tambahkan elemen script berikut, yang referensi sumber file jQuery, di dalam tag HeaderContent Konten.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</asp:Content>

4.  Di dalam elemen HeaderContent, tambahkan implementasi JavaScript untuk mengubah warna judul. Untuk melakukan hal ini, paste kode berikut JavaScript bawah tebal referensi jQuery.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnChangeTitleStyle").click(function () {
$("h2").css("color", "red");
});
});
</script>
</asp:Content>

Catatan :

Pelaksanaan di atas adalah sepenuhnya dilaksanakan menggunakan jQuery, di bawah ini Anda dapat menemukan penjelasan singkat tentang apa kode sebelumnya tidak : Ketika dokumen dimuat, fungsi anonim terdaftar yang pada gilirannya fungsi register acara klik untuk tombol btnChangeTitleStyle. Ketika tombol diklik, fungsi penyeleksi menggunakan jQuery untuk mengatur properti warna pada semua elemen h2 menjadi merah. Anda dapat memeriksa situs web resmi jQuery di mana Anda dapat menemukan banyak tutorial untuk memulai dengan itu. Selengkapnya...