ASP.NET MVC 4 TemelleriASP.NET MVC 4 Fundamentals

Web 'de Camps ekibine göreBy Web Camps Team

Web Camps eğitim setini indirinDownload Web Camps Training Kit

Bu uygulamalı laboratuvar, ASP.NET MVC ve Visual Studio 'Nun nasıl kullanılacağını anlatan bir öğretici uygulaması olan MVC (model görünüm denetleyicisi) müzik mağazasını temel alır.This Hands-On Lab is based on MVC (Model View Controller) Music Store, a tutorial application that introduces and explains step-by-step how to use ASP.NET MVC and Visual Studio. Laboratuvarın tamamında, bu teknolojilerin birlikte kullanılması basitlik, ancak gücünü öğrenirsiniz.Throughout the lab you will learn the simplicity, yet power of using these technologies together. Basit bir uygulamayla başlayacaksınız ve tamamen işlevsel bir ASP.NET MVC 4 Web uygulamasına sahip olana kadar bu uygulamayı oluşturacaksınız.You will start with a simple application and will build it until you have a fully functional ASP.NET MVC 4 Web Application.

Bu laboratuvar ASP.NET MVC 4 ile birlikte kullanılabilir.This Lab works with ASP.NET MVC 4.

Öğretici uygulamasının ASP.NET MVC 3 sürümünü araştırmak isterseniz, bunu MVC-müzik-Store' da bulabilirsiniz.If you wish to explore the ASP.NET MVC 3 version of the tutorial application, you can find it in MVC-Music-Store.

Bu uygulamalı laboratuvar, geliştiricinin HTML ve JavaScript gibi web geliştirme teknolojilerinde deneyimle karşılaşdığını varsayar.This Hands-On Lab assumes that the developer has experience in Web development technologies, such as HTML and JavaScript.

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 temelleriadresinde bulunabilir.The project specific to this lab is available at ASP.NET MVC 4 Fundamentals.

Müzik Mağazası uygulamasıThe Music Store application

Bu laboratuvarda oluşturulacak müzik deposu Web uygulaması üç ana bölümden oluşur: alışveriş, kullanıma alma ve yönetim.The Music Store web application that will be built throughout this Lab comprises three main parts: shopping, checkout, and administration. Ziyaretçiler, albümlere göre Albümler 'e göz atabilir, sepetlerine Albümler ekleyebilir, bunların seçimini gözden geçirebilir ve son olarak oturum açmaya ve siparişi tamamlamaya devam edebilir.Visitors will be able to browse albums by genre, add albums to their cart, review their selection and finally proceed to checkout to login and complete the order. Ayrıca, mağaza yöneticileri, kullanılabilir albümleri ve bunların ana özelliklerini yönetebilecektir.Additionally, store administrators will be able to manage the available albums as well as their main properties.

Müzik Mağazası ekranlarıMusic Store screens

Müzik Mağazası ekranlarıMusic Store screens

ASP.NET MVC 4 EssentialsASP.NET MVC 4 Essentials

Müzik deposu uygulaması, bir uygulamayı üç ana bileşene ayıran mimari bir model olan model görünüm denetleyicisi (MVC) kullanılarak oluşturulur:Music Store application will be built using Model View Controller (MVC), an architectural pattern that separates an application into three main components:

  • Modeller: model nesneleri, uygulamanın etki alanı mantığını uygulayan parçalarından oluşur.Models: Model objects are the parts of the application that implement the domain logic. Genellikle model nesneleri ayrıca bir veritabanında model durumunu alır ve depolar.Often, model objects also retrieve and store model state in a database.
  • Görünümler: Görünümler, uygulamanın kullanıcı arabirimini (UI) görüntüleyen bileşenlerdir.Views: Views are the components that display the application's user interface (UI). Bu UI, genellikle model verilerinden oluşturulur.Typically, this UI is created from the model data. Bir örnek, bir albüm nesnesinin geçerli durumuna bağlı olarak metin kutularını ve bir açılan listeyi görüntüleyen Albümler düzenleme görünümüdür.An example would be the edit view of Albums that displays text boxes and a drop-down list based on the current state of an Album object.
  • Denetleyiciler: Denetleyiciler kullanıcı etkileşimini işleyen, modeli düzenleyen ve son olarak Kullanıcı arabirimini işlemek için bir görünüm seçtiğiniz bileşenlerdir.Controllers: Controllers are the components that handle user interaction, manipulate the model, and ultimately select a view to render the UI. Bir MVC uygulamasında, görünüm yalnızca bilgileri görüntüler; denetleyici ise kullanıcı girişini ve etkileşimini işler ve bunlara yanıt verir.In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

MVC deseninin uygulamanın farklı yönlerini (Giriş mantığı, iş mantığı ve Kullanıcı arabirimi mantığı) ayıran uygulamalar oluşturmanıza yardımcı olur. bu öğeler arasında gevşek bir bağlantısı sağlanır.The MVC pattern helps you to create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. Bu ayrım, uygulamanın her seferinde bir kısmına odaklanmanıza olanak verdiğinden, bir uygulama oluşturduğunuzda karmaşıklığı yönetmenize yardımcı olur.This separation helps you manage complexity when you build an application, as it allows you to focus on one aspect of the implementation at a time. Ayrıca, MVC deseninin uygulamaları test etmek için test odaklı geliştirme (TDD) kullanımını teşvik ve ayrıca uygulamaları test etmek kolaylaşır.In addition, the MVC pattern makes it easy to test applications, also encouraging the use of test-driven development (TDD) for creating applications.

ASP.NET MVC framework, ASP.NET MVC tabanlı Web uygulamaları oluşturmak için ASP.NET Web Forms düzenine bir alternatif sağlar.The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating ASP.NET MVC-based Web applications. ASP.NET MVC Framework, çekirdek .NET Framework 'ün tüm gücünden yararlanmak için ana sayfalar ve üyelik tabanlı kimlik doğrulama gibi mevcut ASP.NET özellikleriyle tümleşik olan hafif ve yüksek düzeyde bir sunum çerçevesidir.The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web-forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication so you get all the power of the core .NET framework. Zaten kullandığınız tüm kitaplıklar ASP.NET MVC 4 ' te de kullanılabildiğinden, ASP.NET Web Forms zaten biliyorsanız, bu faydalıdır.This is useful if you are already familiar with ASP.NET Web Forms because all the libraries that you already use are available in ASP.NET MVC 4 as well.

Ayrıca, bir MVC uygulamasının üç ana bileşeni arasında gevşek bir dağıtım paralel geliştirmeyi de yükseltir.In addition, the loose coupling between the three main components of an MVC application also promotes parallel development. Örneğin, bir geliştirici görünümde çalışırken, ikinci bir geliştirici denetleyici mantığı üzerinde çalışabilir ve üçüncü bir geliştirici modeldeki iş mantığına odaklanabilir.For instance, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.

AmaçlarObjectives

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

  • Müzik Mağazası uygulaması öğreticisini temel alarak sıfırdan bir ASP.NET MVC uygulaması oluşturmaCreate an ASP.NET MVC application from scratch based on the Music Store Application tutorial
  • URL 'Leri işlemek için sitenin ana sayfasına ve ana işlevselliğine göz atmak üzere denetleyiciler ekleyinAdd Controllers to handle URLs to the Home page of the site and for browsing its main functionality
  • Stili ile birlikte görüntülenecek içeriği özelleştirmek için bir görünüm ekleyinAdd a View to customize the content displayed along with its style
  • Veri ve etki alanı mantığını içerecek ve yönetecek model sınıfları eklemeAdd Model classes to contain and manage data and domain logic
  • Denetleyici eylemlerden görünüm şablonlarına bilgi geçirmek için model görüntüleme modelini kullanınUse View Model pattern to pass information from controller actions to the view templates
  • Internet uygulamaları için ASP.NET MVC 4 yeni şablonunu keşfetExplore the ASP.NET MVC 4 new template for internet applications

Ö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 C: 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 C: Using Code Snippets".

AlıştırmalardaExercises

Bu uygulamalı laboratuvar aşağıdaki alýþtýrmalardan oluşur:This Hands-On Lab is comprised by the following exercises:

  1. Alıştırma 1: MusicStore ASP.NET MVC web uygulaması projesi oluşturmaExercise 1: Creating MusicStore ASP.NET MVC Web Application Project
  2. Alıştırma 2: denetleyici oluşturmaExercise 2: Creating a Controller
  3. Alıştırma 3: bir denetleyiciye parametre geçirmeExercise 3: Passing parameters to a Controller
  4. Alıştırma 4: görünüm oluşturmaExercise 4: Creating a View
  5. Alıştırma 5: bir görünüm modeli oluşturmaExercise 5: Creating a View Model
  6. Alıştırma 6: görünümdeki parametreleri kullanmaExercise 6: Using parameters in View
  7. Alıştırma 7: ASP.NET MVC 4 yeni şablonu etrafında bir lapExercise 7: A lap around ASP.NET MVC 4 New Template

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 dakika.Estimated time to complete this lab: 60 minutes.

Alıştırma 1: MusicStore ASP.NET MVC web uygulaması projesi oluşturmaExercise 1: Creating MusicStore ASP.NET MVC Web Application Project

Bu alıştırmada, Web için Visual Studio 2012 Express ve ana klasör kuruluşunun yanı sıra bir ASP.NET MVC uygulaması oluşturmayı öğreneceksiniz.In this exercise, you will learn how to create an ASP.NET MVC application in Visual Studio 2012 Express for Web as well as its main folder organization. Ayrıca, yeni bir denetleyici eklemeyi ve uygulamanın giriş sayfasında basit bir dize görüntülemeyi öğreneceksiniz.Additionally, you will learn how to add a new Controller and make it display a simple string in the application's home page.

Görev 1-ASP.NET MVC web uygulaması projesi oluşturmaTask 1 - Creating the ASP.NET MVC Web Application Project

  1. Bu görevde, MVC Visual Studio şablonunu kullanarak boş bir ASP.NET MVC uygulama projesi oluşturacaksınız.In this task, you will create an empty ASP.NET MVC application project using the MVC Visual Studio template. Web için vs Expressbaşlatın.Start VS Express for Web.

  2. Dosya menüsünde Yeni proje' ye tıklayın.On the File menu, click New Project.

  3. Yeni proje iletişim kutusunda, Visual C#, Web Template List altında bulunan ASP.NET MVC 4 Web uygulaması proje türünü seçin.In the New Project dialog box select the ASP.NET MVC 4 Web Application project type, located under Visual C#, Web template list.

  4. Adı Mvcmusicstoreolarak değiştirin.Change the Name to MvcMusicStore.

  5. Çözümün konumunu, bu alıştırmanın kaynak klasöründeki yeni bir Başlangıç klasörü içinde ayarlayın, örneğin [-hol-Path] \Source\ex01-creatingmusicstoreproject\begın.Set the location of the solution inside a new Begin folder in this Exercise's Source folder, for example [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Tamam’a tıklayın.Click OK.

    Yeni proje oluştur Iletişim kutusuCreate New Project Dialog Box

    Yeni proje oluştur Iletişim kutusuCreate New Project Dialog Box

  6. Yeni ASP.NET MVC 4 projesi Iletişim kutusunda temel şablonu seçin ve Görünüm altyapısının seçili olduğundan emin olun.In the New ASP.NET MVC 4 Project dialog box select the Basic template and make sure that the View engine selected is Razor. Tamam’a tıklayın.Click OK.

    Yeni ASP.NET MVC 4 projesi Iletişim kutusuNew ASP.NET MVC 4 Project Dialog Box

    Yeni ASP.NET MVC 4 projesi Iletişim kutusuNew ASP.NET MVC 4 Project Dialog Box

Görev 2-çözüm yapısını keşfetmeTask 2 - Exploring the Solution Structure

ASP.NET MVC Framework, MVC modelini destekleyen Web uygulamaları oluşturmanıza yardımcı olan bir Visual Studio proje şablonu içerir.The ASP.NET MVC framework includes a Visual Studio project template that helps you create Web applications supporting the MVC pattern. Bu şablon, gerekli klasörler, öğe şablonları ve yapılandırma dosyası girişleriyle yeni bir ASP.NET MVC web uygulaması oluşturur.This template creates a new ASP.NET MVC Web application with the required folders, item templates, and configuration-file entries.

Bu görevde, ilgili öğeleri ve bunların ilişkilerini anlamak için çözüm yapısını inceleyeceksiniz.In this task, you will examine the solution structure to understand the elements that are involved and their relationships. ASP.NET MVC çerçevesi varsayılan olarak yapılandırma" yaklaşımına "bir kural kullandığından ve klasör adlandırma kurallarına göre bazı varsayılan varsayımlar yaptığından, aşağıdaki klasörler tüm ASP.NET MVC uygulamasına dahil edilmiştir.The following folders are included in all the ASP.NET MVC application because the ASP.NET MVC framework by default uses a "convention over configuration" approach, and makes some default assumptions based on folder naming conventions.

  1. Proje oluşturulduktan sonra, sağ taraftaki Çözüm Gezgini oluşturulan klasör yapısını gözden geçirin:Once the project is created, review the folder structure that has been created in the Solution Explorer on the right side:

    Çözüm Gezgini MVC klasör yapısı ASP.NETASP.NET MVC Folder structure in Solution Explorer

    Çözüm Gezgini MVC klasör yapısı ASP.NETASP.NET MVC Folder structure in Solution Explorer

    1. Denetleyici.Controllers. Bu klasör denetleyici sınıflarını içerir.This folder will contain the controller classes. MVC tabanlı bir uygulamada, denetleyiciler son kullanıcı etkileşimini işlemekten, modeli işlemeye ve sonunda Kullanıcı arabirimini işlemek için bir görünüm seçmeye sorumludur.In an MVC based application, controllers are responsible for handling end user interaction, manipulating the model, and ultimately choosing a view to render the UI.

      Note

      MVC çerçevesi, tüm denetleyicilerin adlarının "denetleyicisi"(örneğin, HomeController, LoginController veya ProductController) bitmesini gerektirir.The MVC framework requires the names of all controllers to end with "Controller"-for example, HomeController, LoginController, or ProductController.

    2. Modeller.Models. Bu klasör, MVC web uygulaması için uygulama modelini temsil eden sınıflar için sağlanır.This folder is provided for classes that represent the application model for the MVC Web application. Bu genellikle nesneleri tanımlayan kodu ve veri deposuyla etkileşim kurma mantığını içerir.This usually includes code that defines objects and the logic for interacting with the data store. Genellikle, gerçek model nesneleri ayrı sınıf kitaplıklarında olacaktır.Typically, the actual model objects will be in separate class libraries. Ancak, yeni bir uygulama oluşturduğunuzda, sınıfları dahil edebilir ve ardından bunları geliştirme döngüsünün sonraki bir noktasında ayrı sınıf kitaplıklarına taşıyabilirsiniz.However, when you create a new application, you might include classes and then move them into separate class libraries at a later point in the development cycle.

    3. Görünümler.Views. Bu klasör, uygulamanın kullanıcı arabirimini görüntülemekten sorumlu olan görünümler için önerilen konumdur.This folder is the recommended location for views, the components responsible for displaying the application's user interface. Görünümler, işleme görünümleriyle ilgili diğer dosyalara ek olarak. aspx,. ascx,. cshtml ve. Master dosyalarını kullanır.Views use .aspx, .ascx, .cshtml and .master files, in addition to any other files that are related to rendering views. Görünümler klasörü her denetleyici için bir klasör içerir; klasör, denetleyici adı ön eki ile adlandırılır.Views folder contains a folder for each controller; the folder is named with the controller-name prefix. Örneğin, HomeControlleradlı bir denetleyiciniz varsa, görünümler klasörü Home adlı bir klasör içerir.For example, if you have a controller named HomeController, the Views folder will contain a folder named Home. Varsayılan olarak, ASP.NET MVC çerçevesi bir görünüm yüklediğinde, Views\controllerName klasöründe istenen görünüm adına sahip bir. aspx dosyası arar (Görünümler [ControllerName] [action]. aspx) veya Razor görünümleri Için (Görünümler [ControllerName] [action]. cshtml).By default, when the ASP.NET MVC framework loads a view, it looks for an .aspx file with the requested view name in the Views\controllerName folder (Views[ControllerName][Action].aspx) or (Views[ControllerName][Action].cshtml) for Razor Views.

      Note

      Daha önce listelenen klasörlere ek olarak, MVC web uygulaması genel URL yönlendirme varsayılanlarını ayarlamak için Global. asax dosyasını kullanır ve uygulamayı yapılandırmak için Web. config dosyasını kullanır.In addition to the folders listed previously, an MVC Web application uses the Global.asax file to set global URL routing defaults, and it uses the Web.config file to configure the application.

Görev 3-HomeController eklemeTask 3 - Adding a HomeController

MVC çerçevesini kullanmayan ASP.NET uygulamalarında, Kullanıcı etkileşimi sayfalar etrafında düzenlenir ve bu sayfalardaki olayları oluşturma ve işleme.In ASP.NET applications that do not use the MVC framework, user interaction is organized around pages, and around raising and handling events from those pages. Buna karşılık, ASP.NET MVC uygulamalarıyla Kullanıcı etkileşimi denetleyiciler ve eylem yöntemleri etrafında düzenlenmiştir.In contrast, user interaction with ASP.NET MVC applications is organized around controllers and their action methods.

Diğer taraftan, ASP.NET MVC çerçevesi, denetleyicileri olarak adlandırılan sınıflarla URL 'Leri eşler.On the other hand, ASP.NET MVC framework maps URLs to classes that are referred to as controllers. Denetleyiciler gelen istekleri işler, Kullanıcı giriş ve etkileşimlerini işler, uygun uygulama mantığını yürütür ve istemciye geri gönderme (HTML görüntüleme, bir dosyayı indirme, farklı bir URL 'ye yönlendirme vb.) yanıtını belirleme.Controllers process incoming requests, handle user input and interactions, execute appropriate application logic and determine the response to send back to the client (display HTML, download a file, redirect to a different URL, etc.). HTML görüntüleme durumunda, bir denetleyici sınıfı genellikle istek için HTML biçimlendirmesi oluşturmak üzere ayrı bir görünüm bileşeni çağırır.In the case of displaying HTML, a controller class typically calls a separate view component to generate the HTML markup for the request. Bir MVC uygulamasında, görünüm yalnızca bilgileri görüntüler; denetleyici ise kullanıcı girişini ve etkileşimini işler ve bunlara yanıt verir.In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

Bu görevde, müzik deposu sitesinin giriş sayfasına URL 'Leri işleyecek bir denetleyici sınıfı ekleyeceksiniz.In this task, you will add a Controller class that will handle URLs to the Home page of the Music Store site.

  1. Çözüm Gezgini içindeki denetleyiciler klasörüne sağ tıklayın, Ekle ve sonra Denetleyici komutu ' nı seçin:Right-click Controllers folder within the Solution Explorer, select Add and then Controller command:

    Denetleyici komutu eklemeAdd a Controller Command

    Denetleyici komutu EkleAdd Controller Command

  2. Denetleyici Ekle iletişim kutusu görünür.The Add Controller dialog appears. Denetleyiciyi HomeController olarak adlandırın ve Ekletuşuna basın.Name the controller HomeController and press Add.

    Denetleyici Ekle Iletişim kutusuAdd Controller Dialog

    Denetleyici Ekle Iletişim kutusuAdd Controller Dialog

  3. HomeController.cs dosyası denetleyiciler klasöründe oluşturulur.The file HomeController.cs is created in the Controllers folder. HomeController 'ın Dizin eyleminde bir dize döndürmesini sağlamak Için, index metodunu aşağıdaki kodla değiştirin:In order to have the HomeController return a string on its Index action, replace the Index method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex1 HomeController dizini)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex1 HomeController Index)

    public string Index()
    {
        return "Hello from Home";
    }
    

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

Bu görevde, uygulamayı bir Web tarayıcısında deneyirsiniz.In this task, you will try out the Application in a web browser.

  1. Uygulamayı çalıştırmak için F5 tuşuna basın.Press F5 to run the Application. Proje derlenir ve yerel IIS Web sunucusu başlatılır.The project is compiled and the local IIS Web Server starts. Yerel IIS Web sunucusu, Web sunucusunun URL 'sini işaret eden bir Web tarayıcısını otomatik olarak açar.The local IIS Web Server will automatically open a web browser pointing to the URL of the Web server.

    Web tarayıcısında çalışan uygulamaApplication running in a web browser

    Web tarayıcısında çalışan uygulamaApplication running in a web browser

    Note

    Yerel IIS Web sunucusu, bir rastgele boş bağlantı noktası numarasında Web sitesini çalıştırır.The local IIS Web Server will run the website on a random free port number. Yukarıdaki şekilde, site http://localhost:50103/çalışıyor, bu nedenle 50103 numaralı bağlantı noktasını kullanıyor.In the figure above, the site is running at http://localhost:50103/, so it's using port 50103. Bağlantı noktası numaranız farklılık gösterebilir.Your port number may vary.

  2. Tarayıcıyı kapatın.Close the browser.

Alıştırma 2: denetleyici oluşturmaExercise 2: Creating a Controller

Bu alıştırmada, müzik Mağazası uygulamasının basit işlevlerini uygulamak için denetleyiciyi nasıl güncelleştireceğinizi öğreneceksiniz.In this exercise, you will learn how to update the controller to implement simple functionality of the Music Store application. Bu denetleyici, aşağıdaki belirli isteklerin her birini işlemek için eylem yöntemleri tanımlayacaktır:That controller will define action methods to handle each of the following specific requests:

  • Müzik deposundaki müzik tarzlarındaki bir listeleme sayfasıA listing page of the music genres in the Music Store
  • Belirli bir tarz için tüm müzik albümlerini listeleyen bir tarayıcı sayfasıA browse page that lists all of the music albums for a particular genre
  • Belirli bir müzik albümünden ilgili bilgileri gösteren Ayrıntılar sayfasıA details page that shows information about a specific music album

Bu alıştırma kapsamında, bu eylemler şimdi yalnızca bir dize döndürür.For the scope of this exercise, those actions will simply return a string by now.

Görev 1-yeni bir StoreController sınıfı eklemeTask 1 - Adding a New StoreController Class

Bu görevde yeni bir denetleyici ekleyeceksiniz.In this task, you will add a new Controller.

  1. Zaten açık değilse 2012 Web için vs Expressbaşlatın.If not already open, start VS Express for Web 2012.

  2. Dosya menüsünde Proje Aç' ı seçin.In the File menu, choose Open Project. Proje Aç iletişim kutusunda Source\ex02-creatingacontroller\beginöğesine göz atın, Başlat. sln ' yi seçin ve ' a tıklayın.In the Open Project dialog, browse to Source\Ex02-CreatingAController\Begin, select Begin.sln and click Open. Alternatif olarak, önceki Alıştırmayı tamamladıktan sonra elde ettiğiniz çözüme devam edebilirsiniz.Alternatively, you may continue with the solution that you obtained after 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.

  3. Yeni denetleyiciyi ekleyin.Add the 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ı storecontrollerolarak değiştirin ve Ekle' ye tıklayın.Change the Controller Name to StoreController, and click Add.

    Denetleyici Ekle Iletişim kutusuAdd Controller Dialog

    Denetleyici Ekle Iletişim kutusuAdd Controller Dialog

Görev 2-StoreController 'ın eylemlerini değiştirmeTask 2 - Modifying the StoreController's Actions

Bu görevde, Eylemlerolarak adlandırılan denetleyici yöntemlerini değiştirirsiniz.In this task, you will modify the Controller methods that are called actions. Eylemler, URL isteklerini işlemekten ve tarayıcıya geri gönderilmesi gereken içeriği veya URL 'YI çağıran kullanıcıya göre belirlenir.Actions are responsible for handling URL requests and determining the content that should be sent back to the browser or user that invoked the URL.

  1. Storecontroller sınıfının bir Dizin yöntemi zaten var.The StoreController class already has an Index method. Müzik mağazasının tüm tarzını listeleyen sayfayı uygulamak için bu laboratuvarın ilerleyen kısımlarında kullanacaksınız.You will use it later in this Lab to implement the page that lists all genres of the music store. Şimdilik, index metodunu Store. Index ()"bir dize "döndüren aşağıdaki kodla değiştirin.For now, just replace the Index method with the following code that returns a string "Hello from Store.Index()":

    (Kod parçacığı- ASP.NET MVC 4 temelleri-EX2 StoreController dizini)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex2 StoreController Index)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. Gezinme ve ayrıntı yöntemleri ekleyin.Add Browse and Details methods. Bunu yapmak için Storecontrolleröğesine aşağıdaki kodu ekleyin:To do this, add the following code to the StoreController:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-EX2 StoreController BrowseAndDetails)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex2 StoreController BrowseAndDetails)

    // GET: /Store/Browse
    public string Browse()
    {
      return "Hello from Store.Browse()";
    }
    
    // GET: /Store/Details  
    public string Details()
    {
      return "Hello from Store.Details()";
    }
    

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

Bu görevde, uygulamayı bir Web tarayıcısında deneyirsiniz.In this task, you will try out the Application in a web browser.

  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. Her eylemin uygulamasını doğrulamak için URL 'YI değiştirin.Change the URL to verify each action's implementation.

    1. /Store./Store. Store. Index ()"'dan"Merhaba görürsünüz.You will see "Hello from Store.Index()".

    2. /Store/zat./Store/Browse. Store. Gözatacaksınız"Merhaba. ()" görürsünüz.You will see "Hello from Store.Browse()".

    3. /Store/details./Store/Details. Store"Hello. Details ()" görürsünüz.You will see "Hello from Store.Details()".

      Storegözatmaya göz atmaBrowsing StoreBrowse

      Tarama/Store/zatBrowsing /Store/Browse

  3. Tarayıcıyı kapatın.Close the browser.

Alıştırma 3: bir denetleyiciye parametre geçirmeExercise 3: Passing parameters to a Controller

Bu aşamada, denetleyicilerden sabit dizeler döndürmüştür.Until now, you have been returning constant strings from the Controllers. Bu alıştırmada, URL 'yi ve QueryString 'yi kullanarak bir denetleyiciye parametreleri nasıl geçitireceğinizi öğrenirsiniz ve sonra Yöntem eylemlerinin bir metinle tarayıcıya yanıt vermesini sağlayabilirsiniz.In this exercise you will learn how to pass parameters to a Controller using the URL and querystring, and then making the method actions respond with text to the browser.

Görev 1-StoreController 'a tarz parametresi ekleniyorTask 1 - Adding Genre Parameter to StoreController

Bu görevde, StorecontrollerIçindeki gözatam eylemi yöntemine parametreleri göndermek için QueryString kullanacaksınız.In this task, you will use the querystring to send parameters to the Browse action method in the StoreController.

  1. Zaten açık değilse, Web için vs Expressbaşlatın.If not already open, start VS Express for Web.

  2. Dosya menüsünde Proje Aç' ı seçin.In the File menu, choose Open Project. Proje Aç iletişim kutusunda Source\ex03-passingparameterstoacontroller\beginöğesine göz atın, BEGIN. sln ' yi seçin ve ' a tıklayın.In the Open Project dialog, browse to Source\Ex03-PassingParametersToAController\Begin, select Begin.sln and click Open. Alternatif olarak, önceki Alıştırmayı tamamladıktan sonra elde ettiğiniz çözüme devam edebilirsiniz.Alternatively, you may continue with the solution that you obtained after 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.

  3. Storecontroller sınıfını açın.Open StoreController class. Bunu yapmak için, Çözüm Gezgini, denetleyiciler klasörünü genişletin ve StoreController.csöğesine çift tıklayın.To do this, in the Solution Explorer, expand the Controllers folder and double-click StoreController.cs.

  4. Belirli bir tarz için istek için bir dize parametresi ekleyerek, gözatıcı yöntemini değiştirin.Change the Browse method, adding a string parameter to request for a specific genre. ASP.NET MVC, çağrıldığında otomatik olarak herhangi bir QueryString veya form post parametrelerini bu eylem yöntemine iletir.ASP.NET MVC will automatically pass any querystring or form post parameters named genre to this action method when invoked. Bunu yapmak için, aşağıdaki kodla birlikte, Gözatılacak yöntemi değiştirin:To do this, replace the Browse method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex3 StoreController BrowseMethod)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex3 StoreController BrowseMethod)

    // GET: /Store/Browse?genre=Disco   
    public string Browse(string genre)
    {
      string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
    
      return message;
    }
    

Note

Kullanıcıların JavaScript 'i/Store/gözatmaya benzer bir bağlantıyla ekleme almasını engelleyecek şekilde HttpUtility. HtmlEncode yardımcı programı yöntemini kullanıyorsunuz musunuz? Tarz =<betiği>Window. Location = 'http://hackersite.com'</scrıpt> .You are using the HttpUtility.HtmlEncode utility method to prevents users from injecting Javascript into the View with a link like /Store/Browse?Genre=<script>window.location='http://hackersite.com'</script>.

Daha fazla açıklama için lütfen Bu MSDN makalesiniziyaret edin.For further explanation, please visit this msdn article.

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

Bu görevde, uygulamayı bir Web tarayıcısında dener ve tarz parametresini kullanacaksınız.In this task, you will try out the Application in a web browser and use the genre 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. URL 'YI /Store/zat değiştirin mi? Tarzı = disco , eylemin tarz parametresini aldığını doğrular.Change the URL to /Store/Browse?Genre=Disco to verify that the action receives the genre parameter.

    Göz atma StoreBrowseGenre = discoBrowsing StoreBrowseGenre=Disco

    /Store/zat Gözatılıyor musunuz? Tarz = discoBrowsing /Store/Browse?Genre=Disco

  3. Tarayıcıyı kapatın.Close the browser.

Görev 3-URL 'ye gömülü bir ID parametresi eklemeTask 3 - Adding an Id Parameter Embedded in the URL

Bu görevde, Storecontroller'ın Ayrıntılar eylem yöntemine bir ID parametresi geçirmek için URL 'yi kullanacaksınız.In this task, you will use the URL to pass an Id parameter to the Details action method of the StoreController. ASP.NET MVC 'nin varsayılan yönlendirme kuralı, eylem yöntemi adından sonra, IDadlı bir parametre olarak bir URL 'nin segmentini değerlendirmek için kullanılır. Eylem yönteminizin ID adlı parametresi varsa, ASP.NET MVC URL segmentini otomatik olarak parametre olarak size iletir.ASP.NET MVC's default routing convention is to treat the segment of a URL after the action method name as a parameter named Id. If your action method has parameter named Id, then ASP.NET MVC will automatically pass the URL segment to you as a parameter. URL deposu/Ayrıntılar/5' de, kimlik 5olarak yorumlanacaktır.In the URL Store/Details/5, Id will be interpreted as 5.

  1. Storecontrolleröğesinin Details metodunu, IDadlı bir int parametresi ekleyerek değiştirin. Bunu yapmak için, Details yöntemini aşağıdaki kodla değiştirin:Change the Details method of the StoreController, adding an int parameter called id. To do this, replace the Details method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex3 StoreController ayrıntıları yöntemi)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
    public string Details(int id)
    {
      string message = "Store.Details, ID = " + id;
    
      return message;
    }
    

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

Bu görevde, uygulamayı bir Web tarayıcısında deney, kimlik parametresini kullanacaksınız.In this task, you will try out the Application in a web browser and use the Id 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. İşlemin ID parametresini aldığını doğrulamak için URL 'YI /Store/details/5 olarak değiştirin.Change the URL to /Store/Details/5 to verify that the action receives the id parameter.

    StoreDetails5 gözatmaBrowsing StoreDetails5

    Tarama/Store/Details/5Browsing /Store/Details/5

Alıştırma 4: görünüm oluşturmaExercise 4: Creating a View

Şimdiye kadar, denetleyici eylemlerinden dizeler döndürmüştür.So far you have been returning strings from controller actions. Bu, denetleyicilerin nasıl çalıştığını anlamak için kullanışlı bir yoldur, ancak gerçek Web uygulamalarınızın nasıl derlendiğini değildir.Although that is a useful way of understanding how controllers work, it is not how your real Web applications are built. Görünümler, şablon dosyaları kullanımıyla tarayıcıya geri HTML oluşturmaya yönelik daha iyi bir yaklaşım sağlayan bileşenlerdir.Views are components that provide a better approach for generating HTML back to the browser with the use of template files.

Bu alıştırmada, genel HTML içeriği için bir şablon kurmak üzere bir düzen ana sayfası eklemeyi öğrenirsiniz, sitenin görünümünü ve hisyi iyileştirmek için bir stil sayfası ve son olarak HomeController 'ın HTML döndürmesini sağlayan bir görünüm şablonu.In this exercise you will learn how to add a layout master page to setup a template for common HTML content, a StyleSheet to enhance the look and feel of the site and finally a View template to enable HomeController to return HTML.

Görev 1-_Layout. cshtml dosyasını değiştirmeTask 1 - Modifying the file _layout.cshtml

~/Views/Shared/_Layout. cshtml dosyası, Web sitesinin tamamında kullanılacak ortak HTML için bir şablon ayarlamanıza olanak sağlar.The file ~/Views/Shared/_layout.cshtml allows you to setup a template for common HTML to use across the entire website. Bu görevde, ana sayfa ve depolama alanı bağlantılarıyla ortak bir üst bilgiyle bir düzen ana sayfası ekleyeceksiniz.In this task you will add a layout master page with a common header with links to the Home page and Store area.

  1. Zaten açık değilse, Web için vs Expressbaşlatın.If not already open, start VS Express for Web.

  2. Dosya menüsünde Proje Aç' ı seçin.In the File menu, choose Open Project. Proje Aç iletişim kutusunda Source\ex04-creatingaview\beginöğesine göz atın, BEGIN. sln ' yi seçin ve ' a tıklayın.In the Open Project dialog, browse to Source\Ex04-CreatingAView\Begin, select Begin.sln and click Open. Alternatif olarak, önceki Alıştırmayı tamamladıktan sonra elde ettiğiniz çözüme devam edebilirsiniz.Alternatively, you may continue with the solution that you obtained after 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.

  3. _Layout. cshtml dosyası sitedeki tüm sayfalar için HTML kapsayıcı düzeni içerir.The file _layout.cshtml contains the HTML container layout for all pages on the site. HTML yanıtı için <html> öğesini ve <baş> ve <gövde> öğelerini içerir.It includes the <html> element for the HTML response, as well as the <head> and <body> elements. HTML gövdesi içindeki @RenderBody() , şablonları görüntüleme, Dinamik içerikle doldurabilebilecekler bölgelerini belirler.@RenderBody() within the HTML body identify regions that view templates will be able to fill in with dynamic content. (C#)(C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  4. Sitedeki tüm sayfalarda giriş sayfası ve depolama alanı bağlantılarıyla ortak bir üst bilgi ekleyin.Add a common header with links to the Home page and Store area on all pages in the site. Bunu yapmak için, aşağıdaki kodu gövde> deyimin altına ekleyin <.In order to do that, add the following code below <body> statement. (C#)(C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  5. Her sayfanın gövde bölümünü işlemek için bir div ekleyin.Include a div to render the body section of each page. @RenderBody() şu vurgulanmış kodla değiştirin: (C#)Replace @RenderBody() with the following highlighted code: (C#)

    ...
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         <div id="body">
              @RenderSection("featured", required: false)
              <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
              </section>
         </div>
         ...
    </body>
    </html>
    

    Note

    Emin misiniz?Did you know? Visual Studio 2012, yaygın olarak kullanılan kodu HTML, kod dosyaları ve daha fazlasını eklemenizi kolaylaştıran kod parçacıkları içerir!Visual Studio 2012 has snippets that make it easy to add commonly used code in HTML, code files and more! <div> yazarak deneyin ve tüm div etiketi eklemek için Tab tuşuna iki kez basın.Try it out by typing <div> and pressing TAB twice to insert a complete div tag.

Görev 2-CSS stil sayfası eklemeTask 2 - Adding CSS Stylesheet

Boş proje şablonu, yalnızca temel formları ve doğrulama iletilerini göstermek için kullanılan stilleri içeren çok kolay bir CSS dosyası içerir.The empty project template includes a very streamlined CSS file which just includes styles used to display basic forms and validation messages. Sitenin görünüm ve hisde gelişmesini sağlamak için ek CSS ve görüntüler (büyük olasılıkla tasarımcı tarafından sağlanıyor) kullanacaksınız.You will use additional CSS and images (potentially provided by a designer) in order to enhance the look and feel of the site.

Bu görevde, sitenin stillerini tanımlamak için bir CSS stil sayfası ekleyeceksiniz.In this task, you will add a CSS stylesheet to define the styles of the site.

  1. CSS dosyası ve görüntüleri, bu laboratuvarın Source\assets\content klasörüne dahildir.The CSS file and images are included in the Source\Assets\Content folder of this Lab. Bunları uygulamaya eklemek için, bir Windows Gezgini penceresinden içeriğini aşağıda gösterildiği gibi Web için Visual Studio Express Çözüm Gezgini sürükleyin:In order to add them to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Studio Express for Web, as shown below:

    Stil içeriğini sürüklemeDragging style contents

    Stil içeriğini sürüklemeDragging style contents

  2. Site. css dosyasını ve var olan bazı görüntüleri değiştirmeyi onaylamanız istenir bir uyarı iletişim kutusu görüntülenir.A warning dialog will appear, asking for confirmation to replace Site.css file and some existing images. Tüm öğelere Uygula ' yı Işaretleyin ve Evet' e tıklayın.Check Apply to all items and click Yes.

Görev 3-görünüm şablonu eklemeTask 3 - Adding a View Template

Bu görevde, Bu alıştırmada eklenen düzen ana sayfasını ve CSS 'yi kullanacak HTML yanıtı oluşturmak için bir görünüm şablonu ekleyeceksiniz.In this task, you will add a View template to generate the HTML response that will use the layout master page and CSS added in this exercise.

  1. Sitenin giriş sayfasına göz atarken bir görünüm şablonu kullanmak için önce bir dize döndürmek yerine, HomeController Dizin yönteminin bir Görünümdöndürdüğünü belirtmeniz gerekir.To use a View template when browsing the site's home page, you will first need to indicate that instead of returning a string, the HomeController Index method will return a View. HomeController sınıfını açın ve bir ActionResultdöndürecek şekilde Dizin metodunu değiştirin ve () görünümünügeri döndürün.Open HomeController class and change its Index method to return an ActionResult, and have it return View().

    (Kod parçacığı- ASP.NET MVC 4 temelleri-EX4 HomeController dizini)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex4 HomeController Index)

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. Şimdi uygun bir görünüm şablonu eklemeniz gerekiyor.Now, you need to add an appropriate View template. Bunu yapmak için, Dizin eylemi yönteminin içine sağ tıklayın ve Görünüm Ekle ' yi seçin.To do this, 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.

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

    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 kutusu bir görünüm şablonu dosyası oluşturacak şekilde görünür.The Add View Dialog will appear to generate a View template file. Varsayılan olarak, bu iletişim kutusu şablonu kullanacak eylem yöntemiyle eşleşecek şekilde görünüm şablonunun adını önceden doldurur.By default, this dialog pre-populates the name of the View template so that it matches the action method that will use it. HomeController içindeki Dizin eylemi yöntemi Içinde Görünüm Ekle bağlam menüsünü kullandığınız için, Görünüm Ekle Iletişim kutusunun varsayılan görünüm adı olarak dizini vardır.Because you used the Add View context menu within the Index action method within the HomeController, the Add View dialog has Index as the default view name. Ekle'yi tıklatın.Click Add.

    Görünüm Ekle Iletişim kutusuAdd View Dialog

    Görünüm Ekle Iletişim kutusuAdd View Dialog

  4. Visual Studio, Views\home klasörünün Içinde bir Index. cshtml görünüm şablonu oluşturur ve ardından açar.Visual Studio generates an Index.cshtml view template inside the Views\Home folder and then opens it.

    Ana Dizin görünümü oluşturulduHome Index view created

    Ana Dizin görünümü oluşturulduHome Index view created

    Note

    Index. cshtml dosyasının adı ve konumu geçerlidir ve varsayılan ASP.NET MVC adlandırma kurallarına uyar.name and location of the Index.cshtml file is relevant and follows the default ASP.NET MVC naming conventions.

    \Views*Home* klasörü, denetleyici adıyla (giriş denetleyicisi) eşleşir.The folder \Views*Home* matches the controller name (Home Controller). Görünüm şablonu adı (Dizin), görünümü görüntüleyen denetleyici eylemi yöntemiyle eşleşir.The View template name (Index), matches the controller action method which will be displaying the View.

    Bu şekilde, ASP.NET MVC bir görünüm döndürmek için bu adlandırma kuralını kullanırken bir görünüm şablonunun adını veya konumunu açıkça belirtmek zorunda kalmaktan kaçınır.This way, ASP.NET MVC avoids having to explicitly specify the name or location of a View template when using this naming convention to return a View.

  5. Oluşturulan görünüm şablonu, daha önce tanımlanan _Layout. cshtml şablonunu temel alır.The generated View template is based on the _layout.cshtml template earlier defined. ViewBag. title özelliğini Homeolarak güncelleştirin ve ana içeriği aşağıdaki kodda gösterildiği gibi giriş sayfasıolacak şekilde değiştirin:Update the ViewBag.Title property to Home, and change the main content to This is the Home Page, as shown in the code below:

    @{
        ViewBag.Title = "Home";
    }
    
    <h2>This is the Home Page</h2>
    
  6. Çözüm Gezgini Mvcmusicstore projesini seçin ve F5 tuşuna basarak uygulamayı çalıştırın.Select MvcMusicStore project in the Solution Explorer and Press F5 to run the Application.

Görev 4: doğrulamaTask 4: Verification

Önceki alıştırmada bulunan tüm adımları doğru bir şekilde gerçekleştirdiğinizi doğrulamak için aşağıdaki gibi ilerleyin:In order to verify that you have correctly performed all the steps in the previous exercise, proceed as follows:

Uygulama bir tarayıcıda açıldığında şunları unutmayın:With the application opened in a browser, you should note that:

  1. HomeController 'ın Dizin eylemi yöntemi, görünüm şablonu standart adlandırma kuralına uyduğundan, ' ın Return View () olarak adlandırılan kod olsa da \Views\home\ındex.cshtml görünüm şablonunu buldu ve görüntülendi.The HomeController's Index action method found and displayed the \Views\Home\Index.cshtml View template, even though the code called return View(), because the View template followed the standard naming convention.

  2. Giriş sayfasında \Views\home\ındex.cshtml görünüm şablonu içinde tanımlanan hoş geldiniz iletisi görüntülenir.The Home Page displays the welcome message defined within the \Views\Home\Index.cshtml view template.

  3. Giriş sayfası _Layout. cshtml şablonunu kullanıyor ve bu nedenle hoş geldiniz iletisi standart site HTML düzeni içinde yer alır.The Home Page is using the _layout.cshtml template, and so the welcome message is contained within the standard site HTML layout.

    Tanımlı LayoutPage ve Style kullanarak giriş dizini görünümüHome Index View using the defined LayoutPage and style

    Tanımlı LayoutPage ve Style kullanarak giriş dizini görünümüHome Index View using the defined LayoutPage and style

Alıştırma 5: bir görünüm modeli oluşturmaExercise 5: Creating a View Model

Şimdiye kadar, görünümleriniz, sabit kodlanmış HTML 'yi görüntülemelidir, ancak dinamik Web uygulamaları oluşturmak için, görünüm şablonu denetleyiciden bilgi almalıdır.So far, you made your Views display hardcoded HTML, but, in order to create dynamic web applications, the View template should receive information from the Controller. Bu amaç için kullanılan yaygın bir teknik, denetleyicinin uygun HTML yanıtını oluşturmak için gereken tüm bilgileri paketetmesine olanak tanıyan ViewModel deseninin yer aldığı bir yöntemdir.One common technique to be used for that purpose is the ViewModel pattern, which allows a Controller to package up all the information needed to generate the appropriate HTML response.

Bu alıştırmada, ViewModel sınıfı oluşturmayı ve gerekli özellikleri eklemeyi öğreneceksiniz: depodaki tür tarzların sayısı ve bu tarzların listesi.In this exercise, you will learn how to create a ViewModel class and add the required properties: the number of genres in the store and a list of those genres. Ayrıca, StoreController 'ı oluşturulan ViewModel kullanacak şekilde güncelleyebilir ve son olarak, sayfada bahsedilen özellikleri görüntüleyecek yeni bir görünüm şablonu oluşturacaksınız.You will also update the StoreController to use the created ViewModel, and finally, you will create a new View template that will display the mentioned properties in the page.

Görev 1-ViewModel sınıfı oluşturmaTask 1 - Creating a ViewModel Class

Bu görevde, Depo tarzı listeleme senaryosunu uygulayacak bir ViewModel sınıfı oluşturacaksınız.In this task, you will create a ViewModel class that will implement the Store genre listing scenario.

  1. Zaten açık değilse, Web için vs Expressbaşlatın.If not already open, start VS Express for Web.

  2. Dosya menüsünde Proje Aç' ı seçin.In the File menu, choose Open Project. Proje Aç iletişim kutusunda Source\ex05-creatingaviewmodel\begınkonumuna gidin, BEGIN. sln ' yi seçin ve ' a tıklayın.In the Open Project dialog, browse to Source\Ex05-CreatingAViewModel\Begin, select Begin.sln and click Open. Alternatif olarak, önceki Alıştırmayı tamamladıktan sonra elde ettiğiniz çözüme devam edebilirsiniz.Alternatively, you may continue with the solution that you obtained after 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.

  3. ViewModel tutmak için Viewmodeller klasörü oluşturun.Create a ViewModels folder to hold the ViewModel. Bunu yapmak için, en üst düzey Mvcmusicstore projesine sağ tıklayın, Ekle ve Yeni klasör' i seçin.To do this, right-click the top-level MvcMusicStore project, select Add and then New Folder.

    Yeni klasör eklemeAdding a new folder

    Yeni klasör eklemeAdding a new folder

  4. Klasör Viewmodelleriniadlandırın.Name the folder ViewModels.

    Çözüm Gezgini Viewmodeller klasörüViewModels folder in Solution Explorer

    Çözüm Gezgini Viewmodeller klasörüViewModels folder in Solution Explorer

  5. ViewModel sınıfı oluşturun.Create a ViewModel class. Bunu yapmak için, kısa süre önce oluşturulan Viewmodeller klasörüne sağ tıklayın, Ekle ' yi ve ardından Yeni öğe' yi seçin.To do this, right-click on the ViewModels folder recently created, select Add and then New Item. Kodaltında, sınıf öğesini seçin ve dosyayı StoreIndexViewModel.csolarak adlandırın, ardından Ekle' ye tıklayın.Under Code, choose the Class item and name the file StoreIndexViewModel.cs, then click Add.

    Yeni sınıf eklemeAdding a new Class

    Yeni sınıf eklemeAdding a new Class

    Storeındexviewmodel sınıfı oluşturuluyorCreating StoreIndexViewModel class

    Storeındexviewmodel sınıfı oluşturuluyorCreating StoreIndexViewModel class

Görev 2-ViewModel sınıfına özellikler eklemeTask 2 - Adding Properties to the ViewModel class

Beklenen HTML yanıtını oluşturmak için StoreController 'dan görünüm şablonuna geçirilecek iki parametre vardır: depodaki tür tarzların sayısı ve bu tarzların bir listesi.There are two parameters to be passed from the StoreController to the View template in order to generate the expected HTML response: the number of genres in the store and a list of those genres.

Bu görevde, bu 2 özellikleri Storeındexviewmodel sınıfına ekleyeceksiniz: numberoftarzlar (bir tamsayı) ve tarzlar (dizeler listesi).In this task, you will add those 2 properties to the StoreIndexViewModel class: NumberOfGenres (an integer) and Genres (a list of strings).

  1. Storeındexviewmodel sınıfına numberoftarzlar ve tarzlar özellikleri ekleyin.Add NumberOfGenres and Genres properties to the StoreIndexViewModel class. Bunu yapmak için, aşağıdaki 2 satırı sınıf tanımına ekleyin:To do this, add the following 2 lines to the class definition:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-eX5 Storeındexviewmodel özellikleri)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex5 StoreIndexViewModel properties)

    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
    
        public List<string> Genres { get; set; }
    }
    

Note

{Get; set;} gösterimi, otomatik olarak C#uygulanan özellikler özelliğini kullanır.The { get; set; } notation makes use of C#'s auto-implemented properties feature. Bir destek alanı bildirmek zorunda kalmadan özelliğin avantajlarını sağlar.It provides the benefits of a property without requiring us to declare a backing field.

Görev 3-StoreController 'ı Storeındexviewmodel kullanacak şekilde güncelleştirmeTask 3 - Updating StoreController to use the StoreIndexViewModel

Storeındexviewmodel sınıfı, bir yanıt oluşturmak Için Storecontroller'ın Dizin yönteminden bir görünüm şablonuna geçmesi gereken bilgileri saklar.The StoreIndexViewModel class encapsulates the information needed to pass from StoreController's Index method to a View template in order to generate a response.

Bu görevde StorecontrollerStoreındexviewmodelkullanacak şekilde güncelleşolursunuz.In this task, you will update the StoreController to use the StoreIndexViewModel.

  1. Storecontroller sınıfını açın.Open StoreController class.

    StoreController sınıfı açılıyorOpening StoreController class

    StoreController sınıfı açılıyorOpening StoreController class

  2. Storecontroller'Dan Storeındexviewmodel sınıfını kullanmak için storecontroller kodunun en üstüne aşağıdaki ad alanını ekleyin:In order to use the StoreIndexViewModel class from the StoreController, add the following namespace at the top of the StoreController code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-eX5 Storeındexviewmodel Viewmodeller kullanarak)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex5 StoreIndexViewModel using ViewModels)

    using MvcMusicStore.ViewModels;
    
  3. Storecontroller'ın Dizin eylemi yöntemini, bir storeındexviewmodel nesnesi oluşturacak ve doldurabilmesi ve sonra bir HTML yanıtı oluşturacak şekilde bir görünüm şablonuna geçirmek üzere değiştirin.Change the StoreController's Index action method so that it creates and populates a StoreIndexViewModel object and then passes it off to a View template to generate an HTML response with it.

    Note

    Laboratuvar "ASP.NET MVC modellerini ve veri erişimi" bir veritabanından mağaza tarzları listesini alan kodu yazarsınız.In Lab "ASP.NET MVC Models and Data Access" you will write code that retrieves the list of store genres from a database. Aşağıdaki kodda Storeındexviewmodel' i doldurmayacak bir kukla veri tarzı listesi oluşturacaksınız.In the following code, you will create a List of dummy data genres that will populate the StoreIndexViewModel.

    Storeındexviewmodel nesnesini oluşturup ayarladıktan sonra, görüntüleme yöntemine bir bağımsız değişken olarak geçirilir.After creating and setting up the StoreIndexViewModel object, it will be passed as an argument to the View method. Bu, görünüm şablonunun bir HTML yanıtı oluşturmak için bu nesneyi kullanacağını gösterir.This indicates that the View template will use that object to generate an HTML response with it.

  4. Index metodunu aşağıdaki kodla değiştirin:Replace the Index method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-eX5 StoreController Dizin yöntemi)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex5 StoreController Index method)

    public ActionResult Index()
    {
        // Create a list of genres
        var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};
    
        // Create our view model
        var viewModel = new StoreIndexViewModel { 
            NumberOfGenres = genres.Count(),
            Genres = genres
        };
    
        return this.View(viewModel);
    }
    

Note

Hakkında bilginiz varsa C#, bunu kullanmanın, ViewModel değişkeninin geç bağlantılı olduğunu varsayabilirsiniz.If you're unfamiliar with C#, you may assume that using var means that the viewModel variable is late-bound. Doğru değil- C# derleyici, ViewModel 'In storeındexviewmodeltüründe olduğunu belirlemek için değişkene ne atacağınızı temel alarak tür çıkarımı kullanmaktır.That's not correct - the C# compiler is using type-inference based on what you assign to the variable to determine that viewModel is of type StoreIndexViewModel. Ayrıca, yerel ViewModel değişkenini bir storeındexviewmodel türü olarak derlerken derleme zamanı denetimi ve Visual Studio kod Düzenleyicisi desteği alırsınız.Also, by compiling the local viewModel variable as a StoreIndexViewModel type you get compile-time checking and Visual Studio code-editor support.

Görev 4-Storeındexviewmodel kullanan bir görünüm şablonu oluşturmaTask 4 - Creating a View Template that Uses StoreIndexViewModel

Bu görevde, bir tür listesi görüntülemek için denetleyiciden geçirilen bir Storeındexviewmodel nesnesi kullanacak bir görünüm şablonu oluşturacaksınız.In this task, you will create a View template that will use a StoreIndexViewModel object passed from the Controller to display a list of genres.

  1. Yeni görünüm şablonunu oluşturmadan önce, görünümü Ekle Iletişim kutusu Storeındexviewmodel sınıfı hakkında bilgi sahibi olacak şekilde projeyi derlim.Before creating the new View template, let's build the project so that the Add View Dialog knows about the StoreIndexViewModel class. Build menü öğesini seçerek projeyi derleyin ve ardından MvcMusicStore' u oluşturun.Build the project by selecting the Build menu item and then Build MvcMusicStore.

    Projeyi oluşturmaBuilding the project

    Projeyi oluşturmaBuilding the project

  2. Yeni bir görünüm şablonu oluşturun.Create a new View template. Bunu yapmak için, Dizin yönteminin içine sağ tıklayın ve Görünüm Ekle' yi seçin.To do that, right-click inside the Index method and select Add View.

    Görünüm EklemeAdding a View

    Görünüm EklemeAdding a View

  3. Dosya Ekle Iletişim kutusu storecontroller'dan çağrıldığı için, bir \Views\store\ındex.cshtml dosyasında görünüm şablonunu varsayılan olarak ekler.Because the Add View Dialog was invoked from the StoreController, it will add the View template by default in a \Views\Store\Index.cshtml file. Kesin olarak yazılmış görünüm oluştur onay kutusunu işaretleyin ve ardından model sınıfıolarak storeındexviewmodel ' i seçin.Check the Create a strongly-typed-view checkbox and then select StoreIndexViewModel as the Model class. Ayrıca, seçilen görünüm altyapısının Razorolduğundan emin olun.Also, make sure that the View engine selected is Razor. Ekle'yi tıklatın.Click Add.

    Görünüm Ekle Iletişim kutusuAdd View Dialog

    Görünüm Ekle Iletişim kutusuAdd View Dialog

    \Views\store\ındex.cshtml görünüm şablonu dosyası oluşturulup açılır.The \Views\Store\Index.cshtml View template file is created and opened. Son adımda Görünüm Ekle iletişim kutusuna sunulan bilgilere bağlı olarak, görünüm şablonu, bir HTML yanıtı oluşturmak için kullanılacak veriler olarak bir Storeındexviewmodel örneği bekler.Based on the information provided to the Add View dialog in the last step, the View template will expect a StoreIndexViewModel instance as the data to use to generate an HTML response. Şablonun ' de C#bir ViewPage<musicstore.viewmodels.storeindexviewmodel> devraldığını fark edeceksiniz.You will notice that the template inherits a ViewPage<musicstore.viewmodels.storeindexviewmodel> in C#.

Görev 5-görünüm şablonunu güncelleştirmeTask 5 - Updating the View Template

Bu görevde, sayfa içindeki sıra sayısını ve bunların adlarını almak için son görevde oluşturulan görünüm şablonunu güncelleşolursunuz.In this task, you will update the View template created in the last task to retrieve the number of genres and their names within the page.

Note

Görünüm şablonu içinde kodu yürütmek için @ söz dizimini (genellikle "kodu nugal"olarak adlandırılır) kullanacaksınız.You will use @ syntax (often referred to as "code nuggets") to execute code within the View template.

  1. Index. cshtml dosyasında, Mağaza klasörü içinde, kodunu aşağıdaki kodla değiştirin:In the Index.cshtml file, within the Store folder, replace its code with the following:
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
> [!NOTE]
> As soon as you finish typing the period after the word **Model**, Visual Studio's Intellisense will show a list of possible properties and methods to choose from.
> 
> ![](aspnet-mvc-4-fundamentals/_static/image25.png)
> 
> *Getting Model properties and methods with Visual Studio's IntelliSense*
> 
> The **Model** property references the **StoreIndexViewModel** object that the Controller passed to the View template. This means that you can access all of the data passed from the Controller to the View template via the **Model** property, and format it into an appropriate HTML response within the View template.
> 
> You can just select the **NumberOfGenres** property from the Intellisense list rather than typing it in and then it will auto-complete it by pressing the **tab key**.
  1. Storeındexviewmodel içinde tarz listesinin üzerinde döngü yapın ve foreach döngüsü kullanarak bir HTML <ul> listesi oluşturun.Loop over the genre list in StoreIndexViewModel and create an HTML <ul> list using a foreach loop. (C#)(C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
    @foreach (string genreName in Model.Genres)
    {
        <li>
            @genreName
        </li>
    }
    </ul>
    
  2. F5 tuşuna basarak uygulamayı çalıştırın ve /Store'a gidin.Press F5 to run the Application and browse /Store. Storeındexviewmodel nesnesine storecontroller ' dan görünüm şablonuna geçirilen tarzlar listesini görürsünüz.You will see the list of genres passed in the StoreIndexViewModel object from the StoreController to the View template.

    Tarzın bir listesini görüntülemeyi görüntüleView displaying a list of genres

    Tarzın bir listesini görüntülemeyi görüntüleView displaying a list of genres

  3. Tarayıcıyı kapatın.Close the browser.

Alıştırma 6: görünümdeki parametreleri kullanmaExercise 6: Using Parameters in View

Alıştırma 3 ' te, parametreleri denetleyiciye geçirme hakkında daha fazla öğrendiniz.In Exercise 3 you learned how to pass parameters to the Controller. Bu alıştırmada, bu parametreleri görünüm şablonunda nasıl kullanacağınızı öğreneceksiniz.In this exercise, you will learn how to use those parameters in the View template. Bu amaçla, ilk olarak verilerinizi ve etki alanı mantığınızı yönetmenize yardımcı olacak sınıfların model olarak tanıtılcaksınız.For that purpose, you will be introduced first to Model classes that will help you to manage your data and domain logic. Ayrıca, URL yolları kodlaması gibi şeyleri endişelenmeden ASP.NET MVC uygulamasının içindeki sayfalara bağlantılar oluşturmayı öğreneceksiniz.Additionally, you will learn how to create links to pages inside the ASP.NET MVC application without worrying of things like URL paths encoding.

Görev 1-model sınıfları eklemeTask 1 - Adding Model Classes

Denetleyiciden görünüme bilgi geçirmek için oluşturulan ViewModel aksine, model sınıfları veri ve etki alanı mantığını içerecek ve yönetecek şekilde oluşturulmuştur.Unlike ViewModels, which are created just to pass information from the Controller to the View, Model classes are built to contain and manage data and domain logic. Bu görevde, şu kavramları temsil eden iki model sınıfı ekleyeceksiniz: tarz ve Albüm.In this task you will add two model classes to represent these concepts: Genre and Album.

  1. Zaten açık değilse, Web için vs Express başlatınIf not already open, start VS Express for Web

  2. Dosya menüsünde Proje Aç' ı seçin.In the File menu, choose Open Project. Proje Aç iletişim kutusunda Source\ex06-usingparametersinview\beginöğesine göz atın, BEGIN. sln ' yi seçin ve ' a tıklayın.In the Open Project dialog, browse to Source\Ex06-UsingParametersInView\Begin, select Begin.sln and click Open. Alternatif olarak, önceki Alıştırmayı tamamladıktan sonra elde ettiğiniz çözüme devam edebilirsiniz.Alternatively, you may continue with the solution that you obtained after 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.

  3. Bir tarz model sınıfı ekleyin.Add a Genre Model class. Bunu yapmak için Çözüm Gezgini modeller klasörüne sağ tıklayın, Ekle ' yi ve ardından Yeni öğe seçeneğini belirleyin.To do this, right-click the Models folder in the Solution Explorer, select Add and then the New Item option. Kodaltında, sınıf öğesini seçin ve dosyayı genre.csolarak adlandırın, ardından Ekle' ye tıklayın.Under Code, choose the Class item and name the file Genre.cs, then click Add.

    Sınıf eklemeAdding a class

    Yeni öğe eklemeAdding a new item

    Tarz model sınıfı EkleAdd Genre Model Class

    Tarz model sınıfı EkleAdd Genre Model Class

  4. Tarz sınıfına bir Name özelliği ekleyin.Add a Name property to the Genre class. Bunu yapmak için aşağıdaki kodu ekleyin:To do this, add the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 tarzı)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 Genre)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Genre
        {
            public string Name { get; set; }
        }
    }
    
  5. Önceki yordamın aynısını takip eden bir Albüm sınıfı ekleyin.Following the same procedure as before, add an Album class. Bunu yapmak için Çözüm Gezgini modeller klasörüne sağ tıklayın, Ekle ' yi ve ardından Yeni öğe seçeneğini belirleyin.To do this, right-click the Models folder in the Solution Explorer, select Add and then the New Item option. Kodaltında, sınıf öğesini seçin ve dosyayı Album.csolarak adlandırın, ardından Ekle' ye tıklayın.Under Code, choose the Class item and name the file Album.cs, then click Add.

  6. Albüm sınıfına iki özellik ekleyin: tarz ve başlık.Add two properties to the Album class: Genre and Title. Bunu yapmak için aşağıdaki kodu ekleyin:To do this, add the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 albüm)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 Album)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Album
        {
            public string Title { get; set; }
    
            public Genre Genre { get; set; }
        }
    }
    

Görev 2-StoreBrowseViewModel eklemeTask 2 - Adding a StoreBrowseViewModel

Bu görevde bir StoreBrowseViewModel , seçilen bir tarz Ile eşleşen albümleri göstermek için kullanılacaktır.A StoreBrowseViewModel will be used in this task to show the Albums that match a selected Genre. Bu görevde, bu sınıfı oluşturacak ve ardından tarzını ve albümünlistesini işlemek için iki özellik ekleyeceksiniz.In this task, you will create this class and then add two properties to handle the Genre and its Album's List.

  1. Bir StoreBrowseViewModel sınıfı ekleyin.Add a StoreBrowseViewModel class. Bunu yapmak için Çözüm Gezgini viewmodeller klasörüne sağ tıklayın, Ekle ' yi ve ardından Yeni öğe seçeneğini belirleyin.To do this, right-click the ViewModels folder in the Solution Explorer, select Add and then the New Item option. Kodaltında, sınıf öğesini seçin ve dosyayı StoreBrowseViewModel.csolarak adlandırın, ardından Ekle' ye tıklayın.Under Code, choose the Class item and name the file StoreBrowseViewModel.cs, then click Add.

  2. StoreBrowseViewModel sınıfındaki modellere bir başvuru ekleyin.Add a reference to the Models in StoreBrowseViewModel class. Bunu yapmak için şu ad alanını kullanarak şunu ekleyin:To do this, add the following using namespace:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 UsingModel)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 UsingModel)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. StoreBrowseViewModel sınıfına iki özellik ekleyin: tarz ve Albümler.Add two properties to StoreBrowseViewModel class: Genre and Albums. Bunu yapmak için aşağıdaki kodu ekleyin:To do this, add the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 ModelProperties)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 ModelProperties)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
            public Genre Genre { get; set; }
    
            public List<Album> Albums { get; set; }
        }
    }
    

Note

Liste<albüm> nedir?: Bu tanım, bu listedeki öğelerin ait olduğu türü (veya alt öğelerinden herhangi biri ) kısıtlayan t >türü< kullanılır.What is List<Album> ?: This definition is using the List<T> type, where T constrains the type to which elements of this List belong to, in this case Album (or any of its descendants).

Sınıf veya yöntem bildirilmeden ve istemci kodu tarafından örneklendirilene kadar bir veya daha fazla türün belirtimini erteleme sınıfları ve yöntemleri tasarlayabilme özelliği, C# Genel türleradlı dilin bir özelliğidir.This ability to design classes and methods that defer the specification of one or more types until the class or method is declared and instantiated by client code is a feature of the C# language called Generics.

Liste<t> , ArrayList türünün genel eşdeğeridir ve System. Collections. Generic ad alanında kullanılabilir.List<T> is the generic equivalent of the ArrayList type and is available in the System.Collections.Generic namespace. Genel türleri kullanmanın avantajlarından biri, tür belirtilmesinden bu yana, bir ArrayListIle yaptığınız gibi öğeleri albüme atama gibi tür denetleme işlemlerine gerek duymamak zorunda değilsiniz.One of the benefits of using generics is that since the type is specified, you do not need to take care of type checking operations such as casting the elements into Album as you would do with an ArrayList.

Görev 3-StoreController 'da yeni ViewModel kullanmaTask 3 - Using the New ViewModel in the StoreController

Bu görevde, yeni StoreBrowseViewModelkullanmak Için Storecontroller'ın gezinme ve Ayrıntılar eylem yöntemlerini değiştirirsiniz.In this task, you will modify the StoreController's Browse and Details action methods to use the new StoreBrowseViewModel.

  1. Storecontroller sınıfındaki modeller klasörüne bir başvuru ekleyin.Add a reference to the Models folder in StoreController class. Bunu yapmak için, Çözüm Gezgini denetleyiciler klasörünü genişletin ve storecontroller sınıfını açın.To do this, expand the Controllers folder in the Solution Explorer and open the StoreController class. Ardından aşağıdaki kodu ekleyin:Then add the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 UsingModelInController)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 UsingModelInController)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. StoreViewBrowseController sınıfını kullanmak Için, gezinme eylemi yöntemini değiştirin.Replace the Browse action method to use the StoreViewBrowseController class. Kukla verilerle bir tarz ve iki yeni albümler nesnesi oluşturacaksınız (bir sonraki uygulamalı laboratuvarda bir veritabanından gerçek veriler kullanacaksınız).You will create a Genre and two new Albums objects with dummy data (in the next Hands-on Lab you will consume real data from a database). Bunu yapmak için, aşağıdaki kodla birlikte, Gözatılacak yöntemi değiştirin:To do this, replace the Browse method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 BrowseMethod)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 BrowseMethod)

    //
    // GET: /Store/Browse?genre=Disco
    
    public ActionResult Browse(string genre)
    {
        var genreModel = new Genre()
        {
            Name = genre
        };
    
        var albums = new List<Album>()
        {
            new Album() { Title = genre + " Album 1" },
            new Album() { Title = genre + " Album 2" }
        };
    
        var viewModel = new StoreBrowseViewModel()
        {
            Genre = genreModel,
            Albums = albums
        };
    
        return this.View(viewModel);
    }
    
  3. Ayrıntılar eylem yöntemini StoreViewBrowseController sınıfını kullanacak şekilde değiştirin.Replace the Details action method to use the StoreViewBrowseController class. Görünümedöndürülecek yeni bir Albüm nesnesi oluşturacaksınız.You will create a new Album object to be returned to the View. Bunu yapmak için, Details yöntemini aşağıdaki kodla değiştirin:To do this, replace the Details method with the following code:

    (Kod parçacığı- ASP.NET MVC 4 temelleri-Ex6 Ayrıntılar yöntemi)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 DetailsMethod)

    //
    // GET: /Store/Details/5
    
    public ActionResult Details(int id)
    {
      var album = new Album { Title = "Sample Album" };
    
      return this.View(album);
    }
    

Görev 4-bir tarayıcı görünümü şablonu eklemeTask 4 - Adding a Browse View Template

Bu görevde, belirli bir tarz için bulunan albümleri göstermek üzere bir tarama görünümü ekleyeceksiniz.In this task, you will add a Browse View to show the Albums found for a specific Genre.

  1. Yeni görünüm şablonunu oluşturmadan önce, görünümü Ekle iletişim kutusunun kullanılacak ViewModel 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 ViewModel class to use. Build menü öğesini seçerek projeyi derleyin ve ardından MvcMusicStore' u oluşturun.Build the project by selecting the Build menu item and then Build MvcMusicStore.

  2. Bir tarama görünümü ekleyin.Add a Browse View. Bunu yapmak için Storecontroller 'ın gözatmaya yönelik eylem yöntemine sağ tıklayın ve Görünüm Ekle' ye tıklayın.To do this, right-click in the Browse action method of the StoreController and click Add View.

  3. Görünüm Ekle Iletişim kutusunda görünüm adının gözatmasınıdoğrulayın.In the Add View dialog box, verify that the View Name is Browse. Türü kesin belirlenmiş görünüm oluştur onay kutusunu Işaretleyin ve model sınıfı açılan listesinden StoreBrowseViewModel öğesini seçin.Check the Create a strongly-typed view checkbox and select StoreBrowseViewModel from the Model class dropdown. Diğer alanları varsayılan değerlerine bırakın.Leave the other fields with their default value. Daha sonra Ekle'ye tıklayın.Then click Add.

    Bir tarama görünümü eklemeAdding a Browse View

    Bir tarama görünümü eklemeAdding a Browse View

  4. Görünüm şablonuna geçirilen StoreBrowseViewModel nesnesine erişmek için, denetimin bilgilerini görüntülemek üzere Gözat. cshtml 'yi değiştirin.Modify the Browse.cshtml to display the Genre's information, accessing the StoreBrowseViewModel object that is passed to the view template. Bunu yapmak için içeriği şu şekilde değiştirin: (C#)To do this, replace the content with the following: (C#)

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel
    
    @{
        ViewBag.Title = "Browse Albums";
    }
    
    <h2>Browsing Genre: @Model.Genre.Name</h2>
    
    <ul>
        @foreach (var album in Model.Albums)
        {
            <li>@album.Title</li>
        }
    </ul>
    

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

Bu görevde , Gezinme yönteminin Albümler 'e gözatamıyorum eylemini alacağını test edersiniz.In this task, you will test that the Browse method retrieves Albums from the Browse method action.

  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 /Store/zat değiştirin mi? Tarz = disco , eylemin Iki albüm döndürdüğünden emin olmak için.Change the URL to /Store/Browse?Genre=Disco to verify that the action returns two Albums.

    Store disco albümlerine göz atmaBrowsing Store Disco Albums

    Store disco albümlerine göz atmaBrowsing Store Disco Albums

Görev 6-belirli bir albüm hakkındaki bilgileri görüntülemeTask 6 - Displaying information About a Specific Album

Bu görevde, belirli bir albüm hakkındaki bilgileri görüntülemek için Mağaza/Ayrıntılar görünümünü uygulayacaksınız.In this task, you will implement the Store/Details view to display information about a specific album. Bu uygulamalı laboratuvarda, albüm hakkında görüntülenecek her şey zaten Görünüm şablonunda yer alıyor.In this Hands-on Lab, everything you will display about the album is already contained in the View template. Bu nedenle, bir storebir ViewModel sınıfı oluşturmak yerine, albümü kendisine geçirerek geçerli StoreBrowseViewModel şablonunu kullanacaksınız.So, instead of creating a StoreDetailsViewModel class, you will use the current StoreBrowseViewModel template passing the Album to it.

  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. Storecontroller'ın Ayrıntılar eylem yöntemi için yeni bir Ayrıntılar görünümü ekleyin.Add a new Details view for the StoreController's Details action method. Bunu yapmak için Storecontroller sınıfında Details yöntemine sağ tıklayın ve Görünüm Ekle' ye tıklayın.To do this, right-click the Details method in the StoreController class and click Add View.

  2. Görünüm Ekle Iletişim kutusunda görünüm adının Ayrıntılarolduğunu doğrulayın.In the Add View dialog, verify that the View Name is Details. Türü kesin belirlenmiş görünüm oluştur onay kutusunu Işaretleyin ve model sınıfı açılır listesinden Albüm ' yi seçin.Check the Create a strongly-typed view checkbox and select Album from the Model class drop-down. Diğer alanları varsayılan değerlerine bırakın.Leave the other fields with their default value. Daha sonra Ekle'ye tıklayın.Then click Add. Bu, \Views\store\details.cshtml dosyasını oluşturur ve açar.This will create and open a \Views\Store\Details.cshtml file.

    Ayrıntı görünümü eklemeAdding a Details View

    Ayrıntı görünümü eklemeAdding a Details View

  3. View şablonuna geçirilen Albüm nesnesine erişerek albümün bilgilerini görüntülemek için details. cshtml dosyasını değiştirin.Modify the Details.cshtml file to display the Album's information, accessing the Album object that is passed to the view template. Bunu yapmak için içeriği şu şekilde değiştirin: (C#)To do this, replace the content with the following: (C#)

    @model MvcMusicStore.Models.Album
    
    @{
        ViewBag.Title = "Details";
    }
    
    <h2>Album: @Model.Title</h2>
    

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

Bu görevde, Ayrıntılar görünümünün, Ayrıntılar eylem yönteminden albümün bilgilerini alacağını test edersiniz.In this task, you will test that the Details View retrieves Album's information from the Details action method.

  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. Albümün bilgilerini doğrulamak için URL 'YI /Store/details/5 olarak değiştirin.Change the URL to /Store/Details/5 to verify the album's information.

    Albümler 'e göz atma ayrıntısıBrowsing Albums Detail

    Albümün ayrıntısına göz atmaBrowsing Album's Detail

Bu görevde, her tarz adında uygun /Store/gözatam URL 'sine bağlantı sağlamak Için mağaza görünümünde bir bağlantı ekleyeceksiniz.In this task, you will add a link in the Store View to have a link in every Genre name to the appropriate /Store/Browse URL. Bu şekilde, bir tarz üzerine tıkladığınızda, discoörneği için /Store/gözatmaya? tarzı = disco URL 'sine gidebilirsiniz.This way, when you click on a Genre, for instance Disco, it will navigate to /Store/Browse?genre=Disco URL.

  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. Tarayıcı sayfasına bir bağlantı eklemek için Dizin sayfasını güncelleştirin.Update the Index page to add a link to the Browse page. Bunu yapmak için, Çözüm Gezgini Görünümler klasörünü ve ardından Mağaza klasörünü genişletin ve Index. cshtml sayfasına çift tıklayın.To do this, in the Solution Explorer expand the Views folder, then the Store folder and double-click the Index.cshtml page.

  2. Seçili tarzın seçili olduğunu gösteren bir tarayıcı görünümüne bağlantı ekleyin.Add a link to the Browse view indicating the genre selected. Bunu yapmak için, <li> etiketleri içinde aşağıdaki vurgulanmış kodu değiştirin: (C#)To do this, replace the following highlighted code within the <li> tags: (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p> Select from @Model.NumberOfGenres genres</p>
    
    <ul>
        @foreach (string genreName in Model.Genres) {
            <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
            </li>
            }
    </ul>
    

    Note

    başka bir yaklaşım, aşağıdaki gibi bir kod ile doğrudan sayfaya bağlanıyor:another approach would be linking directly to the page, with a code like the following:

    <a href ="/Store/gözatmaya? tarzı =@genreName&quot;&gt;@genreName&lt;/a&gt;<a href="/Store/Browse?genre=@genreName&quot;&gt;@genreName&lt;/a&gt;

    Bu yaklaşım işe yarar olsa da, sabit kodlanmış bir dizeye bağlıdır.Although this approach works, it depends on a hardcoded string. Denetleyiciyi daha sonra yeniden adlandırırsanız, bu yönergeyi el ile değiştirmeniz gerekir.If you later rename the Controller, you will have to change this instruction manually. Daha iyi bir alternatif, bir HTML yardımcı yöntemi kullanmaktır.A better alternative is to use an HTML Helper method. ASP.NET MVC, bu gibi görevler için kullanılabilen bir HTML yardımcı yöntemi içerir.ASP.NET MVC includes an HTML Helper method which is available for such tasks. HTML. ActionLink () yardımcı YÖNTEMI, URL yollarının düzgün şekilde URL kodlamalı olduğundan emin olmak için html <> bağlantıları oluşturmayı kolaylaştırır.The Html.ActionLink() helper method makes it easy to build HTML <a> links, making sure URL paths are properly URL encoded.

    HTML. ActionLink çeşitli aşırı yüklemeleri vardır.Html.ActionLink has several overloads. Bu alıştırmada, üç parametre alan bir tane kullanacaksınız:In this exercise you will use one that takes three parameters:

    1. Bağlantı metni, bu tarz adı görüntülenecektirLink text, which will display the Genre name
    2. Denetleyici eylem adı (tarama)Controller action name (Browse)
    3. Ad (tarz) ve değer (tarzı adı) belirterek rota parametre değerleriRoute parameter values, specifying both the name (Genre) and the value (Genre name)

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

Bu görevde, her bir tarzı uygun /Store/gözatam URL 'sine yönelik bir bağlantıyla birlikte görüntülendiğini test edersiniz.In this task, you will test that each Genre is displayed with a link to the appropriate /Store/Browse URL.

  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. Her bir tarzı uygun /Store/gözam URL 'sine bağlabildiğini doğrulamak için /Store URL 'sini değiştirin.Change the URL to /Store to verify that each Genre links to the appropriate /Store/Browse URL.

    Göz atma sayfası bağlantıları ile tarzlara göz atmaBrowsing Genres with links to Browse page

    Göz atma sayfası bağlantıları ile tarzlara göz atmaBrowsing Genres with links to Browse page

Görev 10-değerleri geçirmek için dinamik ViewModel koleksiyonu kullanmaTask 10 - Using Dynamic ViewModel Collection to Pass Values

Bu görevde, modelde değişiklik yapmadan denetleyiciyi ve görünümü arasında değerleri geçirmek için basit ve güçlü bir yöntem öğreneceksiniz.In this task, you will learn a simple and powerful method to pass values between the Controller and the View without making any changes in the Model. ASP.NET MVC 4, herhangi bir dinamik değere atanabilecek ve denetleyicilerin ve görünümlerin içinde erişilebilen "ViewModel"koleksiyonu sağlar.ASP.NET MVC 4 provides the collection "ViewModel", which can be assigned to any dynamic value and accessed inside controllers and views as well.

Artık, denetleyiciden görünüme" "starred tarzları listesini geçirmek Için ViewBag dinamik toplamayı kullanacaksınız.You will now use the ViewBag dynamic collection to pass a list of "Starred genres" from the controller to the view. Mağaza dizini görünümü ViewModel 'e erişir ve bilgileri görüntüler.The Store Index view will access to ViewModel and display the information.

  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. ViewModel koleksiyonunda yıldızlı tarzının bir listesini oluşturmak için StoreController.cs ve dizini Değiştir metodunu açın:Open StoreController.cs and modify Index method to create a list of starred genres into ViewModel collection :

    public ActionResult Index()
    {
        // Create list of genres
        var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };
    
        // Create your view model
        var viewModel = new StoreIndexViewModel
        {
            NumberOfGenres = genres.Count,
            Genres = genres
        };
    
        ViewBag.Starred = new List<string> { "Rock", "Jazz" };
    
        return this.View(viewModel);
    }
    

    Note

    Özelliklere erişmek için ViewBag ["starred"] sözdizimini de kullanabilirsiniz.You could also use the syntax ViewBag["Starred"] to access the properties.

  2. ", bu laboratuvarın Source\assets\ımages klasörüne startred. png" yıldız simgesi dahildir.The star icon "starred.png" is included in the Source\Assets\Images folder of this lab. Uygulamayı uygulamaya eklemek için, Windows Gezgini penceresinden içeriğini aşağıda gösterildiği gibi Visual Web Developer Express içindeki Çözüm Gezgini sürükleyin:In order to add it to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Web Developer Express, as shown below:

    Çözüme yıldızlı resim eklemeAdding star image to the solution

    Çözüme yıldızlı resim eklemeAdding star image to the solution

  3. Store/Index. cshtml görünümünü açın ve içeriği değiştirin.Open the view Store/Index.cshtml and modify the content. ViewBag koleksiyonundaki "yıldızlı" özelliğini okuyacaksınız ve geçerli tarz adının listede olup olmadığını sorabilirsiniz.You will read the "starred" property in the ViewBag collection, and ask if the current genre name is in the list. Bu durumda, tarz bağlantısına doğrudan bir yıldız simgesi gösterilir.In that case you will show a star icon right to the genre link. (C#)(C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
         ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
         @foreach (string genreName in Model.Genres)
         {
              <li>
                    @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
    
                    @if (ViewBag.Starred.Contains(genreName))
                    { 
                         <img src="../../Content/Images/starred.png" alt="Starred element" />
                    }
              </li>
         }
    </ul>
    <br />
    <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
    

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

Bu görevde, yıldızlı tarzının bir yıldız simgesi göstermesini test edersiniz.In this task, you will test that the starred genres display a star icon.

  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. Tüm öne çıkan tarzın daha önce bir etiket içerdiğini doğrulamak için URL 'YI /Store olarak değiştirin:Change the URL to /Store to verify that each featured genre has the respecting label:

    Yıldızlı öğeleriyle tarzlara göz atmaBrowsing Genres with starred elements

    Yıldızlı öğeleriyle tarzlara göz atmaBrowsing Genres with starred elements

Alıştırma 7: ASP.NET MVC 4 yeni şablonu etrafında bir lapExercise 7: A lap around ASP.NET MVC 4 new template

Bu alıştırmada, yeni şablonun en ilgili özelliklerine göz önünde bulundurularak ASP.NET MVC 4 proje şablonlarındaki geliştirmeleri araştıracaktır.In this exercise, you will explore the enhancements in the ASP.NET MVC 4 project templates, taking a look at the most relevant features of the new template.

Görev 1: ASP.NET MVC 4 Internet uygulaması şablonunu keşfetmeTask 1: Exploring the ASP.NET MVC 4 Internet Application Template

  1. Zaten açık değilse, Web için vs Express başlatınIf not already open, start VS Express for Web

  2. Dosyayı seçin | Yeni | Proje menü komutu.Select the File | New | Project menu command. Yeni proje Iletişim kutusunda görseli C#seçin | Sol bölme ağacındaki Web şablonu ve ASP.NET MVC 4 Web uygulamasınıseçin.In the New Project dialog, select the Visual C#|Web template on the left pane tree, and choose the ASP.NET MVC 4 Web Application. Projeyi MusicStore olarak adlandırın ve başlamakiçin çözüm adını güncelleştirin, ardından bir konum seçin (veya varsayılanı bırakın) ve Tamam' a tıklayın.Name the project MusicStore and update the solution name to Begin, then select a location (or leave the default) and click OK.

    Yeni bir ASP.NET MVC 4 projesi oluşturmaCreating a new ASP.NET MVC 4 Project

    Yeni bir ASP.NET MVC 4 projesi oluşturmaCreating a new ASP.NET MVC 4 Project

  3. Yeni ASP.NET MVC 4 projesi Iletişim kutusunda Internet uygulaması proje şablonunu seçin ve Tamam' a tıklayın.In the New ASP.NET MVC 4 Project dialog, select the Internet Application project template and click OK. Görünüm altyapısı olarak Razor veya ASPX seçeneklerinden birini belirleyebilirsiniz.Notice you can select either Razor or ASPX as the view engine.

    Yeni bir ASP.NET MVC 4 Internet uygulaması oluşturmaCreating a new ASP.NET MVC 4 Internet Application

    Yeni bir ASP.NET MVC 4 Internet uygulaması oluşturmaCreating a new ASP.NET MVC 4 Internet Application

    Note

    Razor söz dizimi, ASP.NET MVC 3 ' te tanıtılmıştır.Razor syntax has been introduced in ASP.NET MVC 3. Amacı, bir dosyada gereken karakter ve tuş vuruşlarının sayısını en aza indirmektir ve hızlı ve akıcı bir kodlama iş akışını etkinleştirir.Its goal is to minimize the number of characters and keystrokes required in a file, enabling a fast and fluid coding workflow. Razor, mevcut C#/vb (veya diğer) dil becerilerini kullanır ve harıka bir HTML oluşturma iş akışı sağlayan bir şablon biçimlendirme sözdizimi sunar.Razor leverages existing C#/VB (or other) language skills and delivers a template markup syntax that enables an awesome HTML construction workflow.

  4. F5 tuşuna basarak çözümü çalıştırın ve yenilenen şablonu görüntüleyin.Press F5 to run the solution and see the renewed template. Aşağıdaki özelliklere bakabilirsiniz:You can check out the following features:

    1. Modern stil şablonlarıModern-style templates

      Şablonlar, daha modern görünümlü daha fazla stil sunarak yenilendi.The templates have been renewed, providing more modern-looking styles.

      ASP.NET MVC 4 yeniden biçimlendirilmiş ŞablonlarASP.NET MVC 4 restyled templates

      ASP.NET MVC 4 yeniden biçimlendirilmiş ŞablonlarASP.NET MVC 4 restyled templates

    2. Uyarlamalı IşlemeAdaptive Rendering

      Tarayıcı penceresini yeniden boyutlandırın ve sayfa düzeninin yeni pencere boyutuna dinamik olarak nasıl uyum sağlayadığına dikkat edin.Check out resizing the browser window and notice how the page layout dynamically adapts to the new window size. Bu şablonlar, hiçbir özelleştirme yapmadan hem masaüstü hem de mobil platformlarda düzgün şekilde işlemek için uyarlamalı işleme tekniğini kullanır.These templates use the adaptive rendering technique to render properly in both desktop and mobile platforms without any customization.

      Farklı tarayıcı boyutlarında ASP.NET MVC 4 proje şablonuASP.NET MVC 4 project template in different browser sizes

      Farklı tarayıcı boyutlarında ASP.NET MVC 4 proje şablonuASP.NET MVC 4 project template in different browser sizes

  5. Hata ayıklayıcıyı durdurmak ve Visual Studio 'ya dönmek için tarayıcıyı kapatın.Close the browser to stop the debugger and return to Visual Studio.

  6. Artık çözümü keşfedebiliyor ve proje şablonunda ASP.NET MVC 4 tarafından tanıtılan yeni özelliklerden bazılarını kullanıma sunabileceksiniz.Now you are able to explore the solution and check out some of the new features introduced by ASP.NET MVC 4 in the project template.

    ASP.NET MVC4-Internet-uygulama-proje-şablonASP.NET MVC4-internet-application-project-template

    ASP.NET MVC 4 Internet uygulaması proje şablonuThe ASP.NET MVC 4 Internet Application Project Template

    1. HTML5 işaretlemeHTML5 markup

      Yeni Tema işaretlemesini öğrenmek için şablon görünümlerine gözatıp. Örneğin, giriş klasörü içinde . cshtml görünümünü açın.Browse template views to find out the new theme markup, for example open About.cshtml view within Home folder.

      Razor ve HTML5 işaretlemesini kullanarak yeni şablonNew template, using Razor and HTML5 markup

      Razor ve HTML5 işaretlemesini kullanarak yeni şablonNew template, using Razor and HTML5 markup

    2. JavaScript kitaplıkları dahilJavaScript libraries included

      1. jQuery: jQuery, HTML belgesi geçiş, olay işleme, animasyon uygulama ve Ajax etkileşimlerini basitleştirir.jQuery: jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions.

      2. jQuery kullanıcı arabirimi: Bu kitaplık, jQuery JavaScript kitaplığının üzerine inşa olan alt düzey etkileşim ve animasyon, gelişmiş etkiler ve ayrılabilir pencere öğeleri için soyutlamalar sağlar.jQuery UI: This library provides abstractions for low-level interaction and animation, advanced effects and themeable widgets, built on top of the jQuery JavaScript Library.

        Note

        [http://docs.jquery.com/](http://docs.jquery.com/)' de jQuery ve jQuery kullanıcı arabirimi hakkında bilgi edinebilirsiniz.You can learn about jQuery and jQuery UI in [http://docs.jquery.com/](http://docs.jquery.com/).

      3. Altını gizleme koutjs: ASP.NET MVC 4 varsayılan şablonu artık JAVASCRIPT ve HTML kullanarak zengin ve yüksek oranda yanıt veren Web uygulamaları oluşturmanıza olanak tanıyan bir JavaScript MVVM çerçevesi olan altını gizlemeözelliği içerir.KnockoutJS: The ASP.NET MVC 4 default template now includes KnockoutJS, a JavaScript MVVM framework that lets you create rich and highly responsive web applications using JavaScript and HTML. ASP.NET MVC 3 gibi, jQuery ve jQuery kullanıcı arabirimi kitaplıkları da ASP.NET MVC 4 ' te de bulunur.Like in ASP.NET MVC 3, jQuery and jQuery UI libraries are also included in ASP.NET MVC 4.

        Note

        Bu bağlantıdaki altını gizleme ( http://learn.knockoutjs.com/) kitaplığı hakkında daha fazla bilgi edinebilirsiniz.You can get more information about KnockOutJS library in this link: http://learn.knockoutjs.com/.

      4. Modernizr: Bu kitaplık otomatik olarak ÇALıŞARAK, HTML5 ve CSS3 teknolojilerini kullanırken sitenizi eski tarayıcılarla uyumlu hale getirir.Modernizr: This library runs automatically, making your site compatible with older browsers when using HTML5 and CSS3 technologies.

        Note

        Bu bağlantıda Modernizr Kitaplığı hakkında daha fazla bilgi edinebilirsiniz: http://www.modernizr.com/.You can get more information about Modernizr library in this link: http://www.modernizr.com/.

    3. Çözüme dahil SimpleMembershipSimpleMembership included in the solution

      SimpleMembership, önceki ASP.NET rolü ve üyelik sağlayıcısı sisteminin yerini alacak şekilde tasarlanmıştır.SimpleMembership has been designed as a replacement for the previous ASP.NET Role and Membership provider system. Geliştiricinin web sayfalarını daha esnek bir şekilde güvenli hale getirmeye daha kolay bir şekilde bir çok yeni özelliği vardır.It has many new features that make it easier for the developer to secure web pages in a more flexible way.

      Internet şablonu, SimpleMembership tümleştirmeye yönelik birkaç şey ayarlamış. Örneğin, AccountController OAuthWebSecurity 'yi (OAuth hesabı kaydı, oturum açma, yönetim, vs.) ve web güvenliği 'ni kullanmaya hazırlanır.The Internet template already has set up a few things to integrate SimpleMembership, for example, the AccountController is prepared to use OAuthWebSecurity (for OAuth account registration, login, management, etc.) and Web Security.

      Çözüme dahil SimpleMembershipSimpleMembership Included in the solution

      Çözüme dahil SimpleMembershipSimpleMembership Included in the solution

      Note

      MSDN 'de Oauthwebsecurity hakkında daha fazla bilgi edinin.Find more information about OAuthWebSecurity in MSDN.

Note

Ek olarak, bu uygulamayı Microsoft Azure Web siteleri ' ne ek B: Web dağıtımı kullanarak bir ASP.NET MVC 4 uygulaması yayımlamakiçin de dağıtabilirsiniz.Additionally, you can deploy this application to Windows Azure Web Sites following Appendix B: Publishing an ASP.NET MVC 4 Application using Web Deploy.


ÖzetSummary

Bu uygulamalı Laboratuvarı tamamlayarak ASP.NET MVC 'nin temellerini öğrendiniz:By completing this Hands-On Lab you have learned the fundamentals of ASP.NET MVC:

  • MVC uygulamasının temel öğeleri ve bunların nasıl etkileşimde bulunduğuThe core elements of an MVC application and how they interact
  • ASP.NET MVC uygulaması oluşturmaHow to create an ASP.NET MVC Application
  • URL ve QueryString aracılığıyla geçirilen parametreleri işlemek için denetleyicileri ekleme ve yapılandırmaHow to add and configure Controllers to handle parameters passed through the URL and querystring
  • Genel HTML içeriği için şablon ayarlamak üzere bir düzen ana sayfası ekleme, HTML içeriğini görüntülemek için görünüm ve görüntüleme şablonunu iyileştirmek üzere bir stil sayfası.How to add a layout master page to setup a template for common HTML content, a StyleSheet to enhance the look and feel and a View template to display HTML content
  • Dinamik bilgileri görüntülemek için görünüm şablonuna Özellikler geçirmek için ViewModel deseninin nasıl kullanılacağıHow to use the ViewModel pattern for passing properties to the View template to display dynamic information
  • Görünüm şablonunda denetleyicilere geçirilen parametreleri kullanmaHow to use parameters passed to Controllers in the View template
  • ASP.NET MVC uygulamasının içindeki sayfalara bağlantı eklemeHow to add links to pages inside the ASP.NET MVC application
  • Bir görünümde dinamik özellikler ekleme ve kullanmaHow to add and use dynamic properties in a View
  • ASP.NET MVC 4 proje şablonlarındaki geliştirmelerThe enhancements in the ASP.NET MVC 4 project templates

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: Web Dağıtımı kullanarak ASP.NET MVC 4 uygulaması yayımlamaAppendix B: Publishing an ASP.NET MVC 4 Application using Web Deploy

Bu ek, Microsoft Azure Yönetim Portalı yeni bir Web sitesi oluşturmayı ve Laboratuvarı izleyerek edindiğiniz uygulamayı yayımlamayı, Microsoft Azure tarafından sunulan Web Dağıtımı yayımlama özelliğinden yararlanarak nasıl yayımlayacağınızı gösterir.This appendix will show you how to create a new web site from the Windows Azure Management Portal and publish the application you obtained by following the lab, taking advantage of the Web Deploy publishing feature provided by Windows Azure.

Görev 1-Microsoft Azure portalından yeni bir Web sitesi oluşturmaTask 1 - Creating a New Web Site from the Windows Azure Portal

  1. Windows Azure yönetim portalı gidin ve aboneliğinizle ilişkili Microsoft kimlik bilgilerini kullanarak oturum açın.Go to the Windows Azure Management Portal and sign in using the Microsoft credentials associated with your subscription.

    Note

    Windows Azure ile 10 ASP.NET Web sitesini ücretsiz olarak barındırabilir ve ardından trafiğiniz büyüdükçe ölçeklendirebilirsiniz.With Windows Azure you can host 10 ASP.NET Web Sites for free and then scale as your traffic grows. Buradankaydolabilirsiniz.You can sign up here.

    Windows Azure portal oturum açınLog on to Windows Azure portal

    Windows Azure 'da oturum açma Yönetim PortalıLog on to Windows Azure Management Portal

  2. Komut çubuğunda Yeni ' ye tıklayın.Click New on the command bar.

    Yeni bir Web sitesi oluşturmaCreating a new Web Site

    Yeni bir Web sitesi oluşturmaCreating a new Web Site

  3. İşlem | Web sitesi' ne tıklayın.Click Compute | Web Site. Sonra hızlı oluştur seçeneğini belirleyin.Then select Quick Create option. Yeni Web sitesi için kullanılabilir bir URL sağlayın ve Web sitesi oluştur' a tıklayın.Provide an available URL for the new web site and click Create Web Site.

    Note

    Bir Microsoft Azure Web sitesi, bulutta çalışan ve yönetebileceğiniz bir Web uygulaması için ana bilgisayar.A Windows Azure Web Site is the host for a web application running in the cloud that you can control and manage. Hızlı oluştur seçeneği, tamamlanmış bir Web uygulamasını Portal dışından Windows Azure Web sitesine dağıtmanızı sağlar.The Quick Create option allows you to deploy a completed web application to the Windows Azure Web Site from outside the portal. Bir veritabanı ayarlamaya yönelik adımları içermez.It does not include steps for setting up a database.

    Hızlı oluşturma kullanarak yeni bir Web sitesi oluşturmaCreating a new Web Site using Quick Create

    Hızlı oluşturma kullanarak yeni bir Web sitesi oluşturmaCreating a new Web Site using Quick Create

  4. Yeni Web sitesi oluşturuluncaya kadar bekleyin.Wait until the new Web Site is created.

  5. Web sitesi oluşturulduktan sonra URL sütununun altındaki bağlantıya tıklayın.Once the Web Site is created click the link under the URL column. Yeni Web sitesinin çalışıp çalışmadığını denetleyin.Check that the new Web Site is working.

    Yeni Web sitesine göz atmaBrowsing to the new web site

    Yeni Web sitesine göz atmaBrowsing to the new web site

    Web sitesi çalışıyorWeb site running

    Web sitesi çalışıyorWeb site running

  6. Portala geri dönün ve yönetim sayfalarını göstermek için ad sütununun altındaki Web sitesinin adına tıklayın.Go back to the portal and click the name of the web site under the Name column to display the management pages.

    Web sitesi yönetim sayfalarını açmaOpening the web site management pages

    Web sitesi yönetim sayfalarını açmaOpening the Web Site management pages

  7. Pano sayfasında, Hızlı bakış bölümünde, Yayımlama profilini indir bağlantısına tıklayın.In the Dashboard page, under the quick glance section, click the Download publish profile link.

    Note

    Yayımlama profili , bir Web uygulamasını etkin her yayımlama yöntemi Için bir Windows Azure Web sitesinde yayımlamak için gereken tüm bilgileri içerir.The publish profile contains all of the information required to publish a web application to a Windows Azure website for each enabled publication method. Yayımlama profili, bir yayımlama yönteminin etkinleştirildiği her bir uç noktasına bağlanmak ve kimlik doğrulaması yapmak için gereken URL'leri, kullanıcı kimlik bilgilerini ve veritabanı dizelerini içerir.The publish profile contains the URLs, user credentials and database strings required to connect to and authenticate against each of the endpoints for which a publication method is enabled. Microsoft WebMatrix 2, Web için Microsoft Visual Studio Express ve Microsoft Visual Studio 2012 , Web uygulamalarını Microsoft Azure Web siteleri 'ne yayımlamak üzere bu programların yapılandırılmasını otomatik hale getirmek için yayımlama profillerinin okunmasını destekler.Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web and Microsoft Visual Studio 2012 support reading publish profiles to automate configuration of these programs for publishing web applications to Windows Azure websites.

    Web sitesi yayımlama profili indiriliyorDownloading the web site publish profile

    Web sitesi yayımlama profili indiriliyorDownloading the Web Site publish profile

  8. Yayımlama profili dosyasını bilinen bir konuma indirin.Download the publish profile file to a known location. Bu alıştırmada, bir Web uygulamasını Visual Studio 'dan bir Windows Azure Web sitelerinde yayımlamak için bu dosyayı nasıl kullanacağınızı göreceksiniz.Further in this exercise you will see how to use this file to publish a web application to a Windows Azure Web Sites from Visual Studio.

    Yayımlama profili dosyası kaydediliyorSaving the publish profile file

    Yayımlama profili dosyası kaydediliyorSaving the publish profile file

Görev 2-veritabanı sunucusunu yapılandırmaTask 2 - Configuring the Database Server

Uygulamanız SQL Server veritabanlarını kullanıyorsa, bir SQL veritabanı sunucusu oluşturmanız gerekir.If your application makes use of SQL Server databases you will need to create a SQL Database server. SQL Server kullanmayan basit bir uygulama dağıtmak istiyorsanız bu görevi atlayabilirsiniz.If you want to deploy a simple application that does not use SQL Server you might skip this task.

  1. Uygulama veritabanını depolamak için bir SQL veritabanı sunucusuna ihtiyacınız olacaktır.You will need a SQL Database server for storing the application database. SQL veritabanı sunucularını aboneliğinizden Windows Azure Yönetim Portalı ' nda SQL veritabanları | sunucuları | Sunucu panosu' nda görüntüleyebilirsiniz.You can view the SQL Database servers from your subscription in the Windows Azure Management portal at Sql Databases | Servers | Server's Dashboard. Oluşturulmuş bir sunucunuz yoksa, komut çubuğunda Ekle düğmesini kullanarak bir tane oluşturabilirsiniz.If you do not have a server created, you can create one using the Add button on the command bar. Sunucu adını ve URL 'yi, yönetici oturum açma adını ve parolayı, bunları bir sonraki görevlerde kullanacaksınız gibi bir yere göz atın.Take note of the server name and URL, administrator login name and password, as you will use them in the next tasks. Daha sonraki bir aşamada oluşturulacak şekilde veritabanını henüz oluşturmayın.Do not create the database yet, as it will be created in a later stage.

    SQL veritabanı sunucu panosuSQL Database Server Dashboard

    SQL veritabanı sunucu panosuSQL Database Server Dashboard

  2. Sonraki görevde, Visual Studio 'dan veritabanı bağlantısını test edersiniz. bu nedenle, yerel IP adresinizi sunucunun Izin VERILEN IP adreslerilistesine eklemeniz gerekir.In the next task you will test the database connection from Visual Studio, for that reason you need to include your local IP address in the server's list of Allowed IP Addresses. Bunu yapmak için, Yapılandır' a tıklayın, geçerli ISTEMCI IP adresinden IP ADRESINI seçin ve Başlangıç IP adresi ve bitiş IP adresi metin kutularına yapıştırın ve Add-Client-ip-Address-ok-Button düğmesine tıklayın.To do that, click Configure, select the IP address from Current Client IP Address and paste it on the Start IP Address and End IP Address text boxes and click the add-client-ip-address-ok-button button.

    Istemci IP adresi ekleniyor

    Istemci IP adresi ekleniyorAdding Client IP Address

  3. ISTEMCI IP adresi ızın verilen IP adresleri listesine eklendikten sonra, değişiklikleri onaylamak için Kaydet ' e tıklayın.Once the Client IP Address is added to the allowed IP addresses list, click on Save to confirm the changes.

    Değişiklikleri Onayla

    Değişiklikleri OnaylaConfirm Changes

Görev 3-Web Dağıtımı kullanarak bir ASP.NET MVC 4 uygulaması yayımlamaTask 3 - Publishing an ASP.NET MVC 4 Application using Web Deploy

  1. ASP.NET MVC 4 çözümüne geri dönün.Go back to the ASP.NET MVC 4 solution. Çözüm GezginiWeb sitesi projesine sağ tıklayın ve Yayımla' yı seçin.In the Solution Explorer, right-click the web site project and select Publish.

    Uygulama yayımlanıyorPublishing the Application

    Web sitesi yayımlanıyorPublishing the web site

  2. İlk görevde kaydettiğiniz yayımlama profilini içeri aktarın.Import the publish profile you saved in the first task.

    Yayımlama profilini içeri aktarmaImporting the publish profile

    Yayımlama profili içeri aktarılıyorImporting publish profile

  3. Bağlantıyı doğrula' ya tıklayın.Click Validate Connection. Doğrulama tamamlandıktan sonra İleri' ye tıklayın.Once Validation is complete click Next.

    Note

    Bağlantıyı Doğrula düğmesinin yanında yeşil bir onay işareti gördüğünüzde doğrulama tamamlanır.Validation is complete once you see a green checkmark appear next to the Validate Connection button.

    Bağlantı doğrulanıyorValidating connection

    Bağlantı doğrulanıyorValidating connection

  4. Ayarlar sayfasında, veritabanları bölümü altında, veritabanı bağlantınızın metin kutusunun yanındaki düğmeye (yani DefaultConnection) tıklayın.In the Settings page, under the Databases section, click the button next to your database connection's textbox (i.e. DefaultConnection).

    Web dağıtımı yapılandırmasıWeb deploy configuration

    Web dağıtımı yapılandırmasıWeb deploy configuration

  5. Veritabanı bağlantısını aşağıdaki şekilde yapılandırın:Configure the database connection as follows:

    • Sunucu adı ' nda, TCP: önekini kullanarak SQL veritabanı sunucunuzun URL 'nizi yazın.In the Server name type your SQL Database server URL using the tcp: prefix.

    • Kullanıcı adı ' nda Sunucu Yöneticisi oturum açma adınızı yazın.In User name type your server administrator login name.

    • Parola alanına Sunucu Yöneticisi oturum açma parolanızı yazın.In Password type your server administrator login password.

    • Yeni bir veritabanı adı yazın, örneğin: MVC4SampleDB.Type a new database name, for example: MVC4SampleDB.

      Hedef bağlantı dizesi yapılandırılıyorConfiguring destination connection string

      Hedef bağlantı dizesi yapılandırılıyorConfiguring destination connection string

  6. Daha sonra, Tamam'a tıklayın.Then click OK. Veritabanını oluşturmak isteyip istemediğiniz sorulduğunda Evet' e tıklayın.When prompted to create the database click Yes.

    Veritabanı oluşturmaCreating the database

    Veritabanı oluşturmaCreating the database

  7. Windows Azure 'da SQL veritabanı 'na bağlanmak için kullanacağınız bağlantı dizesi varsayılan bağlantı metin kutusu içinde gösterilir.The connection string you will use to connect to SQL Database in Windows Azure is shown within Default Connection textbox. Ardından İleri'ye tıklayın.Then click Next.

    SQL veritabanı 'na işaret eden bağlantı dizesiConnection string pointing to SQL Database

    SQL veritabanı 'na işaret eden bağlantı dizesiConnection string pointing to SQL Database

  8. Önizleme sayfasında Yayımla' ya tıklayın.In the Preview page, click Publish.

    Web uygulaması yayımlanıyorPublishing the web application

    Web uygulaması yayımlanıyorPublishing the web application

  9. Yayımlama işlemi tamamlandıktan sonra varsayılan tarayıcınız yayınlanan Web sitesini açar.Once the publishing process finishes, your default browser will open the published web site.

    Windows Azure 'da yayımlanan uygulamaApplication published to Windows Azure

    Windows Azure 'da yayımlanan uygulamaApplication published to Windows Azure

Ek C: kod parçacıkları kullanmaAppendix C: 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