ASP.NET MVC 4 Yardımcılar, Formlar ve DoğrulamaASP.NET MVC 4 Helpers, Forms and Validation

Web 'de Camps ekibine göreBy Web Camps Team

Web Camps eğitim setini indirinDownload Web Camps Training Kit

ASP.NET MVC 4 modeller ve veri erişimi uygulamalı laboratuvarda, veritabanından verileri yüklüyor ve görüntülüyor olursunuz.In ASP.NET MVC 4 Models and Data Access Hands-on Lab, you have been loading and displaying data from the database. Bu uygulamalı laboratuvarda, müzik deposu uygulamasına verileri düzenleme özelliği ekleyebilirsiniz.In this Hands-on Lab, you will add to the Music Store application the ability to edit that data.

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.With that goal in mind, you will first create the controller that will support the Create, Read, Update and Delete (CRUD) actions of albums. 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.You will generate an Index View template taking advantage of ASP.NET MVC's scaffolding feature to display the albums' properties in an HTML table. Bu görünümü geliştirmek için uzun açıklamaları kesecek özel bir HTML Yardımcısı ekleyeceksiniz.To enhance that view, you will add a custom HTML helper that will truncate long descriptions.

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.Afterwards, you will add the Edit and Create Views that will let you alter the albums in the database, with the help of form elements like dropdowns.

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.Lastly, you will let users delete an album and also you will prevent them from entering wrong data by validating their input.

Bu uygulamalı laboratuvar, ASP.NET MVC'nin temel bilgisine sahip olduğunuzu varsayar.This Hands-on Lab assumes you have basic knowledge of ASP.NET MVC. Daha önce ASP.NET MVC kullandıysanız, ASP.NET MVC temelleri uygulamalı laboratuvarına gitmeniz önerilir.If you have not used ASP.NET MVC before, we recommend you to go over ASP.NET MVC Fundamentals Hands-on Lab.

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.This lab walks you through the enhancements and new features previously described by applying minor changes to a sample Web application provided in the Source folder.

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.All sample code and snippets are included in the Web Camps Training Kit, available at Microsoft-Web/WebCampTrainingKit Releases. Bu laboratuvara özgü proje, ASP.NET MVC 4 yardımcıları, formları ve doğrulamasındabulunabilir.The project specific to this lab is available at ASP.NET MVC 4 Helpers, Forms and Validation.

AmaçlarObjectives

Bu uygulamalı laboratuvarda şunları nasıl yapacağınızı öğreneceksiniz:In this Hands-On Lab, you will learn how to:

  • CRUD işlemlerini desteklemek için bir denetleyici oluşturmaCreate a controller to support CRUD operations
  • Bir HTML tablosunda varlık özelliklerini görüntülemek için bir dizin görünümü oluşturmaGenerate an Index View to display entity properties in an HTML table
  • Özel HTML Yardımcısı eklemeAdd a custom HTML helper
  • Düzenleme görünümü oluşturma ve özelleştirmeCreate and customize an Edit View
  • HTTP-GET veya HTTP-POST çağrılarına tepki veren eylem yöntemlerine göre ayrım yapınDifferentiate between action methods that react to either HTTP-GET or HTTP-POST calls
  • Oluşturma görünümü ekleme ve özelleştirmeAdd and customize a Create View
  • Bir varlığın silinmesini işlemeHandle the deletion of an entity
  • Kullanıcı girişini doğrulamaValidate user input

ÖnkoşullarPrerequisites

Bu Laboratuvarı tamamlayabilmeniz için aşağıdaki öğelere sahip olmanız gerekir:You must have the following items to complete this lab:

KurulumSetup

Kod parçacıklarını yüklemeInstalling Code Snippets

Kolaylık olması için, bu laboratuvar boyunca yönettiğiniz kodun çoğu Visual Studio kod parçacıkları olarak sunulmaktadır.For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. Kod parçacıklarını yüklemek için .\Source\Setup\CodeSnippets.vsi dosyasını çalıştırın.To install the code snippets run .\Source\Setup\CodeSnippets.vsi file.

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 ".If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the appendix from this document "Appendix B: Using Code Snippets".


AlıştırmalardaExercises

Aşağıdaki alıştırmalarda bu uygulamalı laboratuvar yapılır:The following exercises make up this Hands-On Lab:

  1. Mağaza Yöneticisi denetleyicisi ve onun dizin görünümü oluşturuluyorCreating the Store Manager controller and its Index view
  2. HTML Yardımcısı eklemeAdding an HTML Helper
  3. Düzenleme görünümü oluşturuluyorCreating the Edit View
  4. Oluşturma görünümü eklemeAdding a Create View
  5. Silme Işlemi işleniyorHandling Deletion
  6. Doğrulama EklemeAdding Validation
  7. Istemci tarafında unobtrusive jQuery kullanmaUsing Unobtrusive jQuery at Client Side

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.Each exercise is accompanied by an End folder containing the resulting solution you should obtain after completing the exercises. Bu çözümü, alýþtýrmalar üzerinden çalışarak daha fazla yardıma ihtiyacınız varsa kılavuz olarak kullanabilirsiniz.You can use this solution as a guide if you need additional help working through the exercises.

Bu Laboratuvarı tamamlamaya yönelik tahmini süre: 60 dakikaEstimated time to complete this lab: 60 minutes

Alıştırma 1: mağaza yöneticisi denetleyicisi ve onun dizin görünümü oluşturuluyorExercise 1: Creating the Store Manager controller and its Index view

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.In this exercise, you will learn how to create a new controller to support CRUD operations, customize its Index action method to return a list of albums from the database and finally generating an Index View template taking advantage of ASP.NET MVC's scaffolding feature to display the albums' properties in an HTML table.

Görev 1-StoreManagerController oluşturmaTask 1 - Creating the StoreManagerController

Bu görevde, CRUD işlemlerini desteklemek için Storemanagercontroller adlı yeni bir denetleyici oluşturacaksınız.In this task, you will create a new controller called StoreManagerController to support CRUD operations.

  1. Kaynak/Ex1-Creatingdepotoremanagercontroller/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex1-CreatingTheStoreManagerController/Begin/ folder.

    1. Devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.You will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Yeni bir denetleyici ekleyin.Add a new controller. Bunu yapmak için Çözüm Gezgini içindeki denetleyiciler klasörüne sağ tıklayın, Ekle ve sonra Denetleyici komutunu seçin.To do this, right-click the Controllers folder within the Solution Explorer, select Add and then the Controller command. Denetleyici adını storemanagercontroller olarak değiştirin ve MVC Controller seçeneğinin boş okuma/yazma eylemleri seçildiğinden emin olun.Change the Controller Name to StoreManagerController and make sure the option MVC controller with empty read/write actions is selected. Ekle'yi tıklatın.Click Add.

    Denetleyici Ekle iletişim kutusuAdd controller dialog

    Denetleyici Ekle Iletişim kutusuAdd Controller Dialog

    Yeni bir denetleyici sınıfı oluşturulur.A new Controller class is generated. 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.Since you indicated to add actions for read/write, stub methods for those, common CRUD actions are created with TODO comments filled in, prompting to include the application specific logic.

Görev 2-StoreManager dizinini özelleştirmeTask 2 - Customizing the StoreManager Index

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.In this task, you will customize the StoreManager Index action method to return a View with the list of albums from the database.

  1. StoreManagerController sınıfında, aşağıdaki using yönergelerini ekleyin.In the StoreManagerController class, add the following using directives.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve formları ve doğrulama-Ex1, MvcMusicStore kullanarak)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex1 using MvcMusicStore)

    using System.Data;
    using System.Data.Entity;
    using MvcMusicStore.Models;
    
  2. Bir Musicstoreentities örneği tutmak Için storemanagercontroller öğesine bir alan ekleyin.Add a field to the StoreManagerController to hold an instance of MusicStoreEntities.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex1 MusicStoreEntities)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - 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.Implement the StoreManagerController Index action to return a View with the list of albums.

    Denetleyici eylemi mantığı, daha önce yazılan StoreController 'ın Dizin eylemine çok benzer olacaktır.The Controller action logic will be very similar to the StoreController's Index action written earlier. Görüntülenecek tarz ve sanatçı bilgileri de dahil olmak üzere tüm albümlerini almak için LINQ kullanın.Use LINQ to retrieve all albums, including Genre and Artist information for display.

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

    //
    // 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şturmaTask 3 - Creating the Index View

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.In this task, you will create the Index View template to display the list of albums returned by the StoreManager Controller.

  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.Before creating the new View template, you should build the project so that the Add View Dialog knows about the Album class to use. Derlemeyi Seç | Projeyi derlemek için MvcMusicStore oluşturun .Select Build | Build MvcMusicStore to build the project.

  2. Dizin eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin.Right-click inside the Index action method and select Add View. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.This will bring up the Add View dialog.

    Görünüm EkleAdd view

    Dizin yönteminin içinden bir görünüm eklemeAdding a View from within the Index method

  3. Görünüm Ekle iletişim kutusunda görünüm adının Dizinolduğunu doğrulayın.In the Add View dialog, verify that the View Name is Index. 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.Select the Create a strongly-typed view option, and select Album (MvcMusicStore.Models) from the Model class drop-down. Yapı iskelesi şablonu açılır listesinden liste ' yi seçin.Select List from the Scaffold template drop-down. 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.Leave the View engine to Razor and the other fields with their default value and then click Add.

    Dizin görünümü eklemeAdding an index view

    Dizin görünümü eklemeAdding an Index View

Görev 4-dizin görünümünün scafkatlama 'ını özelleştirmeTask 4 - Customizing the scaffold of the Index View

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.In this task, you will adjust the simple View template created with ASP.NET MVC scaffolding feature to have it display the fields you want.

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.The scaffolding support within ASP.NET MVC generates a simple View template which lists all fields in the Album model. 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.Scaffolding provides a quick way to get started on a strongly typed view: rather than having to write the View template manually, scaffolding quickly generates a default template and then you can modify the generated code.

  1. Oluşturulan kodu gözden geçirin.Review the code created. 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.The generated list of fields will be part of the following HTML table that Scaffolding is using for displaying tabular data.

    @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.Replace the <table> code with the following code to display only the Genre, Artist, Album Title, and Price fields. Bu, Albümkimliği ve Albüm sanatı URL 'si sütunlarını siler.This deletes the AlbumId and Album Art URL columns. 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.Also, it changes GenreId and ArtistId columns to display their linked class properties of Artist.Name and Genre.Name, and removes the Details link.

    <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.Change the following descriptions.

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

5. Görev-uygulamayı çalıştırmaTask 5 - Running the Application

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.In this task, you will test that the StoreManager Index View template displays a list of albums according to the design of the previous steps.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. 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.Change the URL to /StoreManager to verify that a list of albums is displayed, showing their Title, Artist and Genre.

    Albümler listesine göz atmaBrowsing the list of albums

    Albümler listesine göz atmaBrowsing the list of albums

Alıştırma 2: HTML Yardımcısı eklemeExercise 2: Adding an HTML Helper

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.The StoreManager Index page has one potential issue: Title and Artist Name properties can both be long enough to throw off the table formatting. Bu alıştırmada, bu metni kesmek için özel bir HTML Yardımcısı eklemeyi öğreneceksiniz.In this exercise you will learn how to add a custom HTML helper to truncate that text.

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.In the following figure, you can see how the format is modified because of the length of the text when you use a small browser size.

Kesilmedi metin içeren albümler listesine göz atmaBrowsing the list of Albums with not truncated text

Kesilmedi metin içeren albümler listesine göz atmaBrowsing the list of Albums with not truncated text

Görev 1-HTML yardımcısını genişletmeTask 1 - Extending the HTML Helper

Bu görevde, ASP.NET MVC görünümleri içinde kullanıma sunulan HTML nesnesine Truncate 'e yeni bir yöntem ekleyeceksiniz.In this task, you will add a new method Truncate to the HTML object exposed within ASP.NET MVC Views. 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.To do this, you will implement an extension method to the built-in System.Web.Mvc.HtmlHelper class provided by ASP.NET MVC.

Note

Uzantı yöntemlerihakkında daha fazla bilgi için lütfen bu MSDN makalesini ziyaret edin.To read more about Extension Methods, please visit this msdn article. https://msdn.microsoft.com/library/bb383977.aspx.https://msdn.microsoft.com/library/bb383977.aspx.

  1. Kaynak/EX2-AddingAnHTMLHelper/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex2-AddingAnHTMLHelper/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. StoreManager 'ın Dizin görünümünü açın.Open StoreManager's Index View. Bunu yapmak için, Çözüm Gezgini views klasörünü ve ardından storemanager ' ı genişletin ve Index. cshtml dosyasını açın.To do this, in the Solution Explorer expand the Views folder, then the StoreManager and open the Index.cshtml file.

  3. Truncate Helper metodunu tanımlamak için @model yönergesinin altına aşağıdaki kodu ekleyin.Add the following code below the @model directive to define the Truncate helper method.

    @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 kesiliyorTask 2 - Truncating Text in the Page

Bu görevde, görünüm şablonundaki metni kesmek için Truncate metodunu kullanacaksınız.In this task, you will use the Truncate method to truncate the text in the View template.

  1. StoreManager 'ın Dizin görünümünü açın.Open StoreManager's Index View. Bunu yapmak için, Çözüm Gezgini views klasörünü ve ardından storemanager ' ı genişletin ve Index. cshtml dosyasını açın.To do this, in the Solution Explorer expand the Views folder, then the StoreManager and open the Index.cshtml file.

  2. Sanatçı adını ve albümün başlığınıgösteren satırları değiştirin.Replace the lines that show the Artist Name and Album's Title. Bunu yapmak için aşağıdaki satırları değiştirin.To do this, replace the following lines.

    <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ırmaTask 3 - Running the Application

Bu görevde, Storemanager Dizin görünümü şablonunun albümün başlığını ve sanatçı adını kesen test edersiniz.In this task, you will test that the StoreManager Index View template truncates the Album's Title and Artist Name.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. Başlık ve sanatçı sütunundaki uzun metinlerin KESILDIĞINI doğrulamak için URL 'yi /storemanager olarak değiştirin.Change the URL to /StoreManager to verify that long texts in the Title and Artist column are truncated.

    Kesilen başlıklar ve sanatçı adlarıTruncated titles and artists names

    Kesilen başlıklar ve sanatçı adlarıTruncated Titles and Artist Names

Alıştırma 3: düzenleme görünümü oluşturmaExercise 3: Creating the Edit View

Bu alıştırmada, Mağaza yöneticilerinin bir albümü düzenlemesine izin vermek için form oluşturmayı öğreneceksiniz.In this exercise, you will learn how to create a form to allow store managers to edit an Album. /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.They will browse the /StoreManager/Edit/id URL (id being the unique id of the album to edit), thus making an HTTP-GET call to the server.

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.The Controller Edit action method will retrieve the appropriate Album from the database, create a StoreManagerViewModel object to encapsulate it (along with a list of Artists and Genres), and then pass it off to a View template to render the HTML page back to the user. Bu sayfada, albüm özelliklerini düzenlemede metin kutuları ve açılan öğeler içeren bir <form> öğesi bulunur.This page will contain a <form> element with textboxes and dropdowns for editing the Album properties.

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ış).Once the user updates the Album form values and clicks the Save button, the changes are submitted via an HTTP-POST call back to /StoreManager/Edit/id. Although the URL remains the same as in the last call, ASP.NET MVC identifies that this time it is an HTTP-POST and therefore executes a different Edit action method (one decorated with [HttpPost]).

Görev 1-HTTP-GET düzenleme eylemi yöntemini uygulamaTask 1 - Implementing the HTTP-GET Edit Action Method

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.In this task, you will implement the HTTP-GET version of the Edit action method to retrieve the appropriate Album from the database, as well as a list of all Genres and Artists. 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.It will package this data up into the StoreManagerViewModel object defined in the last step, which will then be passed to a View template to render the response with.

  1. Kaynak/Ex3-CreatingTheEditView/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex3-CreatingTheEditView/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Storemanagercontroller sınıfını açın.Open the StoreManagerController class. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  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.Replace the HTTP-GET Edit action method with the following code to retrieve the appropriate Album as well as the Genres and Artists lists.

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex3 StoreManagerController http-düzenleme EYLEMINI al)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-GET Edit action)

    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.You are using System.Web.Mvc SelectList for Artists and Genres instead of the System.Collections.Generic List.

    SelectList , HTML açılan listelerini doldurmak ve geçerli seçim gibi şeyleri yönetmek için temizleyici bir yoldur.SelectList is a cleaner way to populate HTML dropdowns and manage things like current selection. Denetleyici eyleminde bu ViewModel nesnelerinin örneklendirime ve daha sonra ayarlanması, düzenleme formu senaryosunu temizleyici hale getirir.Instantiating and later setting up these ViewModel objects in the controller action will make the Edit form scenario cleaner.

Görev 2-düzenleme görünümü oluşturmaTask 2 - Creating the Edit View

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.In this task, you will create an Edit View template that will later display the album properties.

  1. Düzenleme görünümünü oluşturun.Create the Edit View. Bunu yapmak için, eylemi Düzenle yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin.To do this, right-click inside the Edit action method and select Add View.

  2. Görünüm Ekle iletişim kutusunda görünüm adının düzenlendiğinidoğrulayın.In the Add View dialog, verify that the View Name is Edit. 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.Check the Create a strongly-typed view checkbox and select Album (MvcMusicStore.Models) from the View data class drop-down. Yapı iskelesi şablonu açılır listesinden Düzenle ' yi seçin.Select Edit from the Scaffold template drop-down. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.Leave the other fields with their default value and then click Add.

    Düzenleme görünümü eklemeAdding an Edit view

    Düzenleme görünümü eklemeAdding an Edit view

Görev 3-uygulamayı çalıştırmaTask 3 - Running the Application

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.In this task, you will test that the StoreManager Edit View page displays the properties' values for the album passed as parameter.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. Geçirilen albümün özelliklerinin görüntülendiğini doğrulamak için /Storemanager/Edit/1 URL 'sini değiştirin.Change the URL to /StoreManager/Edit/1 to verify that the properties' values for the album passed are displayed.

    Albümün düzenleme görünümüne göz atmaBrowsing Album's Edit View

    Albümün düzenleme görünümüne göz atmaBrowsing Album's Edit view

Görev 4-albüm Düzenleyicisi şablonunda açılan listeleri uygulamaTask 4 - Implementing drop-downs on the Album Editor Template

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.In this task, you will add drop-downs to the View template created in the last task, so that the user can select from a list of Artists and Genres.

  1. Tüm Albüm alan kümesi kodunu aşağıdaki kodla değiştirin:Replace all the Album fieldset code with the following:

    <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.An Html.DropDownList helper has been added to render drop-downs for choosing Artists and Genres. HTML. DropDownList 'e geçirilen parametreler şunlardır:The parameters passed to Html.DropDownList are:

    1. Form alanının adı ( "ArtistId" ).The name of the form field ("ArtistId").
    2. Açılan listenin selectvalues listesi .The SelectList of values for the drop-down.

5. Görev-uygulamayı çalıştırmaTask 5 - Running the Application

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.In this task, you will test that the StoreManager Edit View page displays drop-downs instead of Artist and Genre ID text fields.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. 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.Change the URL to /StoreManager/Edit/1 to verify that it displays drop-downs instead of Artist and Genre ID text fields.

    Açılır liste ile albümün düzenleme görünümüne göz atmaBrowsing Album's Edit View with drop downs

    Albümün düzenleme görünümüne göz atma, bu sefer açılan listeleriBrowsing Album's Edit view, this time with dropdowns

Görev 6-HTTP-POST düzenleme eylem yöntemini uygulamaTask 6 - Implementing the HTTP-POST Edit action method

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.Now that the Edit View displays as expected, you need to implement the HTTP-POST Edit Action method to save the changes made to the Album.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın.Close the browser if needed, to return to the Visual Studio window. Storemanagercontroller ' i denetleyiciler klasöründen açın.Open StoreManagerController from the Controllers folder.

  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):Replace HTTP-POST Edit action method code with the following (note that the method that must be replaced is overloaded version that receives two parameters):

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-Ex3 StoreManagerController http-düzenleme sonrası eylemi)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex3 StoreManagerController HTTP-POST Edit action)

    [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.This method will be executed when the user clicks the Save button of the View and performs an HTTP-POST of the form values back to the server to persist them in the database. Dekoratör [HttpPost] , YÖNTEMIN bu http-post senaryolarında kullanılması gerektiğini belirtir.The decorator [HttpPost] indicates that the method should be used for those HTTP-POST scenarios. Yöntemi bir Albüm nesnesi alır.The method takes an Album object. ASP.NET MVC, albüm nesnesini, postalanan <form> değerlerinden otomatik olarak oluşturur.ASP.NET MVC will automatically create the Album object from the posted <form> values.

    Yöntemi şu adımları gerçekleştirir:The method will perform these steps:

    1. Model geçerliyse:If model is valid:

      1. Bağlam içindeki albüm girişini, değiştirilen bir nesne olarak işaretlemek için güncelleştirin.Update the album entry in the context to mark it as a modified object.
      2. Değişiklikleri kaydedin ve dizin görünümüne yeniden yönlendirin.Save the changes and redirect to the index view.
    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.If the model is not valid, it will populate the ViewBag with the GenreId and ArtistId, then it will return the view with the received Album object to allow the user perform any required update.

Görev 7-uygulamayı çalıştırmaTask 7 - Running the Application

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.In this task, you will test that the StoreManager Edit View page actually saves the updated Album data in the database.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanager/Edit/1olarak değiştirin.Change the URL to /StoreManager/Edit/1. Albüm başlığını yüklenecek şekilde değiştirin ve Kaydet' e tıklayın.Change the Album title to Load and click on Save. Albümün başlığının, Albümler listesinde gerçekten değiştirildiğini doğrulayın.Verify that album's title actually changed in the list of albums.

    Bir albümü güncelleştirmeUpdating an album

    Bir albümü güncelleştirmeUpdating an Album

Alıştırma 4: oluşturma görünümü eklemeExercise 4: Adding a Create View

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.Now that the StoreManagerController supports the Edit ability, in this exercise you will learn how to add a Create View template to let store managers add new Albums to the application.

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:Like you did with the Edit functionality, you will implement the Create scenario using two separate methods within the StoreManagerController class:

  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.One action method will display an empty form when store managers first visit the /StoreManager/Create URL.
  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.A second action method will handle the scenario where the store manager clicks the Save button within the form and submits the values back to the /StoreManager/Create URL as an HTTP-POST.

Görev 1-HTTP-GET Create action metodunu uygulamaTask 1 - Implementing the HTTP-GET Create action method

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.In this task, you will implement the HTTP-GET version of the Create action method to retrieve a list of all Genres and Artists, package this data up into a StoreManagerViewModel object, which will then be passed to a View template.

  1. Kaynak/EX4-AddingACreateView/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex4-AddingACreateView/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Storemanagercontroller sınıfını açın.Open StoreManagerController class. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  3. Oluşturma eylemi Yöntem kodunu aşağıdaki kodla değiştirin:Replace the Create action method code with the following:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-EX4 StoreManagerController http-oluşturma EYLEMINI al)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP-GET Create action)

    //
    // 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ü eklemeTask 2 - Adding the Create View

Bu görevde, yeni (boş) bir albüm formu görüntüleyen oluştur görünüm şablonunu ekleyeceksiniz.In this task, you will add the Create View template that will display a new (empty) Album form.

  1. Oluşturma eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin.Right-click inside the Create action method and select Add View. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.This will bring up the Add View dialog.

  2. Görünüm Ekle iletişim kutusunda görünüm adının Oluştur' u doğrulayın.In the Add View dialog, verify that the View Name is Create. 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.Select the Create a strongly-typed view option and select Album (MvcMusicStore.Models) from the Model class drop-down and Create from the Scaffold template drop-down. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.Leave the other fields with their default value and then click Add.

    Oluşturma görünümü eklemeAdding a create view

    Oluşturma görünümü eklemeAdding the Create View

  3. Genreıd ve ArtistId alanlarını aşağıda gösterildiği gibi bir açılan liste kullanacak şekilde güncelleştirin:Update the GenreId and ArtistId fields to use a drop-down list as shown below:

    ...
    <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ırmaTask 3 - Running the Application

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.In this task, you will test that the StoreManager Create View page displays an empty Album form.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanager/Createolarak değiştirin.Change the URL to /StoreManager/Create. Yeni albüm özelliklerini doldurmak için boş bir form görüntülendiğini doğrulayın.Verify that an empty form is displayed for filling the new Album properties.

    Boş bir formla görünüm oluşturCreate View with an empty form

    Boş bir formla görünüm oluşturCreate View with an empty form

Görev 4-HTTP-POST oluşturma eylemi yöntemi uygulamaTask 4 - Implementing the HTTP-POST Create Action Method

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.In this task, you will implement the HTTP-POST version of the Create action method that will be invoked when a user clicks the Save button. Yöntemi, yeni albümü veritabanına kaydetmeniz gerekir.The method should save the new album in the database.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın.Close the browser if needed, to return to the Visual Studio window. Storemanagercontroller sınıfını açın.Open StoreManagerController class. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  2. Http-post oluşturma eylemi yöntemi kodunu aşağıdaki kodla değiştirin:Replace HTTP-POST Create action method code with the following:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-EX4 StoreManagerController http-oluşturma sonrası eylem)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex4 StoreManagerController HTTP- POST Create action)

    [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.The Create action is pretty similar to the previous Edit action method but instead of setting the object as modified, it is being added to the context.

5. Görev-uygulamayı çalıştırmaTask 5 - Running the Application

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.In this task, you will test that the StoreManager Create View page lets you create a new Album and then redirects to the StoreManager Index View.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanager/Createolarak değiştirin.Change the URL to /StoreManager/Create. Tüm form alanlarını, aşağıdaki şekilde olduğu gibi yeni bir albüm için verilerle birlikte doldurabilirsiniz:Fill all the form fields with data for a new Album, like the one in the following figure:

    Albüm oluşturmaCreating an Album

    Albüm oluşturmaCreating an Album

  3. Yeni oluşturduğunuz albümü içeren StoreManager dizin görünümüne yönlendirildiğinizi doğrulayın.Verify that you get redirected to the StoreManager Index View that includes the new Album just created.

    Yeni albüm oluşturulduNew Album Created

    Yeni albüm oluşturulduNew Album Created

Alıştırma 5: Işlemeyi silmeExercise 5: Handling Deletion

Albümleri silme özelliği henüz uygulanmadı.The ability to delete albums is not yet implemented. Bu alıştırmada ilgili olacak.This is what this exercise will be about. Daha önce olduğu gibi, Storemanagercontroller sınıfı içinde iki ayrı yöntem kullanarak silme senaryosunu uygulayacaksınız:Like before, you will implement the Delete scenario using two separate methods within the StoreManagerController class:

  1. Bir eylem yönteminde bir onay formu görüntülenirOne action method will display a confirmation form
  2. İkinci bir eylem yöntemi, form gönderimini işleyecekA second action method will handle the form submission

Görev 1-HTTP-GET silme eylemini uygulama yöntemiTask 1 - Implementing the HTTP-GET Delete Action Method

Bu görevde, albümün bilgilerini almak için silme eylemi yönteminin HTTP-Al sürümünü uygulayacaksınız.In this task, you will implement the HTTP-GET version of the Delete action method to retrieve the album's information.

  1. Kaynak/eX5-el Lingsilme/başlangıç/ klasör konumunda bulunan Başlangıç çözümünü açın.Open the Begin solution located at Source/Ex5-HandlingDeletion/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Storemanagercontroller sınıfını açın.Open StoreManagerController class. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  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.The Delete controller action is exactly the same as the previous Store Details controller action: it queries the album object from the database using the id provided in the URL and returns the appropriate View. Bunu yapmak için, HTTP-GET Delete ACTION yöntemi kodunu aşağıdaki kodla değiştirin:To do this, replace the HTTP-GET Delete action method code with the following:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-eX5 Işleme SILME http-silme EYLEMINI al)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Deletion HTTP-GET Delete action)

    //
    // 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.Right-click inside the Delete action method and select Add View. Bu işlem, Görünüm Ekle iletişim kutusunu getirir.This will bring up the Add View dialog.

  5. Görünüm Ekle iletişim kutusunda görünüm adının silmeolduğunu doğrulayın.In the Add View dialog, verify that the View name is Delete. 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.Select the Create a strongly-typed view option and select Album (MvcMusicStore.Models) from the Model class drop-down. Yapı iskelesi şablonu açılır listesinden Sil ' i seçin.Select Delete from the Scaffold template drop-down. Diğer alanları varsayılan değerlerine bırakın ve ardından Ekle' ye tıklayın.Leave the other fields with their default value and then click Add.

    Silme görünümü eklemeAdding a Delete View

    Silme görünümü eklemeAdding a Delete View

  6. Şablonu Sil, modeldeki tüm alanları gösterir.The Delete template shows all the fields from the model. Yalnızca albümün başlığını gösterebilirsiniz.You will show only the album's title. Bunu yapmak için, görünümün içeriğini aşağıdaki kodla değiştirin:To do this, replace the content of the view with the following code:

    @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ırmaTask 2 - Running the Application

Bu görevde, Storemanager silme görünümü sayfasının bir onay silme formu görüntülediğini test edersiniz.In this task, you will test that the StoreManager Delete View page displays a confirmation deletion form.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanagerolarak değiştirin.Change the URL to /StoreManager. 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.Select one album to delete by clicking Delete and verify that the new view is uploaded.

    Bir albümü silmeDeleting an Album

    Bir albümü silmeDeleting an Album

Görev 3-HTTP-Delete silme eyleminin uygulanması yöntemiTask 3- Implementing the HTTP-POST Delete Action Method

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.In this task, you will implement the HTTP-POST version of the Delete action method that will be invoked when a user clicks the Delete button. Yöntemi, veritabanındaki albümü silmelidir.The method should delete the album in the database.

  1. Gerekirse, Visual Studio penceresine dönmek için tarayıcıyı kapatın.Close the browser if needed, to return to the Visual Studio window. Storemanagercontroller sınıfını açın.Open StoreManagerController class. Bunu yapmak için, denetleyiciler klasörünü genişletin ve StoreManagerController.csöğesine çift tıklayın.To do this, expand the Controllers folder and double-click StoreManagerController.cs.

  2. Http-post Delete ACTION yöntemi kodunu aşağıdaki kodla değiştirin:Replace HTTP-POST Delete action method code with the following:

    (Kod parçacığı- ASP.NET MVC 4 yardımcıları ve Forms ve doğrulama-eX5 Işleme SILME http-SILME sonrası eylemi)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex5 Handling Deletion HTTP-POST Delete action)

    //
    // 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ırmaTask 4 - Running the Application

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.In this task, you will test that the StoreManager Delete View page lets you delete an Album and then redirects to the StoreManager Index View.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanagerolarak değiştirin.Change the URL to /StoreManager. Sil ' e tıklayarak silinecek bir albümü seçin .Select one album to delete by clicking Delete. Sil düğmesine tıklayarak silmeyi onaylayın:Confirm the deletion by clicking Delete button:

    Bir albümü silmeDeleting an Album

    Bir albümü silmeDeleting an Album

  3. Dizin sayfasında görünmediğinden albümün silindiğini doğrulayın.Verify that the album was deleted since it does not appear in the Index page.

Alıştırma 6: doğrulama eklemeExercise 6: Adding Validation

Şu anda, yerinde oluşturduğunuz oluşturma ve düzenleme formları herhangi bir tür doğrulama gerçekleştirmez.Currently, the Create and Edit forms you have in place do not perform any kind of validation. 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.If the user leaves a required field blank or type letters in the price field, the first error you will get will be from the database.

Model sınıfınıza veri ek açıklamaları ekleyerek uygulamaya doğrulama ekleyebilirsiniz.You can add validation to the application by adding Data Annotations to your model class. 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.Data Annotations allow describing the rules you want applied to your model properties, and ASP.NET MVC will take care of enforcing and displaying appropriate message to users.

Görev 1-veri ek açıklamaları eklemeTask 1 - Adding Data Annotations

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.In this task, you will add Data Annotations to the Album Model that will make the Create and Edit page display validation messages when appropriate.

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.For a simple Model class, adding a Data Annotation is just handled by adding a using statement for System.ComponentModel.DataAnnotation, then placing a [Required] attribute on the appropriate properties. Aşağıdaki örnek, ad özelliğini görünümünde gerekli bir alan haline getirir.The following example would make the Name property a required field in the View.

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.This is a little more complex in cases like this application where the Entity Data Model is generated. Doğrudan model sınıflarına veri ek açıklamaları eklediyseniz, modeli veritabanından güncelleştirirseniz bunların üzerine yazılır.If you added Data Annotations directly to the model classes, they would be overwritten if you update the model from the database. 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.Instead, you can make use of metadata partial classes which will exist to hold the annotations and are associated with the model classes using the [MetadataType] attribute.

  1. Kaynak/Ex6-AddingValidation/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex6-AddingValidation/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Modeller klasöründen Album.cs öğesini açın.Open the Album.cs from the Models folder.

  3. Album.cs içeriğini vurgulanan kodla değiştirin, böylece aşağıdakine benzer şekilde görünür:Replace Album.cs content with the highlighted code, so that it looks like the following:

    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.The line [DisplayFormat(ConvertEmptyStringToNull=false)] indicates that empty strings from the model won't be converted to null when the data field is updated in the data source. Bu ayar, Entity Framework veri ek açıklaması alanları doğrulamaktan önce modele null değerler atarken bir özel durumu ortadan kaldırır.This setting will avoid an exception when the Entity Framework assigns null values to the model before Data Annotation validates the fields.

    (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ı)(Code Snippet - ASP.NET MVC 4 Helpers and Forms and Validation - Ex6 Album metadata partial class)

    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.This Album partial class has a MetadataType attribute which points to the AlbumMetaData class for the Data Annotations. Bunlar, albüm modeline ek açıklama eklemek için kullandığınız bazı veri ek açıklama öznitelikleri şunlardır:These are some of the Data Annotation attributes you are using to annotate the Album model:

    • Gerekli-özelliğin gerekli bir alan olduğunu belirtirRequired - Indicates that the property is a required field
    • DisplayName-form alanlarında ve doğrulama iletilerinde kullanılacak metni tanımlarDisplayName - Defines the text to be used on form fields and validation messages
    • DisplayFormat-veri alanlarının nasıl görüntülendiğini ve biçimlendirildiğini belirtir.DisplayFormat - Specifies how data fields are displayed and formatted.
    • StringLength-dize alanı için maksimum uzunluğu tanımlarStringLength - Defines a maximum length for a string field
    • Range-sayısal bir alan için en yüksek ve en küçük değeri verirRange - Gives a maximum and minimum value for a numeric field
    • ScaffoldColumn-düzenleyici formlarından alanları gizlemeye Izin verirScaffoldColumn - Allows hiding fields from editor forms

Görev 2-uygulamayı çalıştırmaTask 2 - Running the Application

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.In this task, you will test that the Create and Edit pages validate fields, using the display names chosen in the last task.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. URL 'YI /Storemanager/Createolarak değiştirin.Change the URL to /StoreManager/Create. 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ınVerify that the display names match the ones in the partial class (like Album Art URL instead of AlbumArtUrl)

  3. Formu doldurmadan Oluştur' a tıklayın.Click Create, without filling the form. Karşılık gelen doğrulama iletilerini almanızı doğrulayın.Verify that you get the corresponding validation messages.

    Oluştur sayfasındaki doğrulanan alanlarValidated fields in the Create page

    Oluştur sayfasındaki doğrulanan alanlarValidated fields in the Create page

  4. Aynı olduğunu, düzenleme sayfasıyla aynı olduğunu doğrulayabilirsiniz.You can verify that the same occurs with the Edit page. 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.Change the URL to /StoreManager/Edit/1 and verify that the display names match the ones in the partial class (like Album Art URL instead of AlbumArtUrl). Başlığı ve fiyat alanlarını boşaltın ve Kaydet' e tıklayın.Empty the Title and Price fields and click Save. Karşılık gelen doğrulama iletilerini almanızı doğrulayın.Verify that you get the corresponding validation messages.

    Düzenleme sayfasında doğrulanan alanlar

    Düzenleme sayfasında doğrulanan alanlarValidated fields in the Edit page

Alıştırma 7: Istemci tarafında unobtrusive jQuery kullanmaExercise 7: Using Unobtrusive jQuery at Client Side

Bu alıştırmada, istemci tarafında MVC 4 unobtrusive doğrulamasını nasıl etkinleştireceğinizi öğreneceksiniz.In this exercise, you will learn how to enable MVC 4 Unobtrusive jQuery validation at client side.

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.The Unobtrusive jQuery uses data-ajax prefix JavaScript to invoke action methods on the server rather than intrusively emitting inline client scripts.

Görev 1-Obtrusive jQuery 'ı etkinleştirmeden önce uygulamayı çalıştırmaTask 1 - Running the Application before Enabling Unobtrusive jQuery

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.In this task, you will run the application before including jQuery in order to compare both validation models.

  1. Kaynak/Ex7-UnobtrusivejQueryValidation/BEGIN/ Folder konumunda bulunan BEGIN çözümünü açın.Open the Begin solution located at Source/Ex7-UnobtrusivejQueryValidation/Begin/ folder. Aksi takdirde, önceki Alıştırmayı tamamlayarak elde edilen son çözümü kullanmaya devam edebilirsiniz.Otherwise, you might continue using the End solution obtained by completing the previous exercise.

    1. Belirtilen Başlangıç çözümünü açtıysanız devam etmeden önce bazı eksik NuGet paketlerini indirmeniz gerekir.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Bunu yapmak için Proje menüsüne tıklayın ve NuGet Paketlerini Yönet' i seçin.To do this, click the Project menu and select Manage NuGet Packages.

    2. NuGet Paketlerini Yönet iletişim kutusunda eksik paketleri Indirmek Için geri yükle ' ye tıklayın.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

    3. Son olarak, derleme | Build Solution' a tıklayarak Çözümü derleyin.Finally, build the solution by clicking Build | Build Solution.

      Note

      NuGet kullanmanın avantajlarından biri, projenizdeki tüm kitaplıkları sevk etmek zorunda olmadığınızdan proje boyutunu azaltmanızı sağlar.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. 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.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Bu laboratuvardan mevcut bir çözümü açtıktan sonra bu adımları çalıştırmanız neden olur.This is why you will have to run these steps after you open an existing solution from this lab.

  2. Uygulamayı çalıştırmak için F5'e basın.Press F5 to run the application.

  3. Proje giriş sayfasında başlar.The project starts in the Home page. Doğrulama iletilerini aldığını doğrulamak için /Storemanager/Create ' e gözatıp Formu doldurmadan Oluştur ' a tıklayın:Browse /StoreManager/Create and click Create without filling the form to verify that you get validation messages:

    İstemci doğrulaması devre dışıClient validation disabled

    İstemci doğrulaması devre dışıClient validation disabled

  4. Tarayıcıda, HTML kaynak kodunu açın:In the browser, open the HTML source code:

    ...
              <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ştirmeTask 2 - Enabling Unobtrusive Client Validation

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.In this task, you will enable jQuery unobtrusive client validation from Web.config file, which is by default set to false in all new ASP.NET MVC 4 projects. Bunlara ek olarak, jQuery 'in Istemci doğrulaması işini sorunsuz hale getirmek için gerekli betiklerin başvurularını eklersiniz.Additionally, you will add the necessary scripts references to make jQuery Unobtrusive Client Validation work.

  1. Proje kökünde Web. config dosyasını açın ve ClientValidationEnabled ve Unobtrusivejavascriptenabled anahtarları değerlerinin trueolarak ayarlandığından emin olun.Open Web.Config file at project root, and make sure that the ClientValidationEnabled and UnobtrusiveJavaScriptEnabled keys values are set to true.

    ...
    <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:You can also enable client validation by code at Global.asax.cs to get the same results:

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

    Ek olarak, özel bir davranışa sahip olmak için herhangi bir denetleyiciye ClientValidationEnabled özniteliğini de atayabilirsiniz.Additionally, you can assign ClientValidationEnabled attribute into any controller to have a custom behavior.

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

  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.Make sure the following script files, jquery.validate and jquery.validate.unobtrusive, are referenced in the view through the "~/bundles/jqueryval" bundle.

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

    Note

    Tüm bu jQuery kitaplıkları MVC 4 yeni projelere dahil edilmiştir.All these jQuery libraries are included in MVC 4 new projects. Projenin /Scripts klasöründe daha fazla kitaplık bulabilirsiniz.You can find more libraries in the /Scripts folder of you project.

    Bu doğrulama kitaplıklarının çalışmasını sağlamak için jQuery Framework kitaplığına bir başvuru eklemeniz gerekir.In order to make this validation libraries work, you need to add a reference to the jQuery framework library. Bu başvuru _Layout. cshtml dosyasına zaten eklendiğinden, bu görünümü bu görünüme eklemeniz gerekmez.Since this reference is already added in the _Layout.cshtml file, you do not need to add it in this particular view.

Görev 3-uygulamayı unobtrusive doğrulamasını kullanarak çalıştırmaTask 3 - Running the Application Using Unobtrusive jQuery Validation

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.In this task, you will test that the StoreManager create view template performs client side validation using jQuery libraries when the user creates a new album.

  1. Uygulamayı çalıştırmak için F5'e basın.Press F5 to run the application.

  2. Proje giriş sayfasında başlar.The project starts in the Home page. Doğrulama iletilerini aldığını doğrulamak için /Storemanager/Create ' e gözatıp Formu doldurmadan Oluştur ' a tıklayın:Browse /StoreManager/Create and click Create without filling the form to verify that you get validation messages:

    JQuery özellikli istemci doğrulamasıClient validation with jQuery enabled

    JQuery özellikli istemci doğrulamasıClient validation with jQuery enabled

  3. Tarayıcıda, oluştur görünümü için kaynak kodunu açın:In the browser, open the source code for Create view:

    ...
    <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.For each client validation rule, Unobtrusive jQuery adds an attribute with data-val-rulename="message". Aşağıda, istemci doğrulaması gerçekleştirmek için, bir Untastrusjquery 'ın HTML giriş alanına eklediği etiketlerin listesi verilmiştir:Below is a list of tags that Unobtrusive jQuery inserts into the html input field to perform client validation:

    • Veri-ValData-val
    • Veri-değer-sayıData-val-number
    • Veri Val aralığıData-val-range
    • Veri-değer-aralığı-min/Data-Val-Range-MaxData-val-range-min / Data-val-range-max
    • Veri-Val-gerekliData-val-required
    • Veri-değer uzunluğuData-val-length
    • Veri-değer-Uzunluk-Max/Data-Val-length-minData-val-length-max / Data-val-length-min

    Tüm veri değerleri model veri ek açıklamasıile doldurulur.All the data values are filled with model Data Annotation. Daha sonra, sunucu tarafında çalışan tüm mantık istemci tarafında çalıştırılabilir.Then, all the logic that works at server side can be run at client side. Örneğin, Price özniteliği modelde aşağıdaki veri ek açıklamasına sahiptir:For example, Price attribute has the following data annotation in the model:

    [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:After using Unobtrusive jQuery, the generated code is:

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

ÖzetSummary

Bu uygulamalı Laboratuvarı tamamlayarak, kullanıcıların veritabanında depolanan verileri aşağıdakilerin kullanımıyla nasıl değiştirdiklerini öğrendiniz:By completing this Hands-On Lab you have learned how to enable users to change the data stored in the database with the use of the following:

  • Dizin, oluşturma, düzenleme, silme gibi denetleyici eylemleriController actions like Index, Create, Edit, Delete
  • ASP.NET MVC 'nin bir HTML tablosunda özellikleri görüntülemek için yapı iskelesi özelliğiASP.NET MVC's scaffolding feature for displaying properties in an HTML table
  • Kullanıcı deneyimini geliştirmek için özel HTML YardımcılarıCustom HTML helpers to improve user experience
  • HTTP-GET veya HTTP-POST çağrılarına tepki veren eylem yöntemleriAction methods that react to either HTTP-GET or HTTP-POST calls
  • Oluşturma ve düzenleme gibi benzer görünüm şablonlarına yönelik paylaşılan bir düzenleyici şablonuA shared editor template for similar View templates like Create and Edit
  • Açılan öğeler gibi form öğeleriForm elements like drop-downs
  • Model doğrulaması için veri ek açıklamalarıData annotations for Model validation
  • JQuery unobtrusive kitaplığı kullanarak istemci tarafı doğrulamasıClient Side Validation using jQuery Unobtrusive library

Ek A: Web için Visual Studio Express 2012 yüklemeAppendix A: Installing Visual Studio Express 2012 for Web

Microsoft Web Platformu Yükleyicisi kullanarak Web için Microsoft Visual Studio Express 2012 veya başka bir "Express" sürümü yükleyebilirsiniz.You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. 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.The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.

  1. [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169)gidin.Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). 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.Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Windows Azure SDK".

  2. Şimdi yüklensin' e tıklayın.Click on Install Now. Web platformu yükleyicinizi yoksa, önce indirmek ve yüklemek üzere yönlendirilirsiniz.If you do not have Web Platform Installer you will be redirected to download and install it first.

  3. Web Platformu Yükleyicisi açıkken, kurulum 'u başlatmak için yükleme ' ye tıklayın.Once Web Platform Installer is open, click Install to start the setup.

    Visual Studio Express yüklensinInstall Visual Studio Express

    Visual Studio Express yüklensinInstall Visual Studio Express

  4. Tüm ürünlerin lisanslarını ve koşullarını okuyun ve devam etmek için kabul ediyorum ' a tıklayın.Read all the products' licenses and terms and click I Accept to continue.

    Lisans koşullarını kabul etme

    Lisans koşullarını kabul etmeAccepting the license terms

  5. İndirme ve yükleme işlemi tamamlanana kadar bekleyin.Wait until the downloading and installation process completes.

    Yükleme ilerleme durumu

    Yükleme ilerleme durumuInstallation progress

  6. Yükleme tamamlandığında son' a tıklayın.When the installation completes, click Finish.

    Yükleme tamamlandı

    Yükleme tamamlandıInstallation completed

  7. Web Platformu Yükleyicisi 'ni kapatmak için Çıkış ' a tıklayın.Click Exit to close Web Platform Installer.

  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.To open Visual Studio Express for Web, go to the Start screen and start writing "VS Express", then click on the VS Express for Web tile.

    Web için VS Express kutucuğu

    Web için VS Express kutucuğuVS Express for Web tile

Ek B: kod parçacıklarını kullanmaAppendix B: Using Code Snippets

Kod parçacıkları ile, ihtiyacınız olan tüm koda parmaklarınızın elinizin altında olmasını sağlayabilirsiniz.With code snippets, you have all the code you need at your fingertips. Laboratuvar belgesi, aşağıdaki şekilde gösterildiği gibi, bunları yalnızca ne zaman kullanacağınızı söyleyecektir.The lab document will tell you exactly when you can use them, as shown in the following figure.

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanmaUsing Visual Studio code snippets to insert code into your project

Projenize kod eklemek için Visual Studio kod parçacıklarını kullanmaUsing Visual Studio code snippets to insert code into your project

Klavyeyi kullanarak bir kod parçacığı eklemek için (C# yalnızca)To add a code snippet using the keyboard (C# only)

  1. Kodu eklemek istediğiniz yere imleci yerleştirin.Place the cursor where you would like to insert the code.
  2. Kod parçacığı adını yazmaya başlayın (boşluk veya tire olmadan).Start typing the snippet name (without spaces or hyphens).
  3. IntelliSense, eşleşen kod parçacıklarının adlarını gösterdiği gibi izleyin.Watch as IntelliSense displays matching snippets' names.
  4. Doğru kod parçacığını seçin (veya tüm kod parçacığının adı seçilene kadar yazmaya devam edin).Select the correct snippet (or keep typing until the entire snippet's name is selected).
  5. Kod parçacığını imleç konumuna eklemek için SEKME tuşuna iki kez basın.Press the Tab key twice to insert the snippet at the cursor location.

Kod parçacığı adını yazmaya başlayınStart typing the snippet name

Kod parçacığı adını yazmaya başlayınStart typing the snippet name

Vurgulanan parçacığı seçmek için Tab tuşuna basınPress Tab to select the highlighted snippet

Vurgulanan parçacığı seçmek için Tab tuşuna basınPress Tab to select the highlighted snippet

Sekmeye tekrar basın ve kod parçacığı genişletilirPress Tab again and the snippet will expand

Sekmeye tekrar basın ve kod parçacığı genişletilirPress Tab again and the snippet will expand

Fareyi kullanarak bir kod parçacığı eklemek için (C#, Visual Basic ve XML) 1.To add a code snippet using the mouse (C#, Visual Basic and XML) 1. Kod parçacığını eklemek istediğiniz yere sağ tıklayın.Right-click where you want to insert the code snippet.

  1. Kod parçacığı Ekle ' yi ve ardından kod parçacıklarınıseçin.Select Insert Snippet followed by My Code Snippets.
  2. Listeden tıklatarak ilgili kod parçacığını seçin.Pick the relevant snippet from the list, by clicking on it.

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.Right-click where you want to insert the code snippet and select Insert Snippet

Kod parçacığını eklemek istediğiniz yere sağ tıklayın ve parçacığı Ekle ' yi seçin.Right-click where you want to insert the code snippet and select Insert Snippet

Listeden tıklatarak ilgili kod parçacığını seçinPick the relevant snippet from the list, by clicking on it

Listeden tıklatarak ilgili kod parçacığını seçinPick the relevant snippet from the list, by clicking on it