Aplikasi Halaman Tunggal: Templat KnockoutJS

2023-07-13

Templat MVC Knockout adalah bagian dari ASP.NET dan Web Tools 2012.2

Unduh ASP.NET dan Web Tools 2012.2

Pembaruan ASP.NET dan Web Tools 2012.2 menyertakan templat Single-Page Application (SPA) untuk ASP.NET MVC 4. Templat ini dirancang untuk membuat Anda mulai dengan cepat membangun aplikasi web sisi klien interaktif.

"Aplikasi halaman tunggal" (SPA) adalah istilah umum untuk aplikasi web yang memuat satu halaman HTML lalu memperbarui halaman secara dinamis, alih-alih memuat halaman baru. Setelah halaman awal dimuat, SPA berbicara dengan server melalui permintaan AJAX.

Diagram yang memperlihatkan dua kotak berlabel Klien dan Server. Panah berlabel AJAX berubah dari Klien ke Server. Panah berlabel H T M L dan panah berlabel J SON berubah dari Server ke Klien.

AJAX bukan hal baru, tetapi saat ini ada kerangka kerja JavaScript yang memudahkan untuk membangun dan memelihara aplikasi SPA canggih yang besar. Selain itu, HTML 5 dan CSS3 memudahkan untuk membuat UI yang kaya.

Untuk memulai, templat SPA membuat contoh aplikasi "Daftar tugas". Dalam tutorial ini, kita akan mengikuti tur templat berpemandu. Pertama kita akan melihat aplikasi daftar Tugas itu sendiri, lalu memeriksa bagian teknologi yang membuatnya berfungsi.

Membuat Proyek Templat SPA Baru

Persyaratan:

Visual Studio 2012 atau Visual Studio Express 2012 untuk Web
ASP.NET Web Tools 2012.2 memperbarui. Anda dapat menginstal pembaruan di sini.

Mulai Visual Studio dan pilih Proyek Baru dari halaman Mulai. Atau, dari menu File , pilih Baru lalu Proyek.

Di panel Templat , pilih Templat terinstal dan perluas simpul Visual C# . Di bawah Visual C#, pilih Web. Dalam daftar templat proyek, pilih ASP.NET Aplikasi Web MVC 4. Beri nama proyek dan klik OK.

Cuplikan layar yang memperlihatkan kotak dialog Proyek Baru. Aplikasi Web S P dot NET M V C 4 dipilih dari daftar Templat Web.

Di wizard Proyek Baru , pilih Aplikasi Halaman Tunggal.

Cuplikan layar yang memperlihatkan kotak dialog Proyek New A S P dot NET M V C 4. Templat Aplikasi Halaman Tunggal dipilih.

Tekan F5 untuk membangun dan menjalankan aplikasi. Ketika aplikasi pertama kali berjalan, aplikasi akan menampilkan layar masuk.

Cuplikan layar yang memperlihatkan layar masuk Daftar Tugas Saya.

Klik tautan "Daftar" dan buat pengguna baru.

Cuplikan layar yang memperlihatkan layar Daftar.

Setelah Anda masuk, aplikasi membuat daftar Todo default dengan dua item. Anda dapat mengklik "Tambahkan daftar Todo" untuk menambahkan daftar baru.

Cuplikan layar yang memperlihatkan dua Daftar Tugas dan tombol Tambahkan Daftar Tugas di bagian atas.

Ganti nama daftar, tambahkan item ke daftar, dan centang. Anda juga dapat menghapus item atau menghapus seluruh daftar. Perubahan secara otomatis bertahan pada database di server (sebenarnya LocalDB pada saat ini, karena Anda menjalankan aplikasi secara lokal).

Cuplikan layar yang memperlihatkan daftar dengan tiga item. Item terakhir diperiksa dan memiliki teguran melaluinya.

Arsitektur Templat SPA

Diagram ini menunjukkan blok penyusun utama untuk aplikasi.

Diagram yang memperlihatkan blok penyusun terpisah dari Klien dan Server. Knockout dot j s, H T M L, dan J SON berada di bawah Klien. S P dot NET M V C, A S P dot NET Web A P I, Entity Framework, dan Database berada di bawah Server.

Di sisi server, ASP.NET MVC melayani HTML dan juga menangani autentikasi berbasis formulir.

ASP.NET Web API menangani semua permintaan yang terkait dengan ToDoLists dan ToDoItems, termasuk mendapatkan, membuat, memperbarui, dan menghapus. Klien bertukar data dengan Api Web dalam format JSON.

Entity Framework (EF) adalah lapisan O/RM. Ini menengahi antara dunia ASP.NET berorientasi objek dan database yang mendasar. Database menggunakan LocalDB tetapi Anda bisa mengubah ini dalam file Web.config. Biasanya Anda akan menggunakan LocalDB untuk pengembangan lokal dan kemudian menyebarkan ke database SQL di server, menggunakan migrasi kode-pertama EF.

Di sisi klien, pustaka Knockout.js menangani pembaruan halaman dari permintaan AJAX. Knockout menggunakan pengikatan data untuk menyinkronkan halaman dengan data terbaru. Dengan demikian, Anda tidak perlu menulis kode apa pun yang berjalan melalui data JSON dan memperbarui DOM. Sebagai gantinya, Anda menempatkan atribut deklaratif dalam HTML yang memberi tahu Knockout cara menyajikan data.

Keuntungan besar dari arsitektur ini adalah memisahkan lapisan presentasi dari logika aplikasi. Anda dapat membuat bagian API Web tanpa mengetahui apa pun tentang tampilan halaman web Anda. Di sisi klien, Anda membuat "model tampilan" untuk mewakili data tersebut, dan model tampilan menggunakan Knockout untuk mengikat HTML. Itu memungkinkan Anda dengan mudah mengubah HTML tanpa mengubah model tampilan. (Kita akan melihat Knockout sedikit kemudian.)

Model

Dalam proyek Visual Studio, folder Model berisi model yang digunakan di sisi server. (Ada juga model di sisi klien; kita akan mendapatkannya.)

Cuplikan layar yang memperlihatkan folder Model terbuka.

TodoItem, TodoList

Ini adalah model database untuk Kode Kerangka Kerja Entitas Terlebih Dahulu. Perhatikan bahwa model ini memiliki properti yang saling menunjuk satu sama lain. ToDoList berisi kumpulan ToDoItems, dan masing-masing ToDoItem memiliki referensi kembali ke ToDoList induknya. Properti ini disebut properti navigasi, dan mewakili relasi satu-ke-banyak daftar tugas dan item yang harus dilakukan.

Kelas ini ToDoItem juga menggunakan atribut [ForeignKey] untuk menentukan bahwa ToDoListId itu adalah kunci asing ke ToDoList dalam tabel. Ini memberi tahu EF untuk menambahkan batasan kunci asing ke database.

[ForeignKey("TodoList")]
public int TodoListId { get; set; }
public virtual TodoList TodoList { get; set; }

TodoItemDto, TodoListDto

Kelas-kelas ini menentukan data yang akan dikirim ke klien. "DTO" adalah singkatan dari "objek transfer data." DTO mendefinisikan bagaimana entitas akan diserialisasikan ke dalam JSON. Secara umum, ada beberapa alasan untuk menggunakan DTO:

Untuk mengontrol properti mana yang diserialisasikan. DTO dapat berisi subset properti dari model domain. Anda mungkin melakukan ini karena alasan keamanan (untuk menyembunyikan data sensitif) atau hanya untuk mengurangi jumlah data yang Anda kirim.
Untuk mengubah bentuk data – misalnya untuk meratakan struktur data yang lebih kompleks.
Untuk menjaga logika bisnis apa pun dari DTO (pemisahan kekhawatiran).
Jika model domain Anda tidak dapat diserialisasikan karena alasan tertentu. Misalnya, referensi melingkar dapat menyebabkan masalah saat Anda membuat serial objek Ada cara untuk menangani masalah ini di API Web (lihat Menangani Referensi Objek Melingkar); tetapi menggunakan DTO hanya menghindari masalah sama sekali.

Dalam templat SPA, DTO berisi data yang sama dengan model domain. Namun, referensi tersebut masih berguna karena menghindari referensi melingkar dari properti navigasi, dan menunjukkan pola DTO umum.

AccountModels.cs

File ini berisi model untuk keanggotaan situs. Kelas UserProfile menentukan skema untuk profil pengguna dalam DB keanggotaan. (Dalam hal ini, satu-satunya informasi adalah ID pengguna dan nama pengguna.) Kelas model lain dalam file ini digunakan untuk membuat formulir pendaftaran dan login pengguna.

Entity Framework

Templat SPA menggunakan EF Code First. Dalam pengembangan Code First, Anda menentukan model terlebih dahulu dalam kode, lalu EF menggunakan model untuk membuat database. Anda juga dapat menggunakan EF dengan database yang sudah ada (Database First).

Kelas TodoItemContext di folder Model berasal dari DbContext. Kelas ini menyediakan "lem" antara model dan EF. memegang TodoItemContextToDoItem koleksi dan TodoList koleksi. Untuk mengkueri database, Anda cukup menulis kueri LINQ terhadap koleksi ini. Misalnya, berikut adalah bagaimana Anda dapat memilih semua daftar tugas untuk pengguna "Alice":

TodoItemContext db = new TodoItemContext();
IEnumerable<TodoList> lists = 
    from td in db.TodoLists where td.UserId == "Alice" select td;

Anda juga bisa menambahkan item baru ke koleksi, memperbarui item, atau menghapus item dari koleksi, dan mempertahankan perubahan pada database.

ASP.NET Web API Controllers

Di ASP.NET Web API, pengontrol adalah objek yang menangani permintaan HTTP. Seperti disebutkan, templat SPA menggunakan Api Web untuk mengaktifkan operasi CRUD pada ToDoList instans dan ToDoItem . Pengontrol terletak di folder Pengontrol solusi.

Cuplikan layar yang memperlihatkan folder Pengontrol terbuka. Untuk melakukan Pengontrol dot c s dan Untuk melakukan List Controller dot c s keduanya dilingkari dengan warna merah.

TodoController: Menangani permintaan HTTP untuk item yang harus dilakukan
TodoListController: Menangani permintaan HTTP untuk daftar tugas.

Nama-nama ini signifikan, karena Api Web cocok dengan jalur URI dengan nama pengontrol. (Untuk mempelajari cara Web API merutekan permintaan HTTP ke pengontrol, lihat Perutean di ASP.NET Web API.)

Mari kita lihat kelasnya ToDoListController . Ini berisi satu anggota data:

private TodoItemContext db = new TodoItemContext();

TodoItemContext digunakan untuk berkomunikasi dengan EF, seperti yang dijelaskan sebelumnya. Metode pada pengontrol mengimplementasikan operasi CRUD. API Web memetakan permintaan HTTP dari klien ke metode pengontrol, sebagai berikut:

Permintaan HTTP	Metode Pengontrol	Deskripsi
GET /api/todo	`GetTodoLists`	Mendapatkan kumpulan daftar tugas.
GET /api/todo/id	`GetTodoList`	Mendapatkan daftar tugas berdasarkan ID
PUT /api/todo/id	`PutTodoList`	Updates daftar tugas.
POST /api/todo	`PostTodoList`	Membuat daftar tugas baru.
DELETE /api/todo/id	`DeleteTodoList`	Menghapus daftar TODO.

Perhatikan bahwa URI untuk beberapa operasi berisi tempat penampung untuk nilai ID. Misalnya, untuk menghapus ke daftar dengan ID 42, URI adalah /api/todo/42.

Untuk mempelajari selengkapnya tentang menggunakan API Web untuk operasi CRUD, lihat Membuat API Web yang Mendukung Operasi CRUD. Kode untuk pengontrol ini cukup mudah. Berikut adalah beberapa poin menarik:

Metode ini GetTodoLists menggunakan kueri LINQ untuk memfilter hasil menurut ID pengguna yang masuk. Dengan begitu, pengguna hanya melihat data miliknya. Selain itu, perhatikan bahwa pernyataan Pilih digunakan untuk mengonversi ToDoList instans menjadi TodoListDto instans.
Metode PUT dan POST memeriksa status model sebelum memodifikasi database. Jika ModelState.IsValid salah, metode ini mengembalikan HTTP 400, Permintaan Buruk. Baca selengkapnya tentang validasi model di Api Web di Validasi Model.
Kelas pengontrol juga dihiasi dengan atribut [Otorisasi ]. Atribut ini memeriksa apakah permintaan HTTP diautentikasi. Jika permintaan tidak diautentikasi, klien menerima HTTP 401, Tidak sah. Baca selengkapnya tentang autentikasi di Autentikasi dan Otorisasi di ASP.NET Web API.

Kelas TodoController ini sangat mirip TodoListControllerdengan . Perbedaan terbesar adalah tidak menentukan metode GET apa pun, karena klien akan mendapatkan item yang harus dilakukan bersama dengan setiap daftar tugas.

Pengontrol dan Tampilan MVC

Pengontrol MVC juga terletak di folder Pengontrol solusi. HomeController merender HTML utama untuk aplikasi. Tampilan untuk pengontrol Beranda ditentukan dalam Views/Home/Index.cshtml. Tampilan Beranda merender konten yang berbeda tergantung pada apakah pengguna masuk:

@if (@User.Identity.IsAuthenticated)
{
    // ....
}

Saat pengguna masuk, mereka melihat UI utama. Jika tidak, mereka akan melihat panel masuk. Perhatikan bahwa penyajian kondisional ini terjadi di sisi server. Jangan pernah mencoba menyembunyikan konten sensitif di sisi klien—apa pun yang Anda kirim dalam respons HTTP terlihat oleh seseorang yang menonton pesan HTTP mentah.

Client-Side JavaScript dan Knockout.js

Sekarang mari kita beralih dari sisi server aplikasi ke klien. Templat SPA menggunakan kombinasi jQuery dan Knockout.js untuk membuat UI interaktif yang lancar. Knockout.js adalah pustaka JavaScript yang memudahkan untuk mengikat HTML ke data. Knockout.js menggunakan pola yang disebut "Model-View-ViewModel."

Modelnya adalah data domain (daftar ToDo dan item ToDo).
Tampilan adalah dokumen HTML.
Model tampilan adalah objek JavaScript yang menyimpan data model. Model tampilan adalah abstraksi kode UI. Ini tidak memiliki pengetahuan tentang representasi HTML. Sebaliknya, ini mewakili fitur abstrak tampilan, seperti "daftar item ToDo".

Tampilan terikat dengan data ke view-model. Updates ke model tampilan secara otomatis tercermin dalam tampilan. Pengikatan juga berfungsi ke arah lain. Peristiwa di DOM (seperti klik) terikat dengan data ke fungsi pada model tampilan, yang memicu panggilan AJAX.

Templat SPA mengatur JavaScript sisi klien menjadi tiga lapisan:

todo.datacontext.js: Mengirim permintaan AJAX.
todo.model.js: Menentukan model.
todo.viewmodel.js: Menentukan model tampilan.

Diagram yang memperlihatkan panah dari knockout dot j s ke Tampilkan Model ke Model ke Konteks Data. Panah antara titik Knockout j s dan Model Tampilan diberi label Pengikatan Data dan menunjuk ke kedua item.

File skrip ini terletak di folder Skrip/aplikasi solusi.

Cuplikan layar yang memperlihatkan aplikasi berlabel subfolder terbuka.

todo.datacontext menangani semua panggilan AJAX ke pengontrol API Web. (Panggilan AJAX untuk masuk ditentukan di tempat lain, di ajaxlogin.js.)

todo.model.js menentukan model sisi klien (browser) untuk daftar tugas. Ada dua kelas model: todoItem dan todoList.

Banyak properti di kelas model berjenis "ko.observable". Dapat diamati adalah bagaimana Knockout melakukan sihirnya. Dari dokumentasi Knockout: Yang dapat diamati adalah "objek JavaScript yang dapat memberi tahu pelanggan tentang perubahan." Ketika nilai yang dapat diamati berubah, Knockout memperbarui elemen HTML apa pun yang terikat dengan yang dapat diamati tersebut. Misalnya, todoItem memiliki pengamatan untuk judul dan properti isDone:

self.title = ko.observable(data.title);
self.isDone = ko.observable(data.isDone);

Anda juga dapat berlangganan ke yang dapat diamati dalam kode. Misalnya, kelas todoItem berlangganan perubahan di properti "isDone" dan "title":

saveChanges = function () {
    return datacontext.saveChangedTodoItem(self);
};

// Auto-save when these properties change
self.isDone.subscribe(saveChanges);
self.title.subscribe(saveChanges);

Lihat Model

Model tampilan didefinisikan dalam todo.viewmodel.js. Model tampilan adalah titik pusat di mana aplikasi mengikat elemen halaman HTML ke data domain. Dalam templat SPA, model tampilan berisi array todoLists yang dapat diamati. Kode berikut dalam model tampilan memberi tahu Knockout untuk menerapkan pengikatan:

ko.applyBindings(window.todoApp.todoListViewModel);

PENGIKATAN HTML dan Data

HTML utama untuk halaman ditentukan dalam Views/Home/Index.cshtml. Karena kita menggunakan pengikatan data, HTML hanyalah templat untuk apa yang sebenarnya dirender. Knockout menggunakan pengikatan deklaratif . Anda mengikat elemen halaman ke data dengan menambahkan atribut "data-bind" ke elemen . Berikut adalah contoh yang sangat sederhana, diambil dari dokumentasi Knockout:

<p>There are <span data-bind="text: myItems().count"></span> items<p>

Dalam contoh ini, Knockout memperbarui konten <elemen rentang> dengan nilai myItems.count(). Setiap kali nilai ini berubah, Knockout memperbarui dokumen.

Knockout menyediakan sejumlah jenis pengikatan yang berbeda. Berikut adalah beberapa pengikatan yang digunakan dalam templat SPA:

foreach: Memungkinkan Anda melakukan iterasi melalui perulangan dan menerapkan markup yang sama ke setiap item dalam daftar. Ini digunakan untuk merender daftar tugas dan item yang harus dilakukan. Dalam foreach, pengikatan diterapkan ke elemen daftar.
terlihat: Digunakan untuk mengalihkan visibilitas. Sembunyikan markup saat koleksi kosong, atau buat pesan kesalahan terlihat.
nilai: Digunakan untuk mengisi nilai formulir.
klik: Mengikat peristiwa klik ke fungsi pada model tampilan.

Perlindungan Anti-CSRF

Pemalsuan Permintaan Lintas Situs (CSRF) adalah serangan di mana situs berbahaya mengirim permintaan ke situs yang rentan tempat pengguna saat ini masuk. Untuk membantu mencegah serangan CSRF, ASP.NET MVC menggunakan token anti-pemalsuan, juga disebut token verifikasi permintaan. Idenya adalah bahwa server menempatkan token yang dihasilkan secara acak ke dalam halaman web. Ketika klien mengirimkan data ke server, klien harus menyertakan nilai ini dalam pesan permintaan.

Token anti-pemalsuan berfungsi karena halaman berbahaya tidak dapat membaca token pengguna, karena kebijakan asal yang sama. (Kebijakan asal yang sama mencegah dokumen yang dihosting di dua situs berbeda untuk mengakses konten satu sama lain.)

ASP.NET MVC menyediakan dukungan bawaan untuk token anti-pemalsuan, melalui kelas AntiForgery dan atribut [ValidateAntiForgeryToken ]. Saat ini, fungsionalitas ini tidak dibangun ke dalam Web API. Namun, templat SPA menyertakan implementasi kustom untuk Web API. Kode ini didefinisikan di ValidateHttpAntiForgeryTokenAttribute kelas , yang terletak di folder Filter solusi. Untuk mempelajari selengkapnya tentang anti-CSRF di API Web, lihat Mencegah Serangan Pemalsuan Permintaan Lintas Situs (CSRF).

Kesimpulan

Templat SPA dirancang untuk membantu Anda mulai menulis aplikasi web modern dan interaktif dengan cepat. Ini menggunakan pustaka Knockout.js untuk memisahkan presentasi (markup HTML) dari data dan logika aplikasi. Tetapi Knockout bukan satu-satunya pustaka JavaScript yang dapat Anda gunakan untuk membuat SPA. Jika Anda ingin menjelajahi beberapa opsi lain, lihat templat SPA yang dibuat komunitas.