Bölüm 5: Formları Düzenleme ve Şablon Oluşturma

Makale
07/13/2023

MVC Müzik Deposu, web geliştirme için ASP.NET MVC ve Visual Studio'yu kullanmayı adım adım tanıtır ve açıklar.

MVC Music Store, müzik albümlerini çevrimiçi olarak satan ve temel site yönetimi, kullanıcı oturum açma ve alışveriş sepeti işlevlerini uygulayan basit bir örnek mağaza uygulamasıdır.

Bu öğretici serisi, ASP.NET MVC Müzik Deposu örnek uygulamasını derlemek için atılan tüm adımların ayrıntılarını içerir. 5. Bölüm, Formları Düzenle ve Şablon Oluşturma'ya yönelik bir açıklama içerir.

Önceki bölümde verileri veritabanımızdan yüklüyor ve görüntülüyorduk. Bu bölümde, verilerin düzenlenmesini de etkinleştireceğiz.

StoreManagerController Oluşturma

StoreManagerController adlı yeni bir denetleyici oluşturarak başlayacağız. Bu denetleyici için, ASP.NET MVC 3 Araçları Güncelleştirmesi'nde bulunan yapı iskelesi özelliklerinden yararlanacağız. Aşağıda gösterildiği gibi Denetleyici Ekle iletişim kutusunun seçeneklerini ayarlayın.

Denetleyici kutusu ve Şablon, Model sınıfı ve Veri bağlamı sınıfı açılan listelerinin vurgulandığı Denetleyici Ekle iletişim kutusunun ekran görüntüsü.

Ekle düğmesine tıkladığınızda, ASP.NET MVC 3 yapı iskelesi mekanizmasının sizin için iyi bir iş yaptığını görürsünüz:

Yeni StoreManagerController'ı yerel bir Entity Framework değişkeniyle oluşturur
Projenin Görünümler klasörüne bir StoreManager klasörü ekler
Albüm sınıfına kesin olarak yazılan Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml ve Index.cshtml görünümünü ekler

Microsoft Visual Web Developer 2010 Express'te oluşturulduktan sonra açılan Store Manager Denetleyicisi penceresinin ekran görüntüsü.

Yeni StoreManager denetleyici sınıfı, Albüm modeli sınıfıyla çalışmayı ve veritabanı erişimi için Entity Framework bağlamımızı kullanmayı bilen CRUD (oluşturma, okuma, güncelleştirme, silme) denetleyici eylemlerini içerir.

İskeleli Görünümü Değiştirme

Bu kod bizim için oluşturulmuş olsa da, bu öğretici boyunca yazdığımız gibi standart ASP.NET MVC kodu olduğunu unutmayın. Ortak denetleyici kodu yazmak ve kesin olarak yazılan görünümleri el ile oluşturmak için harcayacağınız zamandan tasarruf etmeniz amaçlanmıştır, ancak bu kod, kodu nasıl değiştirmemek gerektiğiyle ilgili açıklamalarda kötü uyarılarla karşılaşmış olabileceğiniz türde bir kod değildir. Bu sizin kodunuzdur ve bunu değiştirmeniz beklenir.

Bu nedenle, StoreManager Dizin görünümünde (/Views/StoreManager/Index.cshtml) hızlı bir düzenlemeyle başlayalım. Bu görünümde, Mağazamızdaki Albümleri Düzenle / Ayrıntılar / Sil bağlantıları ile listeleyen ve Albüm'ün genel özelliklerini içeren bir tablo görüntülenir. Bu ekranda çok yararlı olmadığından AlbumArtUrl alanını kaldıracağız. Görünüm <kodunun tablo> bölümünde, aşağıdaki vurgulanan satırlarda gösterildiği gibi AlbumArtUrl başvurularını çevreleyen th> ve <td> öğelerini kaldırın<:

<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>

Değiştirilen görünüm kodu aşağıdaki gibi görünür:

@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>

Store Manager'a ilk bakış

Şimdi uygulamayı çalıştırın ve /StoreManager/ konumuna gidin. Bu, yeni değiştirdiğimiz Store Manager Dizini'ni görüntüler ve mağazadaki albümlerin listesini ve Düzenle, Ayrıntılar ve Sil bağlantılarını gösterir.

Mağazadaki albümlerin listesini ve Düzenle, Ayrıntılar ve Sil bağlantılarını gösteren Store Manager dizininin ekran görüntüsü.

Düzenle bağlantısına tıklanması, Tarz ve Sanatçı açılan listelerini de içeren Albüm alanlarını içeren bir düzenleme formu görüntüler.

Tarz ve Sanatçı açılan alanlarını ve Sanatçı, Başlık, Fiyat ve Albüm Resmi U R L için metin kutularını gösteren Düzenle iletişim kutusunun ekran görüntüsü.

En alttaki "Listeye Dön" bağlantısına tıklayın ve ardından Bir Albüm için Ayrıntılar bağlantısına tıklayın. Bu, tek bir Albüm için ayrıntı bilgilerini görüntüler.

Tarz, Sanatçı, Başlık, Fiyat ve Albüm Resmi U R L için ayarlanan değerleri gösteren Ayrıntılar iletişim kutusunun ekran görüntüsü.

Yeniden Listeye Dön bağlantısına ve ardından Sil bağlantısına tıklayın. Bu, albüm ayrıntılarını gösteren ve silmek istediğimizden emin olup olmadığını soran bir onay iletişim kutusu görüntüler.

Albüm ayrıntılarını gösteren ve kullanıcıdan seçili albümün silinmesini onaylamasını isteyen Sil iletişim kutusunun ekran görüntüsü.

Alttaki Sil düğmesine tıkladığınızda albüm silinir ve albümünün silindiği gösterilen Dizin sayfasına geri dönersiniz.

Store Manager ile işimiz bitmedi, ancak CRUD işlemlerinin başlaması için çalışan denetleyicimiz ve görüntüleme kodumuz var.

Store Manager Denetleyicisi koduna bakma

Store Manager Denetleyicisi iyi miktarda kod içerir. Bunu yukarıdan aşağıya doğru inceleyelim. Denetleyici, MVC denetleyicisi için bazı standart ad alanlarının yanı sıra Models ad alanımıza başvuru içerir. Denetleyici, veri erişimi için denetleyici eylemlerinin her biri tarafından kullanılan özel bir MusicStoreEntities örneğine sahiptir.

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();

Store Manager Dizini ve Ayrıntıları eylemleri

Dizin görünümü, daha önce Store Browse yöntemi üzerinde çalışırken gördüğümüz gibi albümlerin başvurulan Tarz ve Sanatçı bilgileri de dahil olmak üzere albümlerin listesini alır. Dizin görünümü, her albümün Tarz adını ve Sanatçı adını görüntüleyebilmesi için bağlantılı nesnelere yapılan başvuruları izler, böylece denetleyici verimlidir ve özgün istekte bu bilgileri sorgular.

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

StoreManager Denetleyicisinin Ayrıntılar denetleyicisi eylemi, daha önce yazdığımız Mağaza Denetleyicisi Ayrıntıları eylemiyle tam olarak aynı şekilde çalışır. Find() yöntemini kullanarak Kimliğe Göre Albüm'ü sorgular ve görünüme döndürür.

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

Eylem Oluşturma Yöntemleri

Create eylem yöntemleri, form girişini işledikleri için şimdiye kadar gördüklerimizden biraz farklıdır. Bir kullanıcı /StoreManager/Create/ öğesini ilk ziyaret ettiğinde boş bir form gösterilir. Bu HTML sayfası, albüm ayrıntılarını girebilecekleri açılan menü ve metin kutusu giriş öğelerini içeren bir <form> öğesi içerir.

Kullanıcı Albüm formu değerlerini doldurduktan sonra , bu değişiklikleri veritabanına kaydetmek üzere uygulamamıza geri göndermek için "Kaydet" düğmesine basabilir. Kullanıcı "kaydet" düğmesine bastığında<, form> /StoreManager/Create/ URL'sine bir HTTP-POST gerçekleştirir ve form> değerlerini HTTP-POST'un bir parçası olarak gönderir<.

ASP.NET MVC, StoreManagerController sınıfımızda biri /StoreManager/Create/ URL'sine ilk HTTP-GET göz atmasını, diğeri de gönderilen değişikliklerin HTTP-POST'unu işlemek için olmak üzere iki ayrı "Oluştur" eylem yöntemi uygulamamızı sağlayarak bu iki URL çağırma senaryosunun mantığını kolayca bölmemize olanak tanır.

ViewBag kullanarak bir Görünüme bilgi geçirme

Bu öğreticinin önceki bölümlerinde ViewBag'i kullandık ancak bu konuda fazla konuşmadık. ViewBag, kesin olarak belirlenmiş bir model nesnesi kullanmadan bilgileri görünüme geçirmemizi sağlar. Bu durumda, HTTP-GET denetleyicisini düzenle eylemimizin açılan listeleri doldurmak için hem Tarzlar hem de Sanatçılar listesini forma geçirmesi gerekir ve bunu yapmanın en kolay yolu bunları ViewBag öğeleri olarak döndürmektir.

ViewBag dinamik bir nesnedir, yani bu özellikleri tanımlamak için kod yazmadan ViewBag.Foo veya ViewBag.YourNameHere yazabilirsiniz. Bu durumda, denetleyici kodu ViewBag.GenreId ve ViewBag.ArtistId'yi kullanır, böylece formla gönderilen açılan değerler ayarlayacakları Albüm özellikleri olan GenreId ve ArtistId olur.

Bu açılan değerler, yalnızca bu amaçla oluşturulan SelectList nesnesi kullanılarak forma döndürülür. Bu, aşağıdaki gibi bir kod kullanılarak yapılır:

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

Eylem yöntemi kodundan görebileceğiniz gibi, bu nesneyi oluşturmak için üç parametre kullanılıyor:

Açılan listenin görüntüleneceği öğe listesi. Bunun yalnızca bir dize olmadığını unutmayın; Tarzlar listesini geçiyoruz.
SelectList'e geçirilen bir sonraki parametre Seçili Değer'dir. SelectList, listedeki bir öğeyi önceden seçmeyi bu şekilde bilir. Oldukça benzer olan Düzenleme formuna baktığımızda bunu anlamak daha kolay olacaktır.
Son parametre, görüntülenecek özelliktir. Bu durumda, Genre.Name özelliğinin kullanıcıya gösterilecek özellik olduğunu gösterir.

Bunu göz önünde bulundurarak, HTTP-GET Oluşturma eylemi oldukça basittir- ViewBag'a iki SelectList eklenir ve forma model nesnesi geçirilmiyor (henüz oluşturulmadığından).

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

Oluştur Görünümünde Açılan Menüleri görüntülemek için HTML Yardımcıları

Açılan değerlerin görünüme nasıl geçirildiğinden bahsettiğimizden, bu değerlerin nasıl görüntülendiğini görmek için görünüme hızlıca göz atalım. Görünüm kodunda (/Views/StoreManager/Create.cshtml), Tarz açılan listesini görüntülemek için aşağıdaki çağrının yapıldığını görürsünüz.

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

Bu, ortak bir görünüm görevi gerçekleştiren bir yardımcı program yöntemi olan HTML Yardımcısı olarak bilinir. HTML Yardımcıları, görünüm kodumuzu kısa ve okunabilir tutma konusunda çok kullanışlıdır. Html.DropDownList yardımcısı ASP.NET MVC tarafından sağlanır, ancak daha sonra göreceğimiz gibi kodu görüntülemek için kendi yardımcılarımızı oluşturmak mümkündür. Uygulamamızda yeniden kullanacağız.

Html.DropDownList çağrısına yalnızca iki şey söylenmelidir: listenin nerede görüntüleneceği ve hangi değerin (varsa) önceden seçilmesi gerekir. İlk parametre olan GenreId, DropDownList'e modelde veya ViewBag'te GenreId adlı bir değeri aramasını söyler. İkinci parametre, açılan listede ilk olarak seçili olarak gösterilecek değeri belirtmek için kullanılır. Bu form bir Oluştur formu olduğundan, önceden seçilecek bir değer yoktur ve String.Empty geçirilir.

Deftere Nakledilen Form değerlerini işleme

Daha önce de belirttiğimiz gibi, her formla ilişkilendirilmiş iki eylem yöntemi vardır. İlki HTTP-GET isteğini işler ve formu görüntüler. İkincisi, gönderilen form değerlerini içeren HTTP-POST isteğini işler. Denetleyici eyleminin, ASP.NET MVC'ye yalnızca HTTP-POST isteklerine yanıt vermesi gerektiğini bildiren [HttpPost] özniteliğine sahip olduğuna dikkat edin.

//
// 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);
}

Bu eylemin dört sorumluluğu vardır:

1. Form değerlerini okuma
1. Form değerlerinin herhangi bir doğrulama kuralı geçirip geçirmediğini denetleyin
1. Form gönderimi geçerliyse verileri kaydedin ve güncelleştirilmiş listeyi görüntüleyin
1. Form gönderimi geçerli değilse, formu doğrulama hatalarıyla yeniden dağıtın

Model Bağlama ile Form Değerlerini Okuma

Denetleyici eylemi, GenreId ve ArtistId değerlerini (açılan listeden) ve Title, Price ve AlbumArtUrl için metin kutusu değerlerini içeren bir form gönderimini işliyor. Form değerlerine doğrudan erişmek mümkün olsa da, ASP.NET MVC'de yerleşik olarak bulunan Model Bağlama özelliklerini kullanmak daha iyi bir yaklaşımdır. Denetleyici eylemi bir model türünü parametre olarak aldığında, ASP.NET MVC form girişlerini (yol ve sorgu dizesi değerlerinin yanı sıra) kullanarak bu tür bir nesneyi doldurmaya çalışır. Bunu yapmak için, adları model nesnesinin özellikleriyle eşleşen değerleri arar; örneğin yeni Album nesnesinin GenreId değerini ayarlarken GenreId adlı bir giriş arar. ASP.NET MVC'de standart yöntemleri kullanarak görünümler oluşturduğunuzda, formlar her zaman giriş alanı adları olarak özellik adları kullanılarak işlenir, bu nedenle alan adları yalnızca eşleşecektir.

Modeli Doğrulama

Model, ModelState.IsValid'e basit bir çağrıyla doğrulanır. Albüm sınıfımıza henüz herhangi bir doğrulama kuralı eklemedik. Bunu biraz sonra yapacağız. Bu nedenle şu anda bu denetimin yapacak çok fazla işi yok. Önemli olan, bu ModelStat.IsValid denetiminin modelimize koyduğumuz doğrulama kurallarına uyarlanmasıdır, bu nedenle doğrulama kurallarında gelecekte yapılacak değişiklikler için denetleyici eylem kodunda güncelleştirme yapılması gerekmez.

Gönderilen değerleri kaydetme

Form gönderimi doğrulamayı geçerse, değerleri veritabanına kaydetmenin zamanı geldi. Entity Framework ile modelin Albümler koleksiyonuna eklenmesi ve SaveChanges'in çağrılması gerekir.

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

Entity Framework, değeri kalıcı hale getirmek için uygun SQL komutlarını oluşturur. Verileri kaydettikten sonra, güncelleştirmemizi görebilmek için Albümler listesine yeniden yönlendiririz. Bu, RedirectToAction değerinin görüntülenmesini istediğimiz denetleyici eyleminin adıyla döndürülerek gerçekleştirilir. Bu durumda Index yöntemi budur.

Doğrulama Hatalarıyla geçersiz form gönderimlerini görüntüleme

Geçersiz form girişi söz konusu olduğunda, açılan değerler ViewBag'e eklenir (HTTP-GET örneğinde olduğu gibi) ve ilişkili model değerleri görüntülenmek üzere görünüme geri geçirilir. Doğrulama hataları HTML Yardımcısı kullanılarak @Html.ValidationMessageFor otomatik olarak görüntülenir.

Oluşturma Formunu Test Etme

Bunu test etmek için uygulamayı çalıştırın ve /StoreManager/Create/ adresine gidin. Bu size StoreController Create HTTP-GET yöntemi tarafından döndürülen boş formu gösterir.

Formu göndermek için bazı değerleri doldurun ve Oluştur düğmesine tıklayın.

Tür ve Sanatçı açılan alanlarını ve Başlık, Fiyat ve Albüm Resmi U R L metin kutularını gösteren Form Oluştur'un ekran görüntüsü.

Oluştur formundan oluşturulan yeni albümü kırmızı okla vurgulayan albüm listesinin ekran görüntüsü.

Düzenlemeleri İşleme

Düzenle eylem çifti (HTTP-GET ve HTTP-POST), az önce incelediğimiz Eylem oluşturma yöntemlerine çok benzer. Düzenleme senaryosu mevcut bir albümle çalışmayı içerdiğinden Edit HTTP-GET yöntemi, Yolu aracılığıyla geçirilen "id" parametresine göre Albümü yükler. AlbumId ile albüm almak için kullanılan bu kod, Ayrıntılar denetleyicisi eyleminde daha önce incelediğimiz kodla aynıdır. Create / HTTP-GET yönteminde olduğu gibi, açılan değerler ViewBag aracılığıyla döndürülür. Bu, ViewBag aracılığıyla ek veriler (ör. Tarzlar listesi) geçirirken görünüme model nesnemiz olarak bir Albüm döndürmemizi sağlar (Albüm sınıfına kesin olarak yazılır).

//
// 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);
}

HTTP-POST'u Düzenle eylemi, HTTP-POST Oluştur eylemine çok benzer. Tek fark, veritabanına yeni bir albüm eklemek yerine bunu yapmaktır. Albüm koleksiyonunda db kullanarak Albüm'ün geçerli örneğini buluyoruz. Giriş(albüm) ve durumunu Değiştirildi olarak ayarlayın. Bu, Entity Framework'e yeni bir albüm oluşturmanın aksine var olan bir albümü değiştirdiğimiz bildirir.

//
// 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);
}

Uygulamayı çalıştırıp /StoreManger/ öğesine göz atıp bir albüm için Düzenle bağlantısına tıklayarak bunu test edebiliriz.

Kırmızı okla vurgulanmış bir albüme karşılık gelen Düzenle seçeneğinin yer aldığı albüm listesinin ekran görüntüsü.

Bu, HTTP-GET Düzenle yöntemi tarafından gösterilen Düzenleme formunu görüntüler. Bazı değerleri doldurun ve Kaydet düğmesine tıklayın.

Kırmızı dikdörtgenler içinde Tarz, Başlık ve Fiyat metin kutularının vurgulandığı Düzenleme formunun ekran görüntüsü.

Bu işlem formu gönderip değerleri kaydeder ve değerlerin güncelleştirildiğini göstererek bizi Albüm listesine döndürür.

Albüm için yeni güncelleştirilen değerlerin kırmızı okla vurgulandığı albüm listesinin ekran görüntüsü.

Silmeyi İşleme

Silme işlemi, onay formunu görüntülemek için bir denetleyici eylemini ve form gönderimini işlemek için başka bir denetleyici eylemini kullanarak Düzenle ve Oluştur ile aynı deseni izler.

HTTP-GET Delete denetleyicisi eylemi, önceki Store Manager Ayrıntıları denetleyici eylemimizle tamamen aynıdır.

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

Görünüm içeriğini sil şablonunu kullanarak albüm türüne kesin olarak yazılan bir form görüntülüyoruz.

Seçili albümün ayrıntılarını ve Sil görünümü içerik şablonunu gösteren Silme formunun ekran görüntüsü.

Delete şablonu modele ilişkin tüm alanları gösterir, ancak bunu biraz daha basitleştirebiliriz. /Views/StoreManager/Delete.cshtml içindeki görünüm kodunu aşağıdaki şekilde değiştirin.

@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>
}

Bu, basitleştirilmiş bir Silme onayı görüntüler.

Kullanıcıdan seçili albümü silmesini isteyen Onay Sil formunun ekran görüntüsü.

Sil düğmesine tıklanması formun sunucuya geri gönderilip DeleteConfirmed eylemini yürütmesine neden olur.

//
// 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");
}

HTTP-POST Denetleyici Silme Eylemimiz aşağıdaki eylemleri gerçekleştirir:

1. Albüm kimliğine göre yükler
1. Albümü siler ve değişiklikleri kaydeder
1. Albüm'un listeden kaldırıldığını gösteren Dizin'e yönlendirir

Bunu test etmek için uygulamayı çalıştırın ve /StoreManager'a göz atın. Listeden bir albüm seçin ve Sil bağlantısına tıklayın.

Listelenen bir albümle ilişkilendirilmiş Sil seçeneğinin kırmızı okla vurgulandığı albüm listesinin ekran görüntüsü.

Bu, Silme onayı ekranımızı görüntüler.

Kullanıcıdan seçme albümünü silmesi için onay isteyen Silme Onayı iletişim kutusunun ekran görüntüsü.

Sil düğmesine tıkladığınızda albüm kaldırılır ve albümünün silindiğini gösteren Mağaza Yöneticisi Dizini sayfasına geri döneriz.

Silinen albümün artık albüm listesinde olmadığını ve kırmızı okla vurgulandığını gösteren albüm listesi ekranının ekran görüntüsü.

Metni kesmeye özel HTML Yardımcısı kullanma

Store Manager Dizin sayfamızda olası bir sorun var. Albüm Başlığı ve Sanatçı Adı özelliklerimiz, tablo biçimlendirmemizi atabilecek kadar uzun olabilir. Bu özellikleri ve diğer özellikleri Görünümlerimizde kolayca kesmemizi sağlamak için özel bir HTML Yardımcısı oluşturacağız.

İki uzun sanatçı adı ve iki uzun albüm adının kırmızı dikdörtgenlerle vurgulandığı albüm listesinin ekran görüntüsü.

Razor söz @helper dizimi, görünümlerinizde kullanmak üzere kendi yardımcı işlevlerinizi oluşturmayı oldukça kolaylaştırdı. /Views/StoreManager/Index.cshtml görünümünü açın ve aşağıdaki kodu doğrudan satırın @model arkasına ekleyin.

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

Bu yardımcı yöntem bir dize ve izin verilen en fazla uzunluğu alır. Sağlanan metin belirtilen uzunluktan kısaysa, yardımcı olduğu gibi çıkışını verir. Daha uzunsa, metni kısaltıp "..." işlemini işler geri kalanı için.

Artık Hem Albüm Başlığı hem de Sanatçı Adı özelliklerinin 25 karakterden az olmasını sağlamak için Truncate yardımcımızı kullanabiliriz. Yeni Truncate yardımcımızı kullanan tam görünüm kodu aşağıda görünür.

@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>

Artık /StoreManager/ URL'sine göz attığımızda albümler ve başlıklar maksimum uzunluklarımızın altında tutulur.

Truncate yardımcı işlemi sonrasında iki uzun sanatçı adı ve iki uzun albüm adının kırmızı dikdörtgenlerle vurgulandığı albüm listesinin ekran görüntüsü.

Not: Bu, tek bir görünümde yardımcı oluşturma ve kullanma işleminin basit bir örneğini gösterir. Siteniz genelinde kullanabileceğiniz yardımcılar oluşturma hakkında daha fazla bilgi edinmek için blog gönderime bakın: http://bit.ly/mvc3-helper-options

Önceki Sonraki

Aracılığıyla paylaş