Bagikan melalui

Bagian 5: Edit Formulir dan Templat

oleh Jon Galloway

MVC Music Store adalah aplikasi tutorial yang memperkenalkan dan menjelaskan langkah demi langkah cara menggunakan ASP.NET MVC dan Visual Studio untuk pengembangan web.

MVC Music Store adalah implementasi penyimpanan sampel ringan yang menjual album musik secara online, dan mengimplementasikan administrasi situs dasar, rincian masuk pengguna, dan fungsionalitas ke cart belanja.

Seri tutorial ini merinci semua langkah yang diambil untuk membangun aplikasi sampel MVC Music Store ASP.NET. Bagian 5 mencakup Edit Formulir dan Templat.

Di bab sebelumnya, kami memuat data dari database kami dan menampilkannya. Dalam bab ini, kita juga akan mengaktifkan pengeditan data.

Membuat StoreManagerController

Kita akan mulai dengan membuat pengontrol baru yang disebut StoreManagerController. Untuk pengontrol ini, kami akan memanfaatkan fitur Perancah yang tersedia di ASP.NET MVC 3 Tools Update. Atur opsi untuk dialog Tambahkan Pengontrol seperti yang ditunjukkan di bawah ini.

Cuplikan layar dialog Tambahkan Pengontrol dengan kotak Pengontrol dan dropdown Templat, Kelas model, dan Kelas konteks data disorot.

Saat Anda mengklik tombol Tambahkan, Anda akan melihat bahwa mekanisme perancah ASP.NET MVC 3 melakukan sejumlah besar pekerjaan untuk Anda:

  • Ini membuat StoreManagerController baru dengan variabel Kerangka Kerja Entitas lokal
  • Ini menambahkan folder StoreManager ke folder Tampilan proyek
  • Ini menambahkan tampilan Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, dan Index.cshtml, yang sangat di ketik ke kelas Album

Cuplikan layar jendela Pengontrol Manajer Penyimpanan dibuka di Microsoft Visual Web Developer 2010 Express setelah pembuatan.

Kelas pengontrol StoreManager baru mencakup tindakan pengontrol CRUD (buat, baca, perbarui, hapus) yang mengetahui cara bekerja dengan kelas model Album dan menggunakan konteks Kerangka Kerja Entitas kami untuk akses database.

Memodifikasi Tampilan Perancah

Penting untuk diingat bahwa, sementara kode ini dihasilkan untuk kita, ini adalah kode standar ASP.NET MVC, seperti yang telah kita tulis sepanjang tutorial ini. Ini dimaksudkan untuk menghemat waktu yang Anda habiskan untuk menulis kode pengontrol boilerplate dan membuat tampilan yang sangat diketik secara manual, tetapi ini bukan jenis kode yang dihasilkan yang mungkin telah Anda lihat diawali dengan peringatan yang mengerikan dalam komentar tentang bagaimana Anda tidak boleh mengubah kode. Ini adalah kode Anda, dan Anda diharapkan untuk mengubahnya.

Jadi, mari kita mulai dengan pengeditan cepat ke tampilan Indeks StoreManager (/Views/StoreManager/Index.cshtml). Tampilan ini akan menampilkan tabel yang mencantumkan Album di toko kami dengan tautan Edit / Detail / Hapus, dan mencakup properti publik Album. Kami akan menghapus bidang AlbumArtUrl, karena tidak terlalu berguna dalam tampilan ini. Di <bagian tabel> kode tampilan, hapus <elemen th> dan <td> di sekitar referensi AlbumArtUrl, seperti yang ditunjukkan oleh baris yang disorot di bawah ini:

<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th>
            AlbumArtUrl
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.AlbumArtUrl)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Kode tampilan yang dimodifikasi akan muncul sebagai berikut:

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Artist.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Pertama-tama lihat Manajer Toko

Sekarang jalankan aplikasi dan telusuri ke /StoreManager/. Ini menampilkan Indeks Manajer Toko yang baru saja kami ubah, memperlihatkan daftar album di toko dengan tautan ke Edit, Detail, dan Hapus.

Cuplikan layar indeks Manajer Penyimpanan memperlihatkan daftar album di penyimpanan dengan tautan ke Edit, Detail, dan Hapus.

Mengklik tautan Edit menampilkan formulir edit dengan bidang untuk Album, termasuk menu dropdown untuk Genre dan Artis.

Cuplikan layar dialog Edit memperlihatkan bidang drop-down untuk Genre dan Artis dan kotak teks untuk Artis, Judul, Harga, dan Album Art U R L.

Klik tautan "Kembali ke Daftar" di bagian bawah, lalu klik tautan Detail untuk Album. Ini menampilkan informasi detail untuk Masing-masing Album.

Cuplikan layar dialog Detail memperlihatkan nilai yang ditetapkan untuk Genre, Artis, Judul, Harga, dan Art Album U R L.

Sekali lagi, klik tautan Kembali ke Daftar, lalu klik tautan Hapus. Ini menampilkan dialog konfirmasi, menampilkan detail album dan menanyakan apakah kami yakin ingin menghapusnya.

Cuplikan layar dialog Hapus memperlihatkan detail album dan meminta pengguna untuk mengonfirmasi penghapusan album yang dipilih.

Mengklik tombol Hapus di bagian bawah akan menghapus album dan mengembalikan Anda ke halaman Indeks, yang menampilkan album yang dihapus.

Kami belum selesai dengan Store Manager, tetapi kami memiliki pengontrol yang berfungsi dan melihat kode untuk operasi CRUD untuk memulai.

Melihat kode Pengontrol Manajer Penyimpanan

Pengontrol Manajer Penyimpanan berisi sejumlah besar kode. Mari kita melalui ini dari atas ke bawah. Pengontrol mencakup beberapa namespace standar untuk pengontrol MVC, serta referensi ke namespace Model kami. Pengontrol memiliki instans privat MusicStoreEntities, yang digunakan oleh setiap tindakan pengontrol untuk akses data.

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.Models;
 
namespace MvcMusicStore.Controllers
{ 
    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();

Tindakan Indeks dan Detail Manajer Penyimpanan

Tampilan indeks mengambil daftar Album, termasuk informasi Genre dan Artis yang direferensikan setiap album, seperti yang sebelumnya kami lihat saat mengerjakan metode Telusuri Toko. Tampilan Indeks mengikuti referensi ke objek yang ditautkan sehingga dapat menampilkan nama Genre dan nama Artis setiap album, sehingga pengontrol sedang efisien dan mengkueri informasi ini dalam permintaan asli.

//
// GET: /StoreManager/
public ViewResult Index()
{
    var albums = db.Albums.Include(a => a.Genre).Include(a => a.Artist);
    return View(albums.ToList());
}

Tindakan pengontrol Detail Pengontrol StoreManager berfungsi sama persis dengan tindakan Detail Pengontrol Toko yang kami tulis sebelumnya - tindakan ini meminta Album dengan ID menggunakan metode Find(), lalu mengembalikannya ke tampilan.

//
// GET: /StoreManager/Details/5
public ViewResult Details(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Metode Buat Tindakan

Metode buat tindakan sedikit berbeda dari yang telah kita lihat sejauh ini, karena metode tersebut menangani input formulir. Ketika pengguna pertama kali mengunjungi /StoreManager/Create/ mereka akan ditampilkan formulir kosong. Halaman HTML ini akan berisi <elemen formulir> yang berisi elemen input dropdown dan kotak teks tempat mereka dapat memasukkan detail album.

Setelah pengguna mengisi nilai formulir Album, mereka dapat menekan tombol "Simpan" untuk mengirimkan perubahan ini kembali ke aplikasi kami untuk disimpan dalam database. Ketika pengguna menekan tombol <"simpan" formulir> akan melakukan HTTP-POST kembali ke /StoreManager/Create/ URL dan mengirimkan <nilai formulir> sebagai bagian dari HTTP-POST.

ASP.NET MVC memungkinkan kami untuk dengan mudah membagi logika dari dua skenario pemanggilan URL ini dengan memungkinkan kami menerapkan dua metode tindakan "Buat" terpisah dalam kelas StoreManagerController kami - satu untuk menangani penelusuran HTTP-GET awal ke /StoreManager/Create/ URL, dan yang lainnya untuk menangani HTTP-POST dari perubahan yang dikirimkan.

Meneruskan informasi ke Tampilan menggunakan ViewBag

Kami telah menggunakan ViewBag sebelumnya dalam tutorial ini, tetapi belum berbicara banyak tentang hal itu. ViewBag memungkinkan kami meneruskan informasi ke tampilan tanpa menggunakan objek model yang ditik dengan kuat. Dalam hal ini, tindakan Edit pengontrol HTTP-GET kami perlu meneruskan daftar Genre dan Artis ke formulir untuk mengisi dropdown, dan cara paling sederhana untuk melakukannya adalah mengembalikannya sebagai item ViewBag.

ViewBag adalah objek dinamis, yang berarti Anda dapat mengetik ViewBag.Foo atau ViewBag.YourNameHere tanpa menulis kode untuk menentukan properti tersebut. Dalam hal ini, kode pengontrol menggunakan ViewBag.GenreId dan ViewBag.ArtistId sehingga nilai dropdown yang dikirimkan dengan formulir akan berupa GenreId dan ArtistId, yang merupakan properti Album yang akan mereka atur.

Nilai dropdown ini dikembalikan ke formulir menggunakan objek SelectList, yang dibuat hanya untuk tujuan tersebut. Ini dilakukan menggunakan kode seperti ini:

ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");

Seperti yang Anda lihat dari kode metode tindakan, tiga parameter sedang digunakan untuk membuat objek ini:

  • Daftar item dropdown akan ditampilkan. Perhatikan bahwa ini bukan hanya string - kami meneruskan daftar Genre.
  • Parameter berikutnya yang diteruskan ke SelectList adalah Nilai yang Dipilih. Ini cara SelectList mengetahui cara memilih item sebelumnya dalam daftar. Ini akan lebih mudah dipahami ketika kita melihat formulir Edit, yang cukup mirip.
  • Parameter akhir adalah properti yang akan ditampilkan. Dalam hal ini, ini menunjukkan bahwa properti Genre.Name adalah apa yang akan ditampilkan kepada pengguna.

Dengan mengingat hal itu, maka tindakan HTTP-GET Create cukup sederhana - dua SelectLists ditambahkan ke ViewBag, dan tidak ada objek model yang diteruskan ke formulir (karena belum dibuat).

//
// GET: /StoreManager/Create
public ActionResult Create()
{
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name");
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name");
    return View();
}

Pembantu HTML untuk menampilkan Drop Down di Buat Tampilan

Karena kita telah berbicara tentang bagaimana nilai drop-down diteruskan ke tampilan, mari kita lihat sekilas tampilan untuk melihat bagaimana nilai-nilai tersebut ditampilkan. Dalam kode tampilan (/Views/StoreManager/Create.cshtml), Anda akan melihat panggilan berikut dilakukan untuk menampilkan drop-down Genre.

@Html.DropDownList("GenreId",
String.Empty)

Ini dikenal sebagai Pembantu HTML - metode utilitas yang melakukan tugas tampilan umum. Pembantu HTML sangat berguna dalam menjaga kode tampilan kami tetap ringkas dan dapat dibaca. Pembantu Html.DropDownList disediakan oleh ASP.NET MVC, tetapi seperti yang akan kita lihat nanti dimungkinkan untuk membuat pembantu kita sendiri untuk melihat kode yang akan kita gunakan kembali di aplikasi kita.

Panggilan Html.DropDownList hanya perlu diberi tahu dua hal - di mana mendapatkan daftar untuk ditampilkan, dan nilai apa (jika ada) yang harus dipilih sebelumnya. Parameter pertama, GenreId, memberi tahu DropDownList untuk mencari nilai bernama GenreId baik di model atau ViewBag. Parameter kedua digunakan untuk menunjukkan nilai yang akan ditampilkan sebagai awalnya dipilih dalam daftar drop-down. Karena formulir ini adalah formulir Buat, tidak ada nilai yang akan dipilih sebelumnya dan String.Empty diteruskan.

Menangani nilai Formulir yang Diposting

Seperti yang telah kita bahas sebelumnya, ada dua metode tindakan yang terkait dengan setiap formulir. Yang pertama menangani permintaan HTTP-GET dan menampilkan formulir. Yang kedua menangani permintaan HTTP-POST, yang berisi nilai formulir yang dikirimkan. Perhatikan bahwa tindakan pengontrol memiliki atribut [HttpPost], yang memberi tahu ASP.NET MVC bahwa tindakan pengontrol hanya boleh menanggapi permintaan HTTP-POST.

//
// POST: /StoreManager/Create
[HttpPost]
public ActionResult Create(Album album)
{
    if (ModelState.IsValid)
    {
        db.Albums.Add(album);
        db.SaveChanges();
        return RedirectToAction("Index");  
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Tindakan ini memiliki empat tanggung jawab:

    1. Membaca nilai formulir
    1. Periksa apakah nilai formulir melewati aturan validasi apa pun
    1. Jika pengiriman formulir valid, simpan data dan tampilkan daftar yang diperbarui
    1. Jika pengiriman formulir tidak valid, putar ulang formulir dengan kesalahan validasi

Membaca Nilai Formulir dengan Pengikatan Model

Tindakan pengontrol memproses pengiriman formulir yang menyertakan nilai untuk GenreId dan ArtistId (dari daftar drop-down) dan nilai kotak teks untuk Judul, Harga, dan AlbumArtUrl. Meskipun dimungkinkan untuk langsung mengakses nilai formulir, pendekatan yang lebih baik adalah menggunakan kemampuan Pengikatan Model yang disertakan dalam ASP.NET MVC. Ketika tindakan pengontrol mengambil jenis model sebagai parameter, ASP.NET MVC akan mencoba mengisi objek dari jenis tersebut menggunakan input formulir (serta nilai rute dan querystring). Ini dilakukan dengan mencari nilai yang namanya cocok dengan properti objek model, misalnya saat mengatur nilai GenreId objek Album baru, ia mencari input dengan nama GenreId. Saat Anda membuat tampilan menggunakan metode standar di ASP.NET MVC, formulir akan selalu dirender menggunakan nama properti sebagai nama bidang input, sehingga nama bidang ini hanya akan cocok.

Memvalidasi Model

Model divalidasi dengan panggilan sederhana ke ModelState.IsValid. Kami belum menambahkan aturan validasi apa pun ke kelas Album kami - kami akan melakukannya sedikit pun - jadi sekarang pemeriksaan ini tidak memiliki banyak hal yang harus dilakukan. Yang penting adalah bahwa pemeriksaan ModelStat.IsValid ini akan beradaptasi dengan aturan validasi yang kami terapkan pada model kami, sehingga perubahan pada aturan validasi di masa mendatang tidak akan memerlukan pembaruan apa pun pada kode tindakan pengontrol.

Menyimpan nilai yang dikirimkan

Jika pengiriman formulir melewati validasi, saatnya untuk menyimpan nilai ke database. Dengan Entity Framework, yang hanya memerlukan penambahan model ke koleksi Album dan memanggil SaveChanges.

db.Albums.Add(album);
db.SaveChanges();

Entity Framework menghasilkan perintah SQL yang sesuai untuk mempertahankan nilai. Setelah menyimpan data, kami mengalihkan kembali ke daftar Album sehingga kami dapat melihat pembaruan kami. Ini dilakukan dengan mengembalikan RedirectToAction dengan nama tindakan pengontrol yang ingin kita tampilkan. Dalam hal ini, itulah metode Indeks.

Menampilkan pengiriman formulir yang tidak valid dengan Kesalahan Validasi

Dalam kasus input formulir yang tidak valid, nilai dropdown ditambahkan ke ViewBag (seperti dalam kasus HTTP-GET) dan nilai model terikat diteruskan kembali ke tampilan untuk ditampilkan. Kesalahan validasi secara otomatis ditampilkan menggunakan Pembantu @Html.ValidationMessageFor HTML.

Menguji Formulir Buat

Untuk menguji ini, jalankan aplikasi dan telusuri ke /StoreManager/Create/ - ini akan menunjukkan formulir kosong yang dikembalikan oleh metode StoreController Create HTTP-GET.

Isi beberapa nilai dan klik tombol Buat untuk mengirimkan formulir.

Cuplikan layar Formulir Buat memperlihatkan bidang dropdown Genre dan Artis serta kotak teks Judul, Harga, dan Album Art U R L.

Cuplikan layar daftar album yang menyoroti album baru yang dibuat dari formulir Buat dengan panah merah.

Menangani Pengeditan

Pasangan tindakan Edit (HTTP-GET dan HTTP-POST) sangat mirip dengan metode buat tindakan yang baru saja kita lihat. Karena skenario edit melibatkan bekerja dengan album yang ada, metode Edit HTTP-GET memuat Album berdasarkan parameter "id", yang diteruskan melalui rute. Kode untuk mengambil album oleh AlbumId ini sama dengan yang telah kita lihat sebelumnya dalam tindakan Pengontrol detail. Seperti halnya metode Buat /HTTP-GET, nilai drop-down dikembalikan melalui ViewBag. Ini memungkinkan kami untuk mengembalikan Album sebagai objek model kami ke tampilan (yang sangat ditik ke kelas Album) sambil meneruskan data tambahan (misalnya daftar Genre) melalui ViewBag.

//
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
    Album album = db.Albums.Find(id);
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Tindakan Edit HTTP-POST sangat mirip dengan tindakan Buat HTTP-POST. Satu-satunya perbedaan adalah bahwa alih-alih menambahkan album baru ke db. Koleksi album, kami menemukan instans Album saat ini menggunakan db. Entri(album) dan mengatur statusnya ke Dimodifikasi. Ini memberi tahu Entity Framework bahwa kami memodifikasi album yang ada dibandingkan dengan membuat album baru.

//
// POST: /StoreManager/Edit/5
[HttpPost]
public ActionResult Edit(Album album)
{
    if (ModelState.IsValid)
    {
        db.Entry(album).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
    ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
    return View(album);
}

Kita dapat menguji ini dengan menjalankan aplikasi dan menelusuri ke /StoreManger/, lalu mengklik tautan Edit untuk album.

Cuplikan layar daftar album dengan opsi Edit yang sesuai dengan album yang disorot dengan panah merah.

Ini menampilkan formulir Edit yang ditunjukkan oleh metode Edit HTTP-GET. Isi beberapa nilai dan klik tombol Simpan.

Cuplikan layar formulir Edit dengan kotak teks Genre, Judul, dan Harga disorot dalam persegi panjang merah.

Ini memposting formulir, menyimpan nilai, dan mengembalikan kami ke daftar Album, memperlihatkan bahwa nilai telah diperbarui.

Cuplikan layar daftar album memperlihatkan nilai yang baru diperbarui untuk album yang disorot dengan panah merah.

Menangani Penghapusan

Penghapusan mengikuti pola yang sama dengan Edit dan Buat, menggunakan satu tindakan pengontrol untuk menampilkan formulir konfirmasi, dan tindakan pengontrol lain untuk menangani pengiriman formulir.

Tindakan pengontrol HTTP-GET Delete sama persis dengan tindakan pengontrol Detail Manajer Penyimpanan kami sebelumnya.

//
// GET: /StoreManager/Delete/5
 
public ActionResult Delete(int id)
{
    Album album = db.Albums.Find(id);
    return View(album);
}

Kami menampilkan formulir yang sangat di ketik ke jenis Album, menggunakan templat hapus konten tampilan.

Cuplikan layar formulir Penghapusan memperlihatkan detail album yang dipilih dan menunjukkan templat hapus konten tampilan.

Templat Hapus menunjukkan semua bidang untuk model, tetapi kami dapat menyederhanakannya sedikit. Ubah kode tampilan di /Views/StoreManager/Delete.cshtml menjadi berikut ini.

@model MvcMusicStore.Models.Album
@{
    ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>
<p>Are you sure you want to delete the album titled 
   <strong>@Model.Title</strong>?
</p>
@using (Html.BeginForm()) {
    <p>
        <input type="submit" value="Delete" />
    </p>
    <p>
        @Html.ActionLink("Back to
List", "Index")
    </p>
}

Ini menampilkan konfirmasi Hapus yang disederhanakan.

Cuplikan layar formulir Hapus Konfirmasi yang meminta konfirmasi kepada pengguna untuk menghapus album yang dipilih.

Mengklik tombol Hapus menyebabkan formulir diposting kembali ke server, yang menjalankan tindakan DeleteConfirmed.

//
// POST: /StoreManager/Delete/5
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{            
    Album album = db.Albums.Find(id);
    db.Albums.Remove(album);
    db.SaveChanges();
    return RedirectToAction("Index");
}

Tindakan Pengontrol Penghapusan HTTP-POST kami mengambil tindakan berikut:

    1. Memuat Album menurut ID
    1. Menghapusnya album dan menyimpan perubahan
    1. Mengalihkan ke Indeks, memperlihatkan bahwa Album dihapus dari daftar

Untuk menguji ini, jalankan aplikasi dan telusuri ke /StoreManager. Pilih album dari daftar dan klik tautan Hapus.

Cuplikan layar daftar album dengan opsi Hapus yang terkait dengan album yang tercantum disorot dengan panah merah.

Ini menampilkan layar konfirmasi Hapus kami.

Cuplikan layar dialog Hapus Konfirmasi yang meminta konfirmasi kepada pengguna untuk menghapus album yang dipilih.

Mengklik tombol Hapus akan menghapus album dan mengembalikan kami ke halaman Indeks Manajer Penyimpanan, yang menunjukkan bahwa album telah dihapus.

Cuplikan layar daftar album yang menunjukkan bahwa album yang dihapus tidak lagi ada di daftar album, disorot dengan panah merah.

Menggunakan Pembantu HTML kustom untuk memotong teks

Kami memiliki satu masalah potensial dengan halaman Indeks Manajer Toko kami. Properti Judul Album dan Nama Artis kami keduanya bisa cukup lama sehingga mereka dapat membuang pemformatan tabel kami. Kami akan membuat Pembantu HTML kustom untuk memungkinkan kami dengan mudah memotong ini dan properti lain di Tampilan kami.

Cuplikan layar daftar album dengan dua nama artis panjang dan dua nama album panjang disorot dalam persegi panjang merah.

Sintaks Razor @helper telah membuatnya cukup mudah untuk membuat fungsi pembantu Anda sendiri untuk digunakan dalam tampilan Anda. Buka tampilan /Views/StoreManager/Index.cshtml dan tambahkan kode berikut langsung setelah @model baris.

@helper Truncate(string
input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}

Metode pembantu ini mengambil string dan panjang maksimum untuk diizinkan. Jika teks yang disediakan lebih pendek dari panjang yang ditentukan, pembantu mengeluarkannya apa adanya. Jika lebih panjang, maka teks terpotong dan merender "..." untuk sisanya.

Sekarang kita dapat menggunakan pembantu Truncate untuk memastikan bahwa properti Judul Album dan Nama Artis kurang dari 25 karakter. Kode tampilan lengkap menggunakan pembantu Pemotong baru kami muncul di bawah ini.

@model IEnumerable<MvcMusicStore.Models.Album>
@helper Truncate(string input, int length)
 {
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create
New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Truncate(item.Artist.Name, 25)
        </td>
        <td>
            @Truncate(item.Title, 25)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}
</table>

Sekarang ketika kita menelusuri URL /StoreManager/ , album dan judul disimpan di bawah panjang maksimum kami.

Cuplikan layar daftar album dengan dua nama artis panjang dan dua nama album panjang setelah proses pembantu Potong disorot dalam persegi panjang merah.

Catatan: Ini menunjukkan kasus sederhana dalam membuat dan menggunakan pembantu dalam satu tampilan. Untuk mempelajari selengkapnya tentang membuat pembantu yang bisa Anda gunakan di seluruh situs Anda, lihat posting blog saya: http://bit.ly/mvc3-helper-options

SebelumnyaBerikutnya