Membuat Aplikasi MVC 3 dengan Razor dan JavaScript Tidak Mengganggu

oleh Microsoft

Aplikasi web sampel Daftar Pengguna menunjukkan betapa sederhananya membuat aplikasi MVC 3 ASP.NET menggunakan mesin tampilan Razor. Aplikasi sampel menunjukkan cara menggunakan mesin tampilan Razor baru dengan ASP.NET MVC versi 3 dan Visual Studio 2010 untuk membuat situs web Daftar Pengguna fiktif yang mencakup fungsionalitas seperti membuat, menampilkan, mengedit, dan menghapus pengguna.

Tutorial ini menjelaskan langkah-langkah yang diambil untuk membangun sampel Daftar Pengguna ASP.NET aplikasi MVC 3. Proyek Visual Studio dengan kode sumber C# dan VB tersedia untuk menyertai topik ini: Unduh. Jika Anda memiliki pertanyaan tentang tutorial ini, silakan posting ke forum MVC.

Gambaran Umum

Aplikasi yang akan Anda bangun adalah situs web daftar pengguna sederhana. Pengguna dapat memasukkan, melihat, dan memperbarui informasi pengguna.

Anda dapat mengunduh proyek yang diselesaikan VB dan C# di sini.

Membuat Aplikasi Web

Untuk memulai tutorial, buka Visual Studio 2010 dan buat proyek baru menggunakan templat Aplikasi Web ASP.NET MVC 3 . Beri nama aplikasi "Mvc3Razor".

Dalam dialog Proyek ASP.NET Baru MVC 3 , pilih Aplikasi Internet, pilih mesin tampilan Razor, lalu klik OK.

Dalam tutorial ini Anda tidak akan menggunakan penyedia keanggotaan ASP.NET, sehingga Anda dapat menghapus semua file yang terkait dengan masuk dan keanggotaan. Di Penjelajah Solusi, hapus file dan direktori berikut:

• Controllers\AccountController
• Model\AccountModels
• Views\Shared\_LogOnPartial
• Views\Account (dan semua file dalam direktori ini)

Edit file _Layout.cshtml dan ganti markup di dalam <div> elemen bernama logindisplay dengan pesan "Login Dinonaktifkan". Contoh berikut menunjukkan markup baru:

<div id="logindisplay">
  Login Disabled
</div>

Menambahkan Model

Di Penjelajah Solusi, klik kanan folder Model, pilih Tambahkan, lalu klik Kelas.

Beri nama kelas UserModel. Ganti konten file UserModel dengan kode berikut:

using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace Mvc3Razor.Models {
    public class UserModel {

        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Display(Name = "User Name")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
        [ScaffoldColumn(false)]
        public string UserName { get; set; }

        [Required]
        [StringLength(8, MinimumLength = 3)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Required]
        [StringLength(9, MinimumLength = 2)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
        [Required()]
        public string City { get; set; }

    }

    public class Users {

        public Users() {
            _usrList.Add(new UserModel
            {
                UserName = "BenM",
                FirstName = "Ben",
                LastName = "Miller",
                City = "Seattle"
            });
            _usrList.Add(new UserModel
            {
                UserName = "AnnB",
                FirstName = "Ann",
                LastName = "Beebe",
                City = "Boston"
            });
        }

        public List<UserModel> _usrList = new List<UserModel>();

        public void Update(UserModel umToUpdate) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    _usrList.Remove(um);
                    _usrList.Add(umToUpdate);
                    break;
                }
            }
        }

        public void Create(UserModel umToUpdate) {
            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
                }
            }
            _usrList.Add(umToUpdate);
        }

        public void Remove(string usrName) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == usrName) {
                    _usrList.Remove(um);
                    break;
                }
            }
        }

        public  UserModel GetUser(string uid) {
            UserModel usrMdl = null;

            foreach (UserModel um in _usrList)
                if (um.UserName == uid)
                    usrMdl = um;

            return usrMdl;
        }

    }    
}

Kelas UserModel mewakili pengguna. Setiap anggota kelas diannotasikan dengan atribut Wajib dari namespace DataAnnotations . Atribut di namespace DataAnnotations menyediakan validasi sisi klien dan server otomatis untuk aplikasi web.

HomeController Buka kelas dan tambahkan using arahan sehingga Anda dapat mengakses UserModel kelas dan Users :

using Mvc3Razor.Models;

Tepat setelah HomeController deklarasi, tambahkan komentar berikut dan referensi ke Users kelas:

public class HomeController : Controller {

// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();

Kelas Users ini adalah penyimpanan data dalam memori yang disederhanakan yang akan Anda gunakan dalam tutorial ini. Dalam aplikasi nyata, Anda akan menggunakan database untuk menyimpan informasi pengguna. Beberapa baris HomeController pertama file diperlihatkan dalam contoh berikut:

using System.Web.Mvc;
using Mvc3Razor.Models;

namespace Mvc3Razor.Controllers {
       
    public class HomeController : Controller {

        // The __usrs class is replacement for a real data access strategy.
        private static Users _usrs = new Users();

Bangun aplikasi sehingga model pengguna akan tersedia untuk wizard perancah di langkah berikutnya.

Membuat Tampilan Default

Langkah selanjutnya adalah menambahkan metode tindakan dan tampilan untuk menampilkan pengguna.

Hapus file Views\Home\Index yang ada. Anda akan membuat file Indeks baru untuk menampilkan pengguna.

HomeController Di kelas , ganti konten Index metode dengan kode berikut:

return View(_usrs._usrList);

Klik kanan di Index dalam metode lalu klik Tambahkan Tampilan.

Pilih opsi Buat tampilan yang ditik dengan kuat . Untuk Lihat kelas data, pilih Mvc3Razor.Models.UserModel. (Jika Anda tidak melihat Mvc3Razor.Models.UserModel di kotak Lihat kelas data , Anda perlu membangun proyek.) Pastikan bahwa mesin tampilan diatur ke Razor. Atur Tampilkan konten ke Daftar lalu klik Tambahkan.

Tampilan baru secara otomatis membuat perancah data pengguna yang diteruskan ke Index tampilan. Periksa file Views\Home\Index yang baru dibuat. Tautan Buat Baru, Edit, Detail, dan Hapus tidak berfungsi, tetapi halaman lainnya berfungsi. Jalankan halaman. Anda melihat daftar pengguna.

Buka file Index.cshtml dan ganti ActionLink markup untuk Edit, Detail, dan Hapus dengan kode berikut:

@Html.ActionLink("Edit", "Edit", new {  id=item.UserName  }) |
@Html.ActionLink("Details", "Details", new {  id=item.UserName  }) |
@Html.ActionLink("Delete", "Delete", new {  id=item.UserName  })

Nama pengguna digunakan sebagai ID untuk menemukan rekaman yang dipilih di tautan Edit, Detail, dan Hapus .

Membuat Tampilan Detail

Langkah selanjutnya adalah menambahkan Details metode tindakan dan tampilan untuk menampilkan detail pengguna.

Tambahkan metode berikut Details ke pengontrol rumah:

public ViewResult Details(string id) {
    return View(_usrs.GetUser(id));
}

Klik kanan di Details dalam metode lalu pilih Tambahkan Tampilan. Verifikasi bahwa kotak Tampilkan kelas data berisi Mvc3Razor.Models.UserModel. Atur Tampilkan konten ke Detail lalu klik Tambahkan.

Jalankan aplikasi dan pilih tautan detail. Perancah otomatis menunjukkan setiap properti dalam model.

Membuat Tampilan Edit

Tambahkan metode berikut Edit ke pengontrol rumah.

public ViewResult Edit(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public ViewResult Edit(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Update Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Update(um);
    return View("Details", um);
}

Tambahkan tampilan seperti pada langkah sebelumnya, tetapi atur Tampilkan konten ke Edit.

Jalankan aplikasi dan edit nama depan dan belakang salah satu pengguna. Jika Anda melanggar batasan apa pun DataAnnotation yang telah diterapkan ke UserModel kelas , ketika Anda mengirimkan formulir, Anda akan melihat kesalahan validasi yang dihasilkan oleh kode server. Misalnya, jika Anda mengubah nama depan "Ann" menjadi "A", saat Anda mengirimkan formulir, kesalahan berikut ditampilkan pada formulir:

The field First Name must be a string with a minimum length of 3 and a maximum length of 8.

Dalam tutorial ini, Anda memperlakukan nama pengguna sebagai kunci primer. Oleh karena itu, properti nama pengguna tidak dapat diubah. Dalam file Edit.cshtml , tepat setelah Html.BeginForm pernyataan , atur nama pengguna menjadi bidang tersembunyi. Hal ini menyebabkan properti diteruskan dalam model. Fragmen kode berikut menunjukkan penempatan Hidden pernyataan:

<h2>Edit</h2>
    @using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)

TextBoxFor Ganti markup dan ValidationMessageFor untuk nama pengguna dengan DisplayFor panggilan. Metode DisplayFor menampilkan properti sebagai elemen baca-saja. Contoh berikut menunjukkan markup yang telah selesai. TextBoxFor Asli dan ValidationMessageFor panggilan dikomentari dengan karakter razor begin-comment dan end-comment (@* *@)

<div class="editor-label">
  @Html.LabelFor(model => model.UserName)
</div>

<div class="editor-field">
@*
  @Html.TextBoxFor(model => model.UserName)
  @Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>

Mengaktifkan Validasi Client-Side

Untuk mengaktifkan validasi sisi klien di ASP.NET MVC 3, Anda harus mengatur dua bendera dan Anda harus menyertakan tiga file JavaScript.

Buka file Web.config aplikasi. Verifikasi that ClientValidationEnabled dan UnobtrusiveJavaScriptEnabled diatur ke true dalam pengaturan aplikasi. Fragmen berikut dari file Web.config akar menunjukkan pengaturan yang benar:

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

Pengaturan UnobtrusiveJavaScriptEnabled ke true memungkinkan Ajax yang tidak mengganggu dan validasi klien yang tidak mengganggu. Saat Anda menggunakan validasi yang tidak mengganggu, aturan validasi diubah menjadi atribut HTML5. Nama atribut HTML5 hanya dapat terdiri dari huruf kecil, angka, dan tanda hubung.

Pengaturan ClientValidationEnabled ke true memungkinkan validasi sisi klien. Dengan mengatur kunci ini dalam file Web.config aplikasi, Anda mengaktifkan validasi klien dan JavaScript yang tidak mengganggu untuk seluruh aplikasi. Anda juga dapat mengaktifkan atau menonaktifkan pengaturan ini dalam tampilan individual atau dalam metode pengontrol menggunakan kode berikut:

HtmlHelper.ClientValidationEnabled = true; 
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

Anda juga perlu menyertakan beberapa file JavaScript dalam tampilan yang dirender. Cara mudah untuk menyertakan JavaScript di semua tampilan adalah dengan menambahkannya ke file Views\Shared\_Layout.cshtml . <head> Ganti elemen file _Layout.cshtml dengan kode berikut:

<head>
  <title>@View.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>

Dua skrip jQuery pertama dihosting oleh Microsoft Ajax Content Delivery Network (CDN). Dengan memanfaatkan CDN Microsoft Ajax, Anda dapat secara signifikan meningkatkan performa pertama aplikasi Anda.

Jalankan aplikasi dan klik tautan edit. Lihat sumber halaman di browser. Sumber browser menunjukkan banyak atribut formulir data-val (untuk validasi data). Saat validasi klien dan JavaScript yang tidak mengganggu diaktifkan, bidang input dengan aturan validasi klien berisi data-val="true" atribut untuk memicu validasi klien yang tidak mengganggu. Misalnya, City bidang dalam model dihiasi dengan atribut Wajib , yang menghasilkan HTML yang ditunjukkan dalam contoh berikut:

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

Untuk setiap aturan validasi klien, atribut ditambahkan yang memiliki formulir data-val-rulename="message". Menggunakan contoh bidang yang City ditunjukkan sebelumnya, aturan validasi klien yang diperlukan menghasilkan data-val-required atribut dan pesan "Bidang Kota diperlukan". Jalankan aplikasi, edit salah satu pengguna, dan kosongkan City bidang . Saat Anda melakukan tab di luar bidang, Anda akan melihat pesan kesalahan validasi sisi klien.

Demikian pula, untuk setiap parameter dalam aturan validasi klien, atribut ditambahkan yang memiliki formulir data-val-rulename-paramname=paramvalue. Misalnya, properti diannotasikan FirstName dengan atribut StringLength dan menentukan panjang minimum 3 dan panjang maksimum 8. Aturan validasi data bernama length memiliki nama max parameter dan nilai parameter 8. Berikut ini memperlihatkan HTML yang dihasilkan untuk FirstName bidang saat Anda mengedit salah satu pengguna:

<input data-val="true"         
       data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8." 
       data-val-length-max="8" 
       data-val-length-min="3" 
       data-val-required="The First Name field is required." 
       id="FirstName" 
       name="FirstName" 
       type="text" 
       value="Ben" />

Untuk informasi selengkapnya tentang validasi klien yang tidak mengganggu, lihat entri Validasi Klien Tidak Mengganggu di ASP.NET MVC 3 di blog Brad Wilson.

Catatan

Dalam ASP.NET MVC 3 Beta, Terkadang Anda perlu mengirimkan formulir untuk memulai validasi sisi klien. Ini mungkin diubah untuk rilis akhir.

Membuat Tampilan Buat

Langkah selanjutnya adalah menambahkan Create metode tindakan dan tampilan untuk memungkinkan pengguna membuat pengguna baru. Tambahkan metode berikut Create ke pengontrol rumah:

public ViewResult Create() {
    return View(new UserModel());
}

[HttpPost]
public ViewResult Create(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Create Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Create(um);
    return View("Details", um);
}

Tambahkan tampilan seperti pada langkah sebelumnya, tetapi atur Tampilkan konten ke Buat.

Jalankan aplikasi, pilih tautan Buat , dan tambahkan pengguna baru. Metode ini Create secara otomatis memanfaatkan validasi sisi klien dan sisi server. Coba masukkan nama pengguna yang berisi spasi kosong, seperti "Ben X". Saat Anda keluar dari bidang nama pengguna, kesalahan validasi sisi klien (White space is not allowed) ditampilkan.

Menambahkan metode Hapus

Untuk menyelesaikan tutorial, tambahkan metode berikut Delete ke pengontrol rumah:

public ViewResult Delete(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
    _usrs.Remove(id);
    return RedirectToAction("Index");
}

Delete Tambahkan tampilan seperti pada langkah sebelumnya, atur Tampilkan konten ke Hapus.

Anda sekarang memiliki aplikasi ASP.NET MVC 3 yang sederhana tetapi berfungsi penuh dengan validasi.