ASP.NET MVC 4 Yardımcılar, Formlar ve Doğrulama

Web 'de Camps ekibine göre

Web Camps eğitim setini indirin

ASP.NET MVC 4 modeller ve veri erişimi uygulamalı laboratuvarda, veritabanından verileri yüklüyor ve görüntülüyor olursunuz. Bu uygulamalı laboratuvarda, müzik deposu uygulamasına verileri düzenleme özelliği ekleyebilirsiniz.

Bu amaç göz önünde bulundurularak öncelikle Albümler 'in oluşturma, okuma, güncelleştirme ve silme (CRUD) eylemlerini destekleyecek olan denetleyiciyi oluşturacaksınız. Bir HTML tablosunda Albümler özelliklerini görüntülemek için ASP.NET MVC 'nin yapı iskelesi özelliğinden yararlanarak bir dizin görünümü şablonu oluşturacaksınız. Bu görünümü geliştirmek için uzun açıklamaları kesecek özel bir HTML Yardımcısı ekleyeceksiniz.

Daha sonra, veritabanı içindeki albümleri değiştirmenize olanak sağlayacak olan düzenleme ve oluşturma görünümlerini, açılan öğeler gibi form öğelerinin yardımıyla de ekleyeceksiniz.

Son olarak, kullanıcıların bir albümü silmesine izin verirsiniz ve ayrıca bu kişilerin girişlerini doğrulayarak yanlış veri girmesini engelleyebilirsiniz.

Bu uygulamalı laboratuvar, ASP.NET MVC'nin temel bilgisine sahip olduğunuzu varsayar. Daha önce ASP.NET MVC kullandıysanız, ASP.NET MVC temelleri uygulamalı laboratuvarına gitmeniz önerilir.

Bu laboratuvar, daha önce kaynak klasörde sunulan örnek bir Web uygulamasına küçük değişiklikler uygulayarak açıklanan geliştirmeler ve yeni özellikler konusunda size kılavuzluk eder.

Note

Tüm örnek kod ve kod parçacıkları, Microsoft-Web/Webkamptraıningkit sürümlerindekullanılabilen Web Camps eğitim seti ' ne dahildir. Bu laboratuvara özgü proje, ASP.NET MVC 4 yardımcıları, formları ve doğrulamasındabulunabilir.

Amaçlar

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:

  • CRUD işlemlerini desteklemek için bir denetleyici oluşturma
  • Bir HTML tablosunda varlık özelliklerini görüntülemek için bir dizin görünümü oluşturma
  • Özel HTML Yardımcısı ekleme
  • Düzenleme görünümü oluşturma ve özelleştirme
  • HTTP-GET veya HTTP-POST çağrılarına tepki veren eylem yöntemlerine göre ayrım yapın
  • Oluşturma görünümü ekleme ve özelleştirme
  • Bir varlığın silinmesini işleme
  • Kullanıcı girişini doğrulama

Önkoşullar

Bu Laboratuvarı tamamlayabilmeniz için aşağıdaki öğelere sahip olmanız gerekir:

Kurulum

Kod parçacıklarını yükleme

Kolaylık olması için, bu laboratuvar boyunca yönettiğiniz kodun çoğu Visual Studio kod parçacıkları olarak sunulmaktadır. Kod parçacıklarını yüklemek için .\Source\Setup\CodeSnippets.vsi dosyasını çalıştırın.

Visual Studio Code parçacıkları hakkında bilginiz yoksa ve bunları nasıl kullanacağınızı öğrenmek isterseniz, Ek B: kod parçacıkları"kullanarak bu belgedeki eke başvurabilirsiniz ".


Alıştırmalarda

Aşağıdaki alıştırmalarda bu uygulamalı laboratuvar yapılır:

  1. Mağaza Yöneticisi denetleyicisi ve onun dizin görünümü oluşturuluyor
  2. HTML Yardımcısı ekleme
  3. Düzenleme görünümü oluşturuluyor
  4. Oluşturma görünümü ekleme
  5. Silme Işlemi işleniyor
  6. Doğrulama Ekleme
  7. Istemci tarafında unobtrusive jQuery kullanma

Note

Her alıştırma, alıştırmaları tamamladıktan sonra elde etmeniz gereken sonuç çözümünü içeren bir son klasör ile birlikte sunulur. Bu çözümü, alýþtýrmalar üzerinden çalışarak daha fazla yardıma ihtiyacınız varsa kılavuz olarak kullanabilirsiniz.

Bu Laboratuvarı tamamlamaya yönelik tahmini süre: 60 dakika

Alıştırma 1: mağaza yöneticisi denetleyicisi ve onun dizin görünümü oluşturuluyor

Bu alıştırmada, CRUD işlemlerini desteklemek için yeni bir denetleyici oluşturmayı ve son olarak ASP.NET MVC 'nin yapı iskelesi avantajlarından yararlanarak bir dizin görünümü şablonu oluşturmayı öğreneceksiniz. bir HTML tablosunda Albümler özelliklerini görüntüleme özelliği.

Görev 1-StoreManagerController oluşturma

Bu görevde, CRUD işlemlerini desteklemek için Storemanagercontroller adlı yeni bir denetleyici oluşturacaksınız.

  1. Kaynak/Ex1-Creatingdepotoremanagercontroller/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.

    1. Devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Yeni bir denetleyici ekleyin. Bunu yapmak için Çözüm Gezgini içindeki denetleyiciler klasörüne sağ tıklayın, Ekle ve sonra Denetleyici komutunu seçin. Denetleyici adını storemanagercontroller olarak değiştirin ve MVC Controller seçeneğinin boş okuma/yazma eylemleri seçildiğinden emin olun. Ekle'yi tıklatın.

    Denetleyici Ekle iletişim kutusu

    Denetleyici Ekle Iletişim kutusu

    Yeni bir denetleyici sınıfı oluşturulur. Okuma/yazma eylemleri eklemek için belirttiğiniz için, genel CRUD eylemleri, TODO açıklamaları doldurulmuş olarak oluşturulur ve uygulamaya özel mantık dahil etmek isteyip istemediğini sorar.

Görev 2-StoreManager dizinini özelleştirme

Bu görevde, veritabanından Albümler listesini içeren bir görünüm döndürmek için StoreManager Dizin eylemi yöntemini özelleştirecek olursunuz.

  1. StoreManagerController sınıfında, aşağıdaki using yönergelerini ekleyin.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve formları ve doğrulama-Ex1, MvcMusicStore kullanarak)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. Bir Musicstoreentities örneği tutmak Için storemanagercontroller öğesine bir alan ekleyin.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex1 MusicStoreEntities)

    public class StoreManagerController : Controller
    {
        private MusicStoreEntities db = new MusicStoreEntities();
    
  3. Albümler listesini içeren bir görünüm döndürmek için StoreManagerController Dizin eylemini uygulayın.

    Denetleyici eylemi mantığı, daha önce yazılan StoreController 'ın Dizin eylemine çok benzer olacaktır. Görüntülenecek tarz ve sanatçı bilgileri de dahil olmak üzere tüm albümlerini almak için LINQ kullanın.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex1 StoreManagerController dizini)

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

Görev 3-dizin görünümü oluşturma

Bu görevde, Storemanager denetleyicisi tarafından döndürülen albüm listesini görüntülemek Için dizin görünümü şablonu oluşturacaksınız.

  1. Yeni görünüm şablonunu oluşturmadan önce, görünümü Ekle Iletişim kutusunun kullanılacak Albüm sınıfını bilmesi için projeyi derlemeniz gerekir. Derlemeyi Seç | Projeyi derlemek için MvcMusicStore oluşturun .

  2. Dizin eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.

    Görünüm Ekle

    Dizin yönteminin içinden bir görünüm ekleme

  3. Görünüm Ekle iletişim kutusunda görünüm adının Dizinolduğunu doğrulayın. Kesin olarak belirlenmiş görünüm oluştur seçeneğini belirleyin ve model sınıfı açılır listesinden Albüm (Mvcmusicstore. modeller) seçeneğini belirleyin. Yapı iskelesi şablonu açılır listesinden liste ' yi seçin. Görünüm altyapısını Razor 'e ve diğer alanlara varsayılan değerlerini kullanarak bırakın ve Ekle' ye tıklayın.

    Dizin görünümü ekleme

    Dizin görünümü ekleme

Görev 4-dizin görünümünün scafkatlama 'ını özelleştirme

Bu görevde, istediğiniz alanları görüntülemesi için ASP.NET MVC scafkatlama özelliğiyle oluşturulan basit görünüm şablonunu ayarlayacaksınız.

Note

ASP.NET MVC içindeki scafkatlama desteği, albüm modelindeki tüm alanları listeleyen basit bir görünüm şablonu oluşturur. Yapı iskelesi , türü kesin belirlenmiş bir görünüme başlamak için hızlı bir yol sağlar: görünüm şablonunu el ile yazmak yerine, scafkatlama hızlı bir şekilde varsayılan şablon oluşturur ve oluşturulan kodu değiştirebilirsiniz.

  1. Oluşturulan kodu gözden geçirin. Oluşturulan alanların listesi, Yapı verilerini görüntülemek için kullanılan aşağıdaki HTML tablosunun bir parçası olacaktır.

    @model IEnumerable<MvcMusicStore.Models.Album>
    
    @{
         ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <p>
         @Html.ActionLink("Create New", "Create")
    </p>
    <table>
         <tr>
              <th>
                    @Html.DisplayNameFor(model => model.GenreId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.ArtistId)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Title)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.Price)
              </th>
              <th>
                    @Html.DisplayNameFor(model => model.AlbumArtUrl)
              </th>
              <th></th>
         </tr>
    
    @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.DisplayFor(modelItem => item.GenreId)
              </td>
              <td>
                    @Html.DisplayFor(modelItem => item.ArtistId)
              </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>
    
  2. Yalnızca tarz, sanatçı, albüm başlığıve Fiyat alanlarını göstermek için <tablo> kodu aşağıdaki kodla değiştirin. Bu, Albümkimliği ve Albüm sanatı URL 'si sütunlarını siler. Ayrıca, Genreıd ve ArtistId sütunlarını, artist.Name ve genre.Name'nin bağlı sınıf özelliklerini görüntüleyecek şekilde değiştirir ve Ayrıntılar bağlantısını kaldırır.

    <table>
        <tr>
          <th></th>
          <th>Genre</th>
          <th>Artist</th>
          <th>Title</th>
          <th>Price</th>
        </tr>
    
        @foreach (var item in Model) {
         <tr>
              <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
                    @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
              </td>
              <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>
         </tr>
        }
    </table>
    
  3. Aşağıdaki açıklamaları değiştirin.

    @model IEnumerable<MvcMusicStore.Models.Album>
    @{
        ViewBag.Title = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

5. Görev-uygulamayı çalıştırma

Bu görevde, Storemanager Dizin görünümü şablonunun önceki adımların tasarımına göre Albümler listesini görüntülediğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. Bir albüm listesinin başlık, sanatçı ve tarzlarınıgöstererek görüntülendiğini doğrulamak için URL 'yi /storemanager olarak değiştirin.

    Albümler listesine göz atma

    Albümler listesine göz atma

Alıştırma 2: HTML Yardımcısı ekleme

StoreManager Dizin sayfasında bir olası sorun vardır: başlık ve sanatçı adı özelliklerinin ikisi de tablo biçimlendirmesini oluşturmak için yeterince uzun olabilir. Bu alıştırmada, bu metni kesmek için özel bir HTML Yardımcısı eklemeyi öğreneceksiniz.

Aşağıdaki şekilde, küçük bir tarayıcı boyutu kullanırken metnin uzunluğu nedeniyle biçimin nasıl değiştirildiğini görebilirsiniz.

Kesilmedi metin içeren albümler listesine göz atma

Kesilmedi metin içeren albümler listesine göz atma

Görev 1-HTML yardımcısını genişletme

Bu görevde, ASP.NET MVC görünümleri içinde kullanıma sunulan HTML nesnesine Truncate 'e yeni bir yöntem ekleyeceksiniz. Bunu yapmak için, ASP.NET MVC tarafından sunulan yerleşik System. Web. Mvc. HtmlHelper sınıfına bir genişletme yöntemi uygulayacaksınız.

Note

Uzantı yöntemlerihakkında daha fazla bilgi için lütfen bu MSDN makalesini ziyaret edin. https://msdn.microsoft.com/library/bb383977.aspx.

  1. Kaynak/EX2-AddingAnHTMLHelper/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. StoreManager 'ın Dizin görünümünü açın. Bunu yapmak için, Çözüm Gezgini views klasörünü ve ardından storemanager ' ı genişletin ve Index. cshtml dosyasını açın.

  3. Truncate Helper metodunu tanımlamak için @model yönergesinin altına aşağıdaki kodu ekleyin.

    @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 = "Store Manager - All Albums";
    }
    
    <h2>Albums</h2>
    

Görev 2-sayfada metin kesiliyor

Bu görevde, görünüm şablonundaki metni kesmek için Truncate metodunu kullanacaksınız.

  1. StoreManager 'ın Dizin görünümünü açın. Bunu yapmak için, Çözüm Gezgini views klasörünü ve ardından storemanager ' ı genişletin ve Index. cshtml dosyasını açın.

  2. Sanatçı adını ve albümün başlığınıgösteren satırları değiştirin. Bunu yapmak için aşağıdaki satırları değiştirin.

    <tr>
         <td>
              @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
    
              @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
         </td>
         <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>
    </tr>
    

Görev 3-uygulamayı çalıştırma

Bu görevde, Storemanager Dizin görünümü şablonunun albümün başlığını ve sanatçı adını kesen test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. Başlık ve sanatçı sütunundaki uzun metinlerin KESILDIĞINI doğrulamak için URL 'yi /storemanager olarak değiştirin.

    Kesilen başlıklar ve sanatçı adları

    Kesilen başlıklar ve sanatçı adları

Alıştırma 3: düzenleme görünümü oluşturma

Bu alıştırmada, Mağaza yöneticilerinin bir albümü düzenlemesine izin vermek için form oluşturmayı öğreneceksiniz. /Storemanager/Edit/ID URL 'ye gözatacağız (kimliği düzenlenecek albümün benzersiz kimliği olan kimlik), bu nedenle sunucuya http-get çağrısı yapılıyor.

Denetleyici düzenleme eylemi yöntemi, veritabanından uygun albümü alır, kapsüllemek için bir Storemanagerviewmodel nesnesi oluşturur (sanatçı ve tarzların listesi ile birlikte) ve ardından HTML sayfasını kullanıcıya geri işlemek Için bir görünüm şablonuna geçirin. Bu sayfada, albüm özelliklerini düzenlemede metin kutuları ve açılan öğeler içeren bir <form> öğesi bulunur.

Kullanıcı, albüm formu değerlerini güncelleştirdikten ve Kaydet düğmesine tıkladığında, DEĞIŞIKLIKLER bir http-post çağrısıyla /Storemanager/Edit/IDöğesine geri gönderilir. URL son çağrıdaki ile aynı kalsa da, ASP.NET MVC bu zamanın bir HTTP-POST olduğunu belirler ve bu nedenle farklı bir düzenleme eylemi yöntemi yürütür (bir tane [HttpPost] ile donatılmış).

Görev 1-HTTP-GET düzenleme eylemi yöntemini uygulama

Bu görevde, veritabanından uygun albümü ve tüm tarzların ve sanatçıların listesini almak için düzenleme eylemi yönteminin HTTP-GET sürümünü uygulayacaksınız. Bu verileri, yanıtı işlemek için bir görünüm şablonuna geçirilecek son adımda tanımlanan Storemanagerviewmodel nesnesine göre paketleyebilir.

  1. Kaynak/Ex3-CreatingTheEditView/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Storemanagercontroller sınıfını açın. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.

  3. Uygun albümün yanı sıra tarzların ve sanatçıların listesini almak için http-get düzenleme eylemi yöntemini aşağıdaki kodla değiştirin.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex3 StoreManagerController http-düzenleme EYLEMINI al)

    public ActionResult Edit(int id)
    {
        Album album = this.db.Albums.Find(id);
    
        if (album == null)
        {
             return this.HttpNotFound();
        }
    
        this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
        this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);
    
        return this.View(album);
    }
    

    Note

    System. Collections. Generic listesi yerine sanatçı ve tarzlar için System. Web. Mvc SelectList öğesini kullanıyorsunuz.

    SelectList , HTML açılan listelerini doldurmak ve geçerli seçim gibi şeyleri yönetmek için temizleyici bir yoldur. Denetleyici eyleminde bu ViewModel nesnelerinin örneklendirime ve daha sonra ayarlanması, düzenleme formu senaryosunu temizleyici hale getirir.

Görev 2-düzenleme görünümü oluşturma

Bu görevde, daha sonra albüm özelliklerini görüntüleyecek olan bir düzenleme görünümü şablonu oluşturacaksınız.

  1. Düzenleme görünümünü oluşturun. Bunu yapmak için, eylemi Düzenle yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin.

  2. Görünüm Ekle iletişim kutusunda görünüm adının düzenlendiğinidoğrulayın. Türü kesin belirlenmiş görünüm oluştur onay kutusunu işaretleyin ve veri sınıfı açılır listesinden Albüm (Mvcmusicstore. modeller) seçeneğini belirleyin. Yapı iskelesi şablonu açılır listesinden Düzenle ' yi seçin. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.

    Düzenleme görünümü ekleme

    Düzenleme görünümü ekleme

Görev 3-uygulamayı çalıştırma

Bu görevde, Storemanager düzenleme görünümü sayfasının, albüm olarak geçirilmiş parametre değerlerini görüntülemesini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. Geçirilen albümün özelliklerinin görüntülendiğini doğrulamak için /Storemanager/Edit/1 URL 'sini değiştirin.

    Albümün düzenleme görünümüne göz atma

    Albümün düzenleme görünümüne göz atma

Görev 4-albüm Düzenleyicisi şablonunda açılan listeleri uygulama

Bu görevde, kullanıcının sanatçı ve tarzların listesinden seçim yapabilmesi için son görevde oluşturulan görünüm şablonuna açılan listeleri ekleyeceksiniz.

  1. Tüm Albüm alan kümesi kodunu aşağıdaki kodla değiştirin:

    <fieldset>
         <legend>Album</legend>
    
         @Html.HiddenFor(model => model.AlbumId)
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Title)
              @Html.ValidationMessageFor(model => model.Title)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Price)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.Price)
              @Html.ValidationMessageFor(model => model.Price)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.AlbumArtUrl)
         </div>
         <div class="editor-field">
              @Html.EditorFor(model => model.AlbumArtUrl)
              @Html.ValidationMessageFor(model => model.AlbumArtUrl)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Artist)
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Genre)
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <p>
              <input type="submit" value="Save" />
         </p>
    </fieldset>
    

    Note

    Sanatçı ve tarzların seçilmesi için işleme açılan listeleri için bir HTML. DropDownList Yardımcısı eklenmiştir. HTML. DropDownList 'e geçirilen parametreler şunlardır:

    1. Form alanının adı ( "ArtistId" ).
    2. Açılan listenin selectvalues listesi .

5. Görev-uygulamayı çalıştırma

Bu görevde, Storemanager düzenleme görünümü SAYFASıNıN sanatçı ve tarz kimliği metin alanları yerine açılan listeleri görüntülediğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. Sanatçı ve tarz KIMLIĞI metin alanları yerine açılan listeleri görüntülediğini doğrulamak için URL 'YI /Storemanager/Edit/1 olarak değiştirin.

    Açılır liste ile albümün düzenleme görünümüne göz atma

    Albümün düzenleme görünümüne göz atma, bu sefer açılan listeleri

Görev 6-HTTP-POST düzenleme eylem yöntemini uygulama

Artık düzenleme görünümü beklendiği gibi görüntülediğine göre, albüme yapılan değişiklikleri kaydetmek için HTTP-POST düzenleme eylemi yöntemini uygulamanız gerekir.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın. Storemanagercontroller ' i denetleyiciler klasöründen açın.

  2. Http-post düzenleme eylemi yöntemi kodunu aşağıdaki kodla değiştirin (yerine geçecek yöntemin iki parametre alan aşırı yüklenmiş sürümü olduğunu unutmayın):

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex3 StoreManagerController http-düzenleme sonrası eylemi)

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

    Note

    Bu yöntem, Kullanıcı görünümün Kaydet düğmesine tıkladığında ve veritabanında kalıcı hale getirmek için form değerlerini sunucuya geri gönderirse yürütülür. Dekoratör [HttpPost] , YÖNTEMIN bu http-post senaryolarında kullanılması gerektiğini belirtir. Yöntemi bir Albüm nesnesi alır. ASP.NET MVC, albüm nesnesini, postalanan <form> değerlerinden otomatik olarak oluşturur.

    Yöntemi şu adımları gerçekleştirir:

    1. Model geçerliyse:

      1. Bağlam içindeki albüm girişini, değiştirilen bir nesne olarak işaretlemek için güncelleştirin.
      2. Değişiklikleri kaydedin ve dizin görünümüne yeniden yönlendirin.
    2. Model geçerli değilse, ViewBag 'i Genreıd ve ArtistIdile doldurur ve bu durumda kullanıcının gerekli bir güncelleştirmeyi gerçekleştirmesini sağlamak için alınan albüm nesnesiyle birlikte görünümü döndürür.

Görev 7-uygulamayı çalıştırma

Bu görevde, Storemanager düzenleme görünümü sayfasının güncelleştirilmiş albüm verilerini veritabanına kaydettiğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanager/Edit/1olarak değiştirin. Albüm başlığını yüklenecek şekilde değiştirin ve Kaydet' e tıklayın. Albümün başlığının, Albümler listesinde gerçekten değiştirildiğini doğrulayın.

    Bir albümü güncelleştirme

    Bir albümü güncelleştirme

Alıştırma 4: oluşturma görünümü ekleme

Artık Storemanagercontroller düzenleme özelliğini desteklediğine göre, Bu alıştırmada, Mağaza yöneticilerinin uygulamaya yeni albümler eklemesine Izin vermek için create VIEW şablonu ekleme hakkında bilgi edineceksiniz.

Düzenleme işlevselliğiyle yaptığınız gibi, Storemanagercontroller sınıfı içinde iki ayrı yöntem kullanarak oluşturma senaryosunu uygulayacaksınız:

  1. Mağaza yöneticileri ilk olarak /Storemanager/Create URL 'yi ziyaret ettiğinde bir eylem yöntemi boş bir form görüntüler.
  2. İkinci bir eylem yöntemi, mağaza yöneticisinin form içindeki Kaydet düğmesine tıkladığı ve DEĞERLERI bir http-post olarak /Storemanager/Create URL 'sine geri gönderdiği senaryoyu işleymeyecektir.

Görev 1-HTTP-GET Create action metodunu uygulama

Bu görevde, tüm tarzların ve sanatçıların bir listesini almak için Create ACTION yönteminin HTTP-GET sürümünü uygulayacaksınız, bu verileri bir Storemanagerviewmodel nesnesine paketleyip, daha sonra bir görünüm şablonuna geçirilecek.

  1. Kaynak/EX4-AddingACreateView/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Storemanagercontroller sınıfını açın. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.

  3. Oluşturma eylemi Yöntem kodunu aşağıdaki kodla değiştirin:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-EX4 StoreManagerController http-oluşturma EYLEMINI al)

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

Görev 2-oluştur görünümü ekleme

Bu görevde, yeni (boş) bir albüm formu görüntüleyen oluştur görünüm şablonunu ekleyeceksiniz.

  1. Oluşturma eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.

  2. Görünüm Ekle iletişim kutusunda görünüm adının Oluştur' u doğrulayın. Türü kesin belirlenmiş görünüm oluştur seçeneğini belirleyin ve model sınıfı açılır listesinden Albüm (Mvcmusicstore. modeller) öğesini seçin ve Yapı iskelesi şablonu açılır listesinden Oluştur ' u seçin. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.

    Oluşturma görünümü ekleme

    Oluşturma görünümü ekleme

  3. Genreıd ve ArtistId alanlarını aşağıda gösterildiği gibi bir açılan liste kullanacak şekilde güncelleştirin:

    ...
    <fieldset>
         <legend>Album</legend>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.GenreId, "Genre")
         </div>
         <div class="editor-field">
              @Html.DropDownList("GenreId", String.Empty)
              @Html.ValidationMessageFor(model => model.GenreId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.ArtistId, "Artist")
         </div>
         <div class="editor-field">
              @Html.DropDownList("ArtistId", String.Empty)
              @Html.ValidationMessageFor(model => model.ArtistId)
         </div>
    
         <div class="editor-label">
              @Html.LabelFor(model => model.Title)
         </div>
        ...
    

Görev 3-uygulamayı çalıştırma

Bu görevde, Storemanager oluşturma görünümü sayfasının boş bir albüm formu görüntülediğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanager/Createolarak değiştirin. Yeni albüm özelliklerini doldurmak için boş bir form görüntülendiğini doğrulayın.

    Boş bir formla görünüm oluştur

    Boş bir formla görünüm oluştur

Görev 4-HTTP-POST oluşturma eylemi yöntemi uygulama

Bu görevde, Kullanıcı Kaydet düğmesine tıkladığında çağrılacak olan Create ACTıON yönteminin http-post sürümünü uygulayacaksınız. Yöntemi, yeni albümü veritabanına kaydetmeniz gerekir.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın. Storemanagercontroller sınıfını açın. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.

  2. Http-post oluşturma eylemi yöntemi kodunu aşağıdaki kodla değiştirin:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-EX4 StoreManagerController http-oluşturma sonrası eylem)

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

    Note

    Oluşturma eylemi, önceki düzenleme eylemi yöntemine oldukça benzer, ancak nesneyi değiştirilmiş olarak ayarlamak yerine bağlamına ekleniyor.

5. Görev-uygulamayı çalıştırma

Bu görevde, Storemanager oluşturma görünümü sayfasının yeni bir albüm oluşturup ardından Storemanager dizin görünümüne yönlendirmenizi sağlayan bir test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanager/Createolarak değiştirin. Tüm form alanlarını, aşağıdaki şekilde olduğu gibi yeni bir albüm için verilerle birlikte doldurabilirsiniz:

    Albüm oluşturma

    Albüm oluşturma

  3. Yeni oluşturduğunuz albümü içeren StoreManager dizin görünümüne yönlendirildiğinizi doğrulayın.

    Yeni albüm oluşturuldu

    Yeni albüm oluşturuldu

Alıştırma 5: Işlemeyi silme

Albümleri silme özelliği henüz uygulanmadı. Bu alıştırmada ilgili olacak. Daha önce olduğu gibi, Storemanagercontroller sınıfı içinde iki ayrı yöntem kullanarak silme senaryosunu uygulayacaksınız:

  1. Bir eylem yönteminde bir onay formu görüntülenir
  2. İkinci bir eylem yöntemi, form gönderimini işleyecek

Görev 1-HTTP-GET silme eylemini uygulama yöntemi

Bu görevde, albümün bilgilerini almak için silme eylemi yönteminin HTTP-Al sürümünü uygulayacaksınız.

  1. Kaynak/eX5-el Lingsilme/başlangıç/ klasör konumunda bulunan Başlangıç çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Storemanagercontroller sınıfını açın. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.

  3. Denetleyiciyi Sil eylemi, önceki depo ayrıntıları denetleyicisi eylemiyle tamamen aynıdır: URL 'de belirtilen kimliği kullanarak Albüm nesnesini veritabanından sorgular ve uygun görünümüdöndürür. Bunu yapmak için, HTTP-GET Delete ACTION yöntemi kodunu aşağıdaki kodla değiştirin:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-eX5 Işleme SILME http-silme EYLEMINI al)

    //
    // GET: /StoreManager/Delete/5
    
    public ActionResult Delete(int id)
    {
         Album album = this.db.Albums.Find(id);
    
         if (album == null)
         {
              return this.HttpNotFound();
         }
    
         return this.View(album);
    }
    
  4. Silme eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.

  5. Görünüm Ekle iletişim kutusunda görünüm adının silmeolduğunu doğrulayın. Kesin olarak belirlenmiş görünüm oluştur seçeneğini belirleyin ve model sınıfı açılır listesinden Albüm (Mvcmusicstore. modeller) seçeneğini belirleyin. Yapı iskelesi şablonu açılır listesinden Sil ' i seçin. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.

    Silme görünümü ekleme

    Silme görünümü ekleme

  6. Şablonu Sil, modeldeki tüm alanları gösterir. Yalnızca albümün başlığını gösterebilirsiniz. Bunu yapmak için, görünümün içeriğini aşağıdaki kodla değiştirin:

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

Görev 2-uygulamayı çalıştırma

Bu görevde, Storemanager silme görünümü sayfasının bir onay silme formu görüntülediğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanagerolarak değiştirin. Sil ' e tıklayarak silinecek bir albüm seçin ve yeni görünümün karşıya yüklendiğini doğrulayın.

    Bir albümü silme

    Bir albümü silme

Görev 3-HTTP-Delete silme eyleminin uygulanması yöntemi

Bu görevde, Kullanıcı Sil düğmesine tıkladığında çağrılacak silme EYLEMI yönteminin http-post sürümünü uygulayacaksınız. Yöntemi, veritabanındaki albümü silmelidir.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın. Storemanagercontroller sınıfını açın. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.

  2. Http-post Delete ACTION yöntemi kodunu aşağıdaki kodla değiştirin:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-eX5 Işleme SILME http-SILME sonrası eylemi)

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

Görev 4-uygulamayı çalıştırma

Bu görevde, Storemanager silme görünümü sayfasının bir albümü silmesine ve sonra Storemanager dizin görünümüne yönlendirmenize olanak tanıyan test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanagerolarak değiştirin. Sil ' e tıklayarak silinecek bir albümü seçin . Sil düğmesine tıklayarak silmeyi onaylayın:

    Bir albümü silme

    Bir albümü silme

  3. Dizin sayfasında görünmediğinden albümün silindiğini doğrulayın.

Alıştırma 6: doğrulama ekleme

Şu anda, yerinde oluşturduğunuz oluşturma ve düzenleme formları herhangi bir tür doğrulama gerçekleştirmez. Kullanıcı gerekli bir alanı boş bırakır veya fiyat alanında harfler yazarsanız, alacağınız ilk hata veritabanından alınır.

Model sınıfınıza veri ek açıklamaları ekleyerek uygulamaya doğrulama ekleyebilirsiniz. Veri ek açıklamaları, model özelliklerine uygulanmasını istediğiniz kuralların açıklanarak ASP.NET MVC, kullanıcılara uygun iletileri zorlamaya ve görüntülemeye yönelik bir işlem gerçekleştirir.

Görev 1-veri ek açıklamaları ekleme

Bu görevde, uygun olduğunda oluşturma ve düzenleme sayfasının doğrulama iletilerini görüntülemesi için, albüm modeline veri ek açıklamaları ekleyeceksiniz.

Basit bir model sınıfı için, bir veri ek açıklaması eklemek, System. ComponentModel. DataAnnotationiçin bir using açıklaması eklenerek ve ardından uygun özelliklere bir [Required] özniteliği yerleştirerek işlenir. Aşağıdaki örnek, ad özelliğini görünümünde gerekli bir alan haline getirir.

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

Bu, Varlık Veri Modeli oluşturulduğu bu uygulama gibi durumlarda biraz daha karmaşıktır. Doğrudan model sınıflarına veri ek açıklamaları eklediyseniz, modeli veritabanından güncelleştirirseniz bunların üzerine yazılır. Bunun yerine, ek açıklamaları tutmak için var olan ve [Metadatatype] özniteliğini kullanan model sınıflarıyla ilişkili olan meta veri kısmi sınıflarının kullanımını sağlayabilirsiniz.

  1. Kaynak/Ex6-AddingValidation/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Modeller klasöründen Album.cs öğesini açın.

  3. Album.cs içeriğini vurgulanan kodla değiştirin, böylece aşağıdakine benzer şekilde görünür:

    Note

    Satır [DisplayFormat (ConvertEmptyStringToNull = false)] , veri alanı veri kaynağında güncellendiğinde, modeldeki boş dizelerin null olarak dönüştürülmeyeceğini gösterir. Bu ayar, Entity Framework veri ek açıklaması alanları doğrulamaktan önce modele null değerler atarken bir özel durumu ortadan kaldırır.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex6 albüm meta verileri kısmi sınıfı)

    namespace MvcMusicStore.Models
    {
        using System.ComponentModel;
        using System.ComponentModel.DataAnnotations;
    
        public class Album
        {
            [ScaffoldColumn(false)]
            public int AlbumId { get; set; }
    
            [DisplayName("Genre")]
            public int GenreId { get; set; }
    
            [DisplayName("Artist")]
            public int ArtistId { get; set; }
    
            [Required(ErrorMessage = "An Album Title is required")]
            [DisplayFormat(ConvertEmptyStringToNull = false)]
            [StringLength(160, MinimumLength = 2)]
            public string Title { get; set; }
    
            [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
            [DataType(DataType.Currency)]
            public decimal Price { get; set; }
    
            [DisplayName("Album Art URL")]
            [DataType(DataType.ImageUrl)]
            [StringLength(1024)]
            public string AlbumArtUrl { get; set; }
    
            public virtual Genre Genre { get; set; }
    
            public virtual Artist Artist { get; set; }
        }
    }
    

    Note

    Bu albümün kısmi sınıfı, veri ek açıklamaları Için albümümetadata sınıfına Işaret eden bir metadatatype özniteliğine sahiptir. Bunlar, albüm modeline ek açıklama eklemek için kullandığınız bazı veri ek açıklama öznitelikleri şunlardır:

    • Gerekli-özelliğin gerekli bir alan olduğunu belirtir
    • DisplayName-form alanlarında ve doğrulama iletilerinde kullanılacak metni tanımlar
    • DisplayFormat-veri alanlarının nasıl görüntülendiğini ve biçimlendirildiğini belirtir.
    • StringLength-dize alanı için maksimum uzunluğu tanımlar
    • Range-sayısal bir alan için en yüksek ve en küçük değeri verir
    • ScaffoldColumn-düzenleyici formlarından alanları gizlemeye Izin verir

Görev 2-uygulamayı çalıştırma

Bu görevde, son görevde seçilen görünen adları kullanarak sayfaların oluşturulması ve düzenlenmesi alanlarını doğruladığını test edersiniz.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.

  2. Proje giriş sayfasında başlar. URL 'YI /Storemanager/Createolarak değiştirin. Görünen adların, kısmi sınıftaki (albümle Ilgili Albüm sanatı URL 'si gibi) eşleşen olanlarla eşleştiğini doğrulayın

  3. Formu doldurmadan Oluştur' a tıklayın. Karşılık gelen doğrulama iletilerini almanızı doğrulayın.

    Oluştur sayfasındaki doğrulanan alanlar

    Oluştur sayfasındaki doğrulanan alanlar

  4. Aynı olduğunu, düzenleme sayfasıyla aynı olduğunu doğrulayabilirsiniz. URL 'YI /Storemanager/Edit/1 olarak değiştirin ve görünen adların kısmi sınıftaki ( albüm için albümünüz yerine albüm sanatı URL 'si gibi) eşleşipeşleştiğini doğrulayın. Başlığı ve fiyat alanlarını boşaltın ve Kaydet' e tıklayın. Karşılık gelen doğrulama iletilerini almanızı doğrulayın.

    Düzenleme sayfasında doğrulanan alanlar

    Düzenleme sayfasında doğrulanan alanlar

Alıştırma 7: Istemci tarafında unobtrusive jQuery kullanma

Bu alıştırmada, istemci tarafında MVC 4 unobtrusive doğrulamasını nasıl etkinleştireceğinizi öğreneceksiniz.

Note

Unobtrusive jQuery, satır içi istemci betikleri dahil etmek yerine sunucuda eylem yöntemlerini çağırmak için Data-Ajax ön eki JavaScript 'ı kullanır.

Görev 1-Obtrusive jQuery 'ı etkinleştirmeden önce uygulamayı çalıştırma

Bu görevde, her iki doğrulama modelini de karşılaştırmak için jQuery 'i eklemeden önce uygulamayı çalıştıracaksınız.

  1. Kaynak/Ex7-UnobtrusivejQueryValidation/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar. NuGet güç araçlarıyla, Packages. config dosyasındaki paket sürümlerini belirterek, projeyi ilk kez çalıştırdığınızda gerekli tüm kitaplıkları indirebilirsiniz. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.

  2. Uygulamayı çalıştırmak için F5'e basın.

  3. Proje giriş sayfasında başlar. Doğrulama iletilerini aldığını doğrulamak için /Storemanager/Create ' e gözatıp Formu doldurmadan Oluştur ' a tıklayın:

    İstemci doğrulaması devre dışı

    İstemci doğrulaması devre dışı

  4. Tarayıcıda, HTML kaynak kodunu açın:

    ...
              <div class="editor-label">
                    <label for="Price">Price</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                    <span class="field-validation-valid" id="Price_validationMessage"></span>
              </div>
    
              <div class="editor-label">
                    <label for="AlbumArtUrl">Album Art URL</label>
              </div>
              <div class="editor-field">
                    <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                    <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
              </div>
    
              <p>
                    <input type="submit" value="Create" />
              </p>
         </fieldset>
    </form><script type="text/javascript">
    //<![CDATA[
    if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
    window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
    //]]>
    </script>
    ...
    

Görev 2-Obtrusive Istemci doğrulamasını etkinleştirme

Bu görevde, varsayılan olarak tüm New ASP.NET MVC 4 projelerinde false olarak ayarlanmış olan Web. config dosyasından jQuery unobtrusive istemci doğrulamasını etkinleştirecektir. Bunlara ek olarak, jQuery 'in Istemci doğrulaması işini sorunsuz hale getirmek için gerekli betiklerin başvurularını eklersiniz.

  1. Proje kökünde Web. config dosyasını açın ve ClientValidationEnabled ve Unobtrusivejavascriptenabled anahtarları değerlerinin trueolarak ayarlandığından emin olun.

    ...
    <configuration>
      <appSettings>
         <add key="webpages:Version" value="2.0.0.0" />
         <add key="webpages:Enabled" value="false" />
         <add key="PreserveLoginUrl" value="true" />
         <add key="ClientValidationEnabled" value="true" />
         <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    </appSettings>
    ...
    

    Note

    Aynı sonuçları almak için Global.asax.cs adresindeki kodla istemci doğrulamasını da etkinleştirebilirsiniz:

    HtmlHelper. ClientValidationEnabled = true;

    Ek olarak, özel bir davranışa sahip olmak için herhangi bir denetleyiciye ClientValidationEnabled özniteliğini de atayabilirsiniz.

  2. Views\storemanager'da Create. cshtml dosyasını açın.

  3. Aşağıdaki betik dosyalarının jQuery. Validate ve jQuery. Validate. unobtrusive' " ~/paketles/jqueryval" demeti aracılığıyla görünümde başvurulduğundan emin olun.

    ...
    @section Scripts {
         @Scripts.Render("~/bundles/jqueryval")
    }
    

    Note

    Tüm bu jQuery kitaplıkları MVC 4 yeni projelere dahil edilmiştir. Projenin /Scripts klasöründe daha fazla kitaplık bulabilirsiniz.

    Bu doğrulama kitaplıklarının çalışmasını sağlamak için jQuery Framework kitaplığına bir başvuru eklemeniz gerekir. Bu başvuru _Layout. cshtml dosyasına zaten eklendiğinden, bu görünümü bu görünüme eklemeniz gerekmez.

Görev 3-uygulamayı unobtrusive doğrulamasını kullanarak çalıştırma

Bu görevde, Kullanıcı yeni bir albüm oluşturduğunda Storemanager oluşturma görünüm şablonu jQuery kitaplıklarını kullanarak istemci tarafı doğrulaması gerçekleştireceğini test edersiniz.

  1. Uygulamayı çalıştırmak için F5'e basın.

  2. Proje giriş sayfasında başlar. Doğrulama iletilerini aldığını doğrulamak için /Storemanager/Create ' e gözatıp Formu doldurmadan Oluştur ' a tıklayın:

    JQuery özellikli istemci doğrulaması

    JQuery özellikli istemci doğrulaması

  3. Tarayıcıda, oluştur görünümü için kaynak kodunu açın:

    ...
    <div class="editor-label">
        <label for="Title">Title</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="Price">Price</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
    </div>
    
    <div class="editor-label">
        <label for="AlbumArtUrl">Album Art URL</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
    </div>        
    ...
    

    Note

    Her istemci doğrulama kuralı için unobtrusive jQuery, Data-Val-RuleName="Message"olan bir öznitelik ekliyor. Aşağıda, istemci doğrulaması gerçekleştirmek için, bir Untastrusjquery 'ın HTML giriş alanına eklediği etiketlerin listesi verilmiştir:

    • Veri-Val
    • Veri-değer-sayı
    • Veri Val aralığı
    • Veri-değer-aralığı-min/Data-Val-Range-Max
    • Veri-Val-gerekli
    • Veri-değer uzunluğu
    • Veri-değer-Uzunluk-Max/Data-Val-length-min

    Tüm veri değerleri model veri ek açıklamasıile doldurulur. Daha sonra, sunucu tarafında çalışan tüm mantık istemci tarafında çalıştırılabilir. Örneğin, Price özniteliği modelde aşağıdaki veri ek açıklamasına sahiptir:

    [Required(ErrorMessage = "Price is required")]
    [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
    public object Price { get; set; }
    

    Unobtrusive jQuery kullandıktan sonra, oluşturulan kod:

    <input data-val="true"
    data-val-number="The field Price must be a number."
    data-val-range="Price must be between 0.01 and 100.00"
    data-val-range-max="100"
    data-val-range-min="0.01"
    data-val-required="Price is required"
    id="Album_Price" name="Album.Price" type="text" value="0" />
    

Özet

Bu uygulamalı Laboratuvarı tamamlayarak, kullanıcıların veritabanında depolanan verileri aşağıdakilerin kullanımıyla nasıl değiştirdiklerini öğrendiniz:

  • Dizin, oluşturma, düzenleme, silme gibi denetleyici eylemleri
  • ASP.NET MVC 'nin bir HTML tablosunda özellikleri görüntülemek için yapı iskelesi özelliği
  • Kullanıcı deneyimini geliştirmek için özel HTML Yardımcıları
  • HTTP-GET veya HTTP-POST çağrılarına tepki veren eylem yöntemleri
  • Oluşturma ve düzenleme gibi benzer görünüm şablonlarına yönelik paylaşılan bir düzenleyici şablonu
  • Açılan öğeler gibi form öğeleri
  • Model doğrulaması için veri ek açıklamaları
  • JQuery unobtrusive kitaplığı kullanarak istemci tarafı doğrulaması

Ek A: Web için Visual Studio Express 2012 yükleme

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012 veya başka bir "Express" sürümü yükleyebilirsiniz. Aşağıdaki yönergeler Microsoft Web Platformu Yükleyicisikullanarak Web Için Visual Studio Express 2012 ' i yüklemek için gereken adımlarda size yol gösterir.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)gidin. Alternatif olarak, Web Platformu Yükleyicisi zaten yüklüyse, Microsoft Azure SDK"Ile Web için Visual Studio Express 2012 "ürünü açabilir ve bunu arayabilirsiniz.

  2. Şimdi yüklensin' e tıklayın. Web platformu yükleyicinizi yoksa, önce indirmek ve yüklemek üzere yönlendirilirsiniz.

  3. Web Platformu Yükleyicisi açıkken, kurulum 'u başlatmak için yükleme ' ye tıklayın.

    Visual Studio Express yüklensin

    Visual Studio Express yüklensin

  4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için kabul ediyorum ' a tıklayın.

    Lisans koşullarını kabul etme

    Lisans koşullarını kabul etme

  5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.

    Yükleme ilerleme durumu

    Yükleme ilerleme durumu

  6. Yükleme tamamlandığında son' a tıklayın.

    Yükleme tamamlandı

    Yükleme tamamlandı

  7. Web Platformu Yükleyicisi 'ni kapatmak için Çıkış ' a tıklayın.

  8. Web için Visual Studio Express açmak için Başlangıç ekranına gidin ve "vs Express"yazmaya başlayın ve ardından Web için vs Express kutucuğuna tıklayın.

    Web için VS Express kutucuğu

    Web için VS Express kutucuğu

Ek B: kod parçacıklarını kullanma

Kod parçacıkları ile, ihtiyacınız olan tüm koda parmaklarınızın elinizin altında olmasını sağlayabilirsiniz. Laboratuvar belgesi, aşağıdaki şekilde gösterildiği gibi, bunları yalnızca ne zaman kullanacağınızı söyleyecektir.

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanma

Klavyeyi kullanarak bir kod parçacığı eklemek için (C# yalnızca)

  1. Kodu eklemek istediğiniz yere imleci yerleştirin.
  2. Kod parçacığı adını yazmaya başlayın (boşluk veya tire olmadan).
  3. IntelliSense, eşleşen kod parçacıklarının adlarını gösterdiği gibi izleyin.
  4. Doğru kod parçacığını seçin (veya tüm kod parçacığının adı seçilene kadar yazmaya devam edin).
  5. Kod parçacığını imleç konumuna eklemek için SEKME tuşuna iki kez basın.

Kod parçacığı adını yazmaya başlayın

Kod parçacığı adını yazmaya başlayın

Vurgulanan parçacığı seçmek için Tab tuşuna basın

Vurgulanan parçacığı seçmek için Tab tuşuna basın

Sekmeye tekrar basın ve kod parçacığı genişletilir

Sekmeye tekrar basın ve kod parçacığı genişletilir

Fareyi kullanarak bir kod parçacığı eklemek için (C#, Visual Basic ve XML) 1. Kod parçacığını eklemek istediğiniz yere sağ tıklayın.

  1. Kod parçacığı Ekle ' yi ve ardından kod parçacıklarınıseçin.
  2. Listeden tıklatarak ilgili kod parçacığını seçin.

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.

Listeden tıklatarak ilgili kod parçacığını seçin

Listeden tıklatarak ilgili kod parçacığını seçin