Uygulamalı Laboratuvar: ASP.NET Web API’si ve Angular.js ile Tek Sayfalı Uygulama (SPA) Oluşturma

Bu uygulamalı laboratuvar, ASP.NET Web API'siyle ve ASP.NET 4.x için Angular.js ile Tek Sayfalı Uygulama (SPA) oluşturmayı gösterir.

Bu uygulamalı laboratuvarda, SPA kavramını temel alan bir trivia web sitesi olan Geek Quiz'i uygulamak için bu teknolojilerden yararlanacaksınız. Test sorularını almak ve yanıtları depolamak için gerekli uç noktaları kullanıma açmak için önce ASP.NET Web API'siyle hizmet katmanını uygulayacaksınız. Ardından AngularJS ve CSS3 dönüştürme efektlerini kullanarak zengin ve duyarlı bir kullanıcı arabirimi oluşturacaksınız.

Geleneksel web uygulamalarında, istemci (tarayıcı) bir sayfa isteyerek sunucuyla iletişimi başlatır. Sunucu daha sonra isteği işler ve sayfanın HTML'sini istemciye gönderir. Sayfayla sonraki etkileşimlerde (örneğin, kullanıcı bir bağlantıya gider veya veri içeren bir form gönderir) sunucuya yeni bir istek gönderilir ve akış yeniden başlar: sunucu isteği işler ve istemci tarafından istenen yeni eyleme yanıt olarak tarayıcıya yeni bir sayfa gönderir.

Single-Page Uygulamalarında (SPA) ilk istekten sonra sayfanın tamamı tarayıcıda yüklenir, ancak sonraki etkileşimler Ajax istekleri aracılığıyla gerçekleşir. Bu, tarayıcının sayfanın yalnızca değişen bölümünü güncelleştirmesi gerekdiği anlamına gelir; sayfanın tamamını yeniden yüklemeye gerek yoktur. SPA yaklaşımı, uygulama tarafından kullanıcı eylemlerine yanıt vermek için geçen süreyi kısaltarak daha akıcı bir deneyim sağlar.

SPA mimarisi, geleneksel web uygulamalarında mevcut olmayan bazı zorlukları içerir. Ancak, ASP.NET Web API'leri gibi yeni teknolojiler, AngularJS gibi JavaScript çerçeveleri ve CSS3 tarafından sağlanan yeni stil özellikleri, SPA'ları tasarlamayı ve oluşturmayı gerçekten kolaylaştırır.

Tüm örnek kod ve kod parçacıkları adresinde bulunan Web Camps Eğitim Seti'ne https://aka.ms/webcamps-training-kitdahildir.

Genel Bakış

Hedefler

Bu uygulamalı laboratuvarda şunların nasıl yapılacağını öğreneceksiniz:

JSON verilerini göndermek ve almak için ASP.NET Web API hizmeti oluşturma
AngularJS kullanarak duyarlı bir kullanıcı arabirimi oluşturma
CSS3 dönüştürmeleriyle kullanıcı arabirimi deneyimini geliştirme

Önkoşullar

Bu uygulamalı laboratuvarı tamamlamak için aşağıdakiler gereklidir:

Web için Visual Studio Express 2013 veya üzeri

Kurulum

Alıştırmaları bu uygulamalı laboratuvarda çalıştırmak için önce ortamınızı ayarlamanız gerekir.

Windows Gezgini'ni açın ve laboratuvarın Kaynak klasörüne göz atın.
Setup.cmd'ye sağ tıklayıp Yönetici olarak çalıştır'ı seçerek ortamınızı yapılandıracak kurulum işlemini başlatın ve bu laboratuvar için Visual Studio kod parçacıklarını yükleyin.
Kullanıcı Hesabı Denetimi iletişim kutusu gösteriliyorsa, devam etmek için eylemi onaylayın.

Not

Kurulumu çalıştırmadan önce bu laboratuvar için tüm bağımlılıkları denetlediğinizden emin olun.

Kod Parçacıklarını Kullanma

Laboratuvar belgesinin tamamında kod blokları eklemeniz istenir. Size kolaylık olması için, bu kodun çoğu el ile eklemek zorunda kalmamak için Visual Studio 2013 içinden erişebileceğiniz Visual Studio Code Kod Parçacıkları olarak sağlanır.

Not

Her alıştırmaya, alıştırmanın Begin klasöründe bulunan ve her alıştırmayı diğerlerinden bağımsız olarak izlemenizi sağlayan bir başlangıç çözümü eşlik eder. Alıştırma sırasında eklenen kod parçacıklarının bu başlangıç çözümlerinde eksik olduğunu ve siz alıştırmayı tamamlayana kadar çalışmayabileceğini unutmayın. Bir alıştırmanın kaynak kodunun içinde, ilgili alıştırmadaki adımların tamamlanmasıyla sonuçlanacak kodu içeren visual studio çözümünü içeren bir End klasörü de bulacaksınız. Bu uygulamalı laboratuvarda çalışırken ek yardıma ihtiyacınız varsa bu çözümleri rehberlik olarak kullanabilirsiniz.

Egzersiz

Bu uygulamalı laboratuvar aşağıdaki alıştırmaları içerir:

Web API'si oluşturma
SPA Arabirimi Oluşturma

Bu laboratuvarın tamamlanması için tahmini süre: 60 dakika

Not

Visual Studio'yu ilk kez başlattığınızda, önceden tanımlanmış ayarlar koleksiyonlarından birini seçmeniz gerekir. Önceden tanımlanmış her koleksiyon belirli bir geliştirme stiliyle eşleşecek şekilde tasarlanmıştır ve pencere düzenlerini, düzenleyici davranışını, IntelliSense kod parçacıklarını ve iletişim kutusu seçeneklerini belirler. Bu laboratuvardaki yordamlar, Genel Geliştirme Ayarları koleksiyonunu kullanırken Visual Studio'da belirli bir görevi gerçekleştirmek için gereken eylemleri açıklar. Geliştirme ortamınız için farklı bir ayar koleksiyonu seçerseniz, dikkate almanız gereken adımlarda farklılıklar olabilir.

Alıştırma 1: Web API'si oluşturma

SPA'nın önemli parçalarından biri hizmet katmanıdır. Kullanıcı arabirimi tarafından gönderilen Ajax çağrılarını işlemekten ve bu çağrıya yanıt olarak verileri döndürmekten sorumludur. Alınan verilerin istemci tarafından ayrıştırılıp kullanılabilmesi için makine tarafından okunabilir bir biçimde sunulması gerekir.

Web API çerçevesi, ASP.NET Yığınının bir parçasıdır ve BIR RESTful API aracılığıyla genellikle JSON veya XML biçimli veriler gönderip alarak HTTP hizmetlerini uygulamayı kolaylaştırmak için tasarlanmıştır. Bu alıştırmada Geek Test uygulamasını barındıracak Web sitesini oluşturacak ve ardından ASP.NET Web API'sini kullanarak test verilerini kullanıma açmak ve kalıcı hale getirmek için arka uç hizmetini uygulayacaksınız.

Görev 1 – Geek Testi için İlk Projeyi Oluşturma

Bu görevde, Visual Studio ile birlikte gelen One ASP.NET proje türünü temel alan ASP.NET Web API'sini destekleyen yeni bir ASP.NET MVC projesi oluşturmaya başlayacaksınız. Bir ASP.NET tüm ASP.NET teknolojilerini bir araya getirir ve bunları istediğiniz gibi karıştırma ve eşleştirme seçeneği sunar. Ardından test sorularını eklemek için Entity Framework'ün model sınıflarını ve veritabanı başlatıcısını ekleyebilirsiniz.

Web için Visual Studio Express 2013'i açın ve Dosya | öğesini seçin Yeni Proje... yeni bir çözüm başlatmak için.

Yeni Proje Oluşturma
Yeni Proje iletişim kutusunda, Visual C# | altında ASP.NET Web Uygulaması'nı seçin Web sekmesi. .NET Framework 4.5'in seçildiğinden emin olun, Buna GeekQuiz adını verin, bir Konum seçin ve Tamam'a tıklayın.

Yeni ASP.NET Web Uygulaması projesi oluşturma
Yeni ASP.NET Projesi iletişim kutusunda MVC şablonunu seçin ve Web API'sini seçin. Ayrıca, Kimlik Doğrulama seçeneğinin Tek Tek Kullanıcı Hesapları olarak ayarlandığından emin olun. Devam etmek için Tamam’ tıklayın.

Web API bileşenleri dahil olmak üzere MVC şablonuyla yeni proje oluşturma
Çözüm Gezgini'daGeekQuiz projesinin Models klasörüne sağ tıklayın ve Ekle | öğesini seçin Varolan Öğe....

Var olan bir öğeyi ekleme
Varolan Öğe Ekle iletişim kutusunda Kaynak/Varlıklar/Modeller klasörüne gidin ve tüm dosyaları seçin. Ekle'ye tıklayın.

Model varlıklarını ekleme
Not

Bu dosyaları ekleyerek veri modelini, Entity Framework'ün veritabanı bağlamını ve Geek Test uygulaması için veritabanı başlatıcısını eklersiniz.

Entity Framework (EF), doğrudan bir ilişkisel depolama şeması kullanarak programlamak yerine kavramsal bir uygulama modeliyle programlama yaparak veri erişimi uygulamaları oluşturmanızı sağlayan nesne ilişkisel eşleyicidir (ORM). Entity Framework hakkında daha fazla bilgiyi burada bulabilirsiniz.

Aşağıda, yeni eklediğiniz sınıfların açıklaması yer almaktadır:
- TriviaOption: Test sorusuyla ilişkili tek bir seçeneği temsil eder
- TriviaQuestion: Bir test sorusunu temsil eder ve Seçenekler özelliği aracılığıyla ilişkili seçenekleri kullanıma sunar
- TriviaAnswer: Bir test sorusuna yanıt olarak kullanıcı tarafından seçilen seçeneği temsil eder
- TriviaContext: Entity Framework'ün Geek Test uygulamasının veritabanı bağlamını temsil eder. Bu sınıf DContext'ten türetilir ve yukarıda açıklanan varlıkların koleksiyonlarını temsil eden DbSet özelliklerini kullanıma sunar.
- TriviaDatabaseInitializer:CreateDatabaseIfNotExists'ten devralan TriviaContext sınıfı için Entity Framework başlatıcısının uygulaması. Bu sınıfın varsayılan davranışı, veritabanını yalnızca mevcut değilse oluşturmak ve Seed yönteminde belirtilen varlıkları eklemektir.
Global.asax.cs dosyasını açın ve aşağıdaki using deyimini ekleyin.
```
using GeekQuiz.Models;
```

TriviaDatabaseInitializer'ı veritabanı başlatıcısı olarak ayarlamak için Application_Start yönteminin başına aşağıdaki kodu ekleyin.

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        System.Data.Entity.Database.SetInitializer(new TriviaDatabaseInitializer()); 

        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

Kimliği doğrulanmış kullanıcılara erişimi kısıtlamak için Giriş denetleyicisini değiştirin. Bunu yapmak için Controllers klasörünün içinde HomeController.cs dosyasını açın ve Authorize özniteliğini HomeController sınıf tanımına ekleyin.
```
namespace GeekQuiz.Controllers
{
    [Authorize]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        ...
    }
}
```
Not

Yetki ver filtresi, kullanıcının kimliğinin doğrulanmış olup olmadığını denetler. Kullanıcının kimliği doğrulanmamışsa, eylemi çağırmadan HTTP durum kodu 401 (Yetkisiz) döndürür. Filtreyi genel olarak, denetleyici düzeyinde veya tek tek eylemler düzeyinde uygulayabilirsiniz.
Artık web sayfalarının düzenini ve markasını özelleştirebilirsiniz. Bunu yapmak için Görünümler | içinde _Layout.cshtml dosyasını açın Paylaşılan klasör ve My ASP.NET Application yerine Geek Quiz yazarak başlık> öğesinin içeriğini< güncelleştirin.
```
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Geek Quiz</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
```

Aynı dosyada , Hakkında ve Kişi bağlantılarını kaldırarak ve Giriş bağlantısını Yürüt'e yeniden adlandırarak gezinti çubuğunu güncelleştirin. Ayrıca , Uygulama adı bağlantısını Geek Test olarak yeniden adlandırın. Gezinti çubuğunun HTML'i aşağıdaki kod gibi görünmelidir.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Geek Quiz", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Play", "Index", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

ASP.NET Uygulamam'ın yerine Geek Test yazarak düzen sayfasının alt bilgisini güncelleştirin. Bunu yapmak için altbilgi> öğesinin< içeriğini aşağıdaki vurgulanmış kodla değiştirin.
```
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Geek Quiz</p>
    </footer>
</div>
```

Görev 2 – TriviaController Web API'sini Oluşturma

Önceki görevde, Geek Test web uygulamasının ilk yapısını oluşturdunuz. Şimdi test veri modeliyle etkileşim kuran ve aşağıdaki eylemleri kullanıma sunan basit bir Web API hizmeti oluşturacaksınız:

GET /api/trivia: Kimliği doğrulanmış kullanıcı tarafından yanıtlanacak test listesinden bir sonraki soruyu alır.
POST /api/trivia: Kimliği doğrulanmış kullanıcı tarafından belirtilen test yanıtını depolar.

Web API denetleyicisi sınıfının temelini oluşturmak için Visual Studio tarafından sağlanan ASP.NET yapı iskelesi araçlarını kullanacaksınız.

App_Start klasörünün içinde WebApiConfig.cs dosyasını açın. Bu dosya, yolların Web API denetleyicisi eylemlerine nasıl eşlendiği gibi Web API'sinin yapılandırmasını tanımlar.
Dosyanın başına aşağıdaki using deyimini ekleyin.
```
using Newtonsoft.Json.Serialization;
```

Web API eylem yöntemleri tarafından alınan JSON verileri için biçimlendiriciyi genel olarak yapılandırmak için aşağıdaki vurgulanmış kodu Register yöntemine ekleyin.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Use camel case for JSON data.
        config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

Not

CamelCasePropertyNamesContractResolver, javascript'teki özellik adları için genel kural olan özellik adlarını otomatik olarak deve durumuna dönüştürür.

Çözüm Gezgini'daGeekQuiz projesinin Controllers klasörüne sağ tıklayın ve Ekle | öğesini seçin Yeni İskeleli Öğe....

Yeni yapı iskelesi oluşturulmuş öğe oluşturma
İskele Ekle iletişim kutusunda, sol bölmede Ortak düğümün seçili olduğundan emin olun. Ardından, orta bölmede Web API 2 Denetleyicisi - Boş şablonunu seçin ve Ekle'ye tıklayın.

Web API 2 Denetleyicisi Boş şablonunu seçme

Not

ASP.NET İskelesi , ASP.NET Web uygulamalarına yönelik bir kod oluşturma çerçevesidir. Visual Studio 2013, MVC ve Web API projeleri için önceden yüklenmiş kod oluşturucuları içerir. Standart veri işlemleri geliştirmek için gereken süreyi azaltmak için veri modelleriyle etkileşim kuran kodu hızlı bir şekilde eklemek istediğinizde projenizde yapı iskelesi kullanmanız gerekir.

yapı iskelesi işlemi, gerekli tüm bağımlılıkların projeye yüklenmesini de sağlar. Örneğin, boş bir ASP.NET projesiyle başlayıp bir Web API denetleyicisi eklemek için iskeleyi kullanırsanız, gerekli Web API'si NuGet paketleri ve başvuruları projenize otomatik olarak eklenir.
Denetleyici Ekle iletişim kutusunda, Denetleyici adı metin kutusuna TriviaController yazın ve Ekle'ye tıklayın.

Trivia Denetleyicisini Ekleme
TriviaController.cs dosyası daha sonra Boş bir TriviaController sınıfı içeren GeekQuiz projesinin Controllers klasörüne eklenir. Dosyanın başına aşağıdaki using deyimlerini ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerUsings)
```
using System.Data.Entity;
using System.Threading;
using System.Threading.Tasks;
using System.Web.Http.Description;
using GeekQuiz.Models;
```
TriviaContext örneğini denetleyicide tanımlamak, başlatmak ve atmak için TriviaController sınıfının başına aşağıdaki kodu ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerContext)
```
public class TriviaController : ApiController
{
    private TriviaContext db = new TriviaContext();

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            this.db.Dispose();
        }

        base.Dispose(disposing);
    }
}
```
Not

TriviaController'ınDispose yöntemi TriviaContext örneğinin Dispose yöntemini çağırır ve triviaContext örneği atıldığında veya çöp toplandığında bağlam nesnesi tarafından kullanılan tüm kaynakların serbest bırakılmasını sağlar. Bu, Entity Framework tarafından açılan tüm veritabanı bağlantıları kapatmayı içerir.

TriviaController sınıfının sonuna aşağıdaki yardımcı yöntemini ekleyin. Bu yöntem, belirtilen kullanıcı tarafından yanıtlanacak veritabanından aşağıdaki test sorusunu alır.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerNextQuestion)

private async Task<TriviaQuestion> NextQuestionAsync(string userId)
{
    var lastQuestionId = await this.db.TriviaAnswers
        .Where(a => a.UserId == userId)
        .GroupBy(a => a.QuestionId)
        .Select(g => new { QuestionId = g.Key, Count = g.Count() })
        .OrderByDescending(q => new { q.Count, QuestionId = q.QuestionId })
        .Select(q => q.QuestionId)
        .FirstOrDefaultAsync();

    var questionsCount = await this.db.TriviaQuestions.CountAsync();

    var nextQuestionId = (lastQuestionId % questionsCount) + 1;
    return await this.db.TriviaQuestions.FindAsync(CancellationToken.None, nextQuestionId);
}

TriviaController sınıfına aşağıdaki Get eylemi yöntemini ekleyin. Bu eylem yöntemi, kimliği doğrulanmış kullanıcının sonraki sorusunu almak için önceki adımda tanımlanan NextQuestionAsync yardımcı yöntemini çağırır.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerGetAction)

// GET api/Trivia
[ResponseType(typeof(TriviaQuestion))]
public async Task<IHttpActionResult> Get()
{
    var userId = User.Identity.Name;

    TriviaQuestion nextQuestion = await this.NextQuestionAsync(userId);

    if (nextQuestion == null)
    {
        return this.NotFound();
    }

    return this.Ok(nextQuestion);
}

TriviaController sınıfının sonuna aşağıdaki yardımcı yöntemini ekleyin. Bu yöntem, belirtilen yanıtı veritabanında depolar ve yanıtın doğru olup olmadığını belirten bir Boole değeri döndürür.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerStoreAsync)

private async Task<bool> StoreAsync(TriviaAnswer answer)
{
    this.db.TriviaAnswers.Add(answer);

    await this.db.SaveChangesAsync();
    var selectedOption = await this.db.TriviaOptions.FirstOrDefaultAsync(o => o.Id == answer.OptionId
        && o.QuestionId == answer.QuestionId);

    return selectedOption.IsCorrect;
}

TriviaController sınıfına aşağıdaki Post eylem yöntemini ekleyin. Bu eylem yöntemi, yanıtı kimliği doğrulanmış kullanıcıyla ilişkilendirir ve StoreAsync yardımcı yöntemini çağırır. Ardından yardımcı yöntemi tarafından döndürülen Boole değerini içeren bir yanıt gönderir.

(Kod Parçacığı - AspNetWebApiSpa - Ex1 - TriviaControllerPostAction)
```
// POST api/Trivia
[ResponseType(typeof(TriviaAnswer))]
public async Task<IHttpActionResult> Post(TriviaAnswer answer)
{
    if (!ModelState.IsValid)
    {
        return this.BadRequest(this.ModelState);
    }

    answer.UserId = User.Identity.Name;

    var isCorrect = await this.StoreAsync(answer);
    return this.Ok<bool>(isCorrect);
}
```
TriviaController sınıf tanımına Authorize özniteliğini ekleyerek Kimliği doğrulanmış kullanıcılara erişimi kısıtlamak için Web API denetleyicisini değiştirin.
```
[Authorize]
public class TriviaController : ApiController
{
    ...
}
```

Görev 3 – Çözümü Çalıştırma

Bu görevde, önceki görevde oluşturduğunuz Web API hizmetinin beklendiği gibi çalıştığını doğrulayacağız. Ağ trafiğini yakalamak ve Web API'sinin tam yanıtını incelemek için Internet Explorer F12 Geliştirici Araçları'nı kullanacaksınız.

Not

Visual Studio araç çubuğundaki Başlangıç düğmesinde Internet Explorer'ın seçili olduğundan emin olun.

Internet Explorer seçeneği

Çözümü çalıştırmak için F5 tuşuna basın. Oturum aç sayfası tarayıcıda görünmelidir.

Not

Uygulama başlatıldığında, varsayılan olarak HomeController sınıfının Index eylemine eşlenen varsayılan MVC yolu tetiklenir. HomeController kimliği doğrulanmış kullanıcılarla sınırlı olduğundan (alıştırma 1'de bu sınıfı Yetkilendir özniteliğiyle dekore ettiğinizi unutmayın) ve henüz kimliği doğrulanmış kullanıcı olmadığından, uygulama özgün isteği oturum açma sayfasına yönlendirir.

Çözümü çalıştırma
Yeni kullanıcı oluşturmak için Kaydet'e tıklayın.

Yeni kullanıcı kaydetme
Kaydol sayfasında, bir Kullanıcı adı ve Parola girin ve Kaydet'e tıklayın.

Sayfayı kaydet
Uygulama yeni hesabı kaydeder ve kullanıcının kimliği doğrulanır ve giriş sayfasına geri yönlendirilir.

Kullanıcının kimliği doğrulandı
Tarayıcıda, Geliştirici Araçları panelini açmak için F12 tuşuna basın. CTRL + 4 tuşlarına basın veya Ağ simgesine tıklayın ve ardından ağ trafiğini yakalamaya başlamak için yeşil ok düğmesine tıklayın.

Web API'sinde ağ yakalamayı başlatma
Tarayıcının adres çubuğundaki URL'ye api/trivia ekleyin. Şimdi TriviaController'dakiGet action yönteminden yanıtın ayrıntılarını inceleyebilirsiniz.

Sonraki

Web API'sini kullanarak sonraki soru verilerini alma

Not

İndirme işlemi tamamlandıktan sonra, indirilen dosyayla bir işlem yapmanız istenir. Geliştirici Aracı penceresi aracılığıyla yanıt içeriğini watch için iletişim kutusunu açık bırakın.
Şimdi yanıtın gövdesini inceleyeceksiniz. Bunu yapmak için Ayrıntılar sekmesine ve ardından Yanıt gövdesi'ne tıklayın. İndirilen verilerin, TriviaQuestion sınıfına karşılık gelen özellikler seçeneklerine (TriviaOption nesnelerinin listesi), kimliğine ve başlığına sahip bir nesne olup olmadığını kontrol edebilirsiniz.

Web API Yanıt Gövdesini Görüntüleme
Visual Studio'ya Geri dön ve hata ayıklamayı durdurmak için SHIFT + F5 tuşlarına basın.

Alıştırma 2: SPA Arabirimini Oluşturma

Bu alıştırmada ilk olarak Geek Test'in web ön uç bölümünü oluşturacak ve AngularJS kullanarak Single-Page Uygulama etkileşimi üzerine odaklanacaksınız. Daha sonra CSS3 ile kullanıcı deneyimini geliştirerek zengin animasyonlar gerçekleştirecek ve bir sorudan diğerine geçerken bağlam değiştirmenin görsel bir etkisini sağlayacaksınız.

Görev 1 – AngularJS Kullanarak SPA Arabirimi Oluşturma

Bu görevde, Geek Test uygulamasının istemci tarafını uygulamak için AngularJS kullanacaksınız. AngularJS , tarayıcı tabanlı uygulamaları Model-View-Controller (MVC) özelliğiyle geliştirerek geliştirme ve test işlemlerini kolaylaştıran açık kaynaklı bir JavaScript çerçevesidir.

Visual Studio'nun Paket Yöneticisi Konsolu'ndan AngularJS'yi yükleyerek başlayacaksınız. Ardından, Geek Test uygulamasının davranışını sağlamak için denetleyiciyi ve AngularJS şablon altyapısını kullanarak test sorularını ve yanıtlarını işlemek için görünümü oluşturacaksınız.

Not

AngularJS hakkında daha fazla bilgi için bkz. [http://angularjs.org/](http://angularjs.org/).

Web için Visual Studio Express 2013'i açın ve Source/Ex2-CreatingASPAInterface/Begin klasöründe bulunan GeekQuiz.sln çözümünü açın. Alternatif olarak, önceki alıştırmada edindiğiniz çözümle devam edebilirsiniz.
Araçlar>NuGet Paket Yöneticisi'nden Paket YöneticisiKonsolu'nu açın. AngularJS.Core NuGet paketini yüklemek için aşağıdaki komutu yazın.
```
Install-Package AngularJS.Core
```
Çözüm Gezgini'daGeekQuiz projesinin Scripts klasörüne sağ tıklayın ve Ekle | öğesini seçin Yeni Klasör. Klasör uygulamasını adlandırın ve Enter tuşuna basın.
Yeni oluşturduğunuz uygulama klasörüne sağ tıklayın ve Ekle | öğesini seçin JavaScript Dosyası.

Yeni JavaScript dosyası oluşturma
Öğe için Ad Belirtin iletişim kutusunda, Öğe adı metin kutusuna test denetleyicisi yazın ve Tamam'a tıklayın.

Yeni JavaScript dosyasını adlandırma
quiz-controller.js dosyasında, AngularJS QuizCtrl denetleyicisini bildirmek ve başlatmak için aşağıdaki kodu ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex2 - AngularQuizController)
```
angular.module('QuizApp', [])
    .controller('QuizCtrl', function ($scope, $http) {
        $scope.answered = false;
        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = false;
        $scope.working = false;

        $scope.answer = function () {
            return $scope.correctAnswer ? 'correct' : 'incorrect';
        };
    });
```
Not

QuizCtrl denetleyicisinin oluşturucu işlevi, $scope adlı eklenebilir bir parametre bekler. Kapsamın ilk durumu, $scope nesnesine özellikler eklenerek oluşturucu işlevinde ayarlanmalıdır. Özellikler görünüm modelini içerir ve denetleyici kaydedildiğinde şablon tarafından erişilebilir.

QuizCtrl denetleyicisi QuizApp adlı modülün içinde tanımlanır. Modüller, uygulamanızı ayrı bileşenlere ayırmanıza olanak sağlayan iş birimleridir. Modülleri kullanmanın temel avantajları, kodun daha kolay anlaşılması ve birim testi, yeniden kullanılabilirlik ve bakım kolaylığı sağlamasıdır.

Şimdi görünümden tetiklenen olaylara tepki vermek için kapsama davranış ekleyebilirsiniz. $scope nesnesinde nextQuestion işlevini tanımlamak için QuizCtrl denetleyicisinin sonuna aşağıdaki kodu ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex2 - AngularQuizControllerNextQuestion)

.controller('QuizCtrl', function ($scope, $http) { 
    ...

    $scope.nextQuestion = function () {
        $scope.working = true;
        $scope.answered = false;
        $scope.title = "loading question...";
        $scope.options = [];

        $http.get("/api/trivia").success(function (data, status, headers, config) {
            $scope.options = data.options;
            $scope.title = data.title;
            $scope.answered = false;
            $scope.working = false;
        }).error(function (data, status, headers, config) {
            $scope.title = "Oops... something went wrong";
            $scope.working = false;
        });
    };
};

Not

Bu işlev, önceki alıştırmada oluşturulan Trivia Web API'sinden bir sonraki soruyu alır ve soru verilerini $scope nesnesine ekler.

$scope nesnesinde sendAnswer işlevini tanımlamak için QuizCtrl denetleyicisinin sonuna aşağıdaki kodu ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex2 - AngularQuizControllerSendAnswer)
```
.controller('QuizCtrl', function ($scope, $http) { 
    ...

    $scope.sendAnswer = function (option) {
        $scope.working = true;
        $scope.answered = true;

        $http.post('/api/trivia', { 'questionId': option.questionId, 'optionId': option.id }).success(function (data, status, headers, config) {
            $scope.correctAnswer = (data === true);
            $scope.working = false;
        }).error(function (data, status, headers, config) {
            $scope.title = "Oops... something went wrong";
            $scope.working = false;
        });
    };
};
```
Not

Bu işlev, kullanıcı tarafından seçilen yanıtı Trivia Web API'sine gönderir ve sonucu (yanıt doğruysa veya değilse) $scope nesnesinde depolar.

Yukarıdaki nextQuestion ve sendAnswer işlevleri, Tarayıcıdan XMLHttpRequest JavaScript nesnesi aracılığıyla Web API'siyle iletişimi soyutlamak için AngularJS $http nesnesini kullanır. AngularJS, RESTful API'leri aracılığıyla bir kaynağa karşı CRUD işlemleri gerçekleştirmek için daha yüksek bir soyutlama düzeyi getiren başka bir hizmeti destekler. AngularJS $resource nesnesi, $http nesnesiyle etkileşim kurmak zorunda kalmadan üst düzey davranışlar sağlayan eylem yöntemlerine sahiptir. CRUD modelini gerektiren senaryolarda $resource nesnesini kullanmayı göz önünde bulundurun (örneğin, $resource belgelerine bakın).

Sonraki adım, testin görünümünü tanımlayan AngularJS şablonunu oluşturmaktır. Bunu yapmak için, Views | içinde Index.cshtml dosyasını açın Giriş klasörünü seçin ve içeriği aşağıdaki kodla değiştirin.

(Kod Parçacığı - AspNetWebApiSpa - Ex2 - GeekQuizView)

@{
    ViewBag.Title = "Play";
}

<div id="bodyContainer" ng-app="QuizApp">
    <section id="content">
        <div class="container" >
            <div class="row">
                <div class="flip-container text-center col-md-12" ng-controller="QuizCtrl" ng-init="nextQuestion()">
                    <div class="back" ng-class="{flip: answered, correct: correctAnswer, incorrect:!correctAnswer}">
                        <p class="lead">{{answer()}}</p>
                        <p>
                            <button class="btn btn-info btn-lg next option" ng-click="nextQuestion()" ng-disabled="working">Next Question</button>
                        </p>
                    </div>
                    <div class="front" ng-class="{flip: answered}">
                        <p class="lead">{{title}}</p>
                        <div class="row text-center">
                            <button class="btn btn-info btn-lg option" ng-repeat="option in options" ng-click="sendAnswer(option)" ng-disabled="working">{{option.title}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@section scripts {
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/app/quiz-controller.js")
}

Not

AngularJS şablonu, statik işaretlemeyi kullanıcının tarayıcıda gördüğü dinamik görünüme dönüştürmek için modelden ve denetleyiciden gelen bilgileri kullanan bildirim temelli bir belirtimdir. Aşağıda, şablonda kullanılabilecek AngularJS öğelerine ve öğe özniteliklerine örnekler verilmiştir:

ng-app yönergesi AngularJS'ye uygulamanın kök öğesini temsil eden DOM öğesini bildirir.
ng-controller yönergesi, yönergenin bildirildiği noktada DOM'a bir denetleyici ekler.
Küme ayracı gösterimi {{ }} denetleyicide tanımlanan kapsam özelliklerine bağlamaları belirtir.
ng-click yönergesi, kullanıcı tıklamalarına yanıt olarak kapsamda tanımlanan işlevleri çağırmak için kullanılır.

İçerik klasörünün içinde Site.css dosyasını açın ve test görünümüne bir görünüm sağlamak için dosyanın sonuna aşağıdaki vurgulanmış stilleri ekleyin.

(Kod Parçacığı - AspNetWebApiSpa - Ex2 - GeekQuizStyles)

.validation-summary-valid {
     display: none;
}

/* Geek Quiz styles */
.flip-container .back,
.flip-container .front {
     border: 5px solid #00bcf2;
     padding-bottom: 30px;
     padding-top: 30px;
}

#content {
    position:relative;
    background:#fff;
    padding:50px 0 0 0;
}

.option {
     width:140px;
     margin: 5px;
}

div.correct p {
     color: green;
}

div.incorrect p {
     color: red;
}

.btn {
     border-radius: 0;
}

.flip-container div.front, .flip-container div.back.flip {
    display: block;
}

.flip-container div.front.flip, .flip-container div.back {
    display: none;
}

Görev 2 – Çözümü Çalıştırma

Bu görevde, test sorularından bazılarını yanıtlamak için AngularJS ile oluşturduğunuz yeni kullanıcı arabirimini kullanarak çözümü yürütürsiniz.

Çözümü çalıştırmak için F5 tuşuna basın.
Yeni bir kullanıcı hesabı kaydedin. Bunu yapmak için Alıştırma 1, Görev 3'te açıklanan kayıt adımlarını izleyin.

Not

Önceki alıştırmadaki çözümü kullanıyorsanız, daha önce oluşturduğunuz kullanıcı hesabıyla oturum açabilirsiniz.
Testin ilk sorusunun gösterildiği Giriş sayfası görünmelidir. Seçeneklerden birine tıklayarak soruyu yanıtlayın. Bu, daha önce tanımlanan sendAnswer işlevini tetikler ve seçilen seçeneği Trivia Web API'sine gönderir.

Bir soruyu yanıtlama
Düğmelerden birine tıkladıktan sonra yanıt görüntülenmelidir. Aşağıdaki soruyu göstermek için Sonraki Soru'ya tıklayın. Bu, denetleyicide tanımlanan nextQuestion işlevini tetikler.

Sonraki

Sonraki soruyu isteme
Sonraki soru görünmelidir. Soruları istediğiniz kadar yanıtlamaya devam edin. Tüm soruları tamamladıktan sonra ilk soruya dönmeniz gerekir.

Sonraki soru
Visual Studio'ya Geri dön ve hata ayıklamayı durdurmak için SHIFT + F5 tuşlarına basın.

Görev 3 – CSS3 Kullanarak Flip Animasyonu Oluşturma

Bu görevde, bir soru yanıtlandığında ve bir sonraki soru alındığında ters çevirme efekti ekleyerek zengin animasyonlar gerçekleştirmek için CSS3 özelliklerini kullanacaksınız.

Çözüm Gezgini'daGeekQuiz projesinin İçerik klasörüne sağ tıklayın ve Ekle | öğesini seçin Varolan Öğe....

İçerik klasörüne var olan bir öğeyi ekleme
Varolan Öğe Ekle iletişim kutusunda Kaynak/Varlıklar klasörüne gidin ve Flip.css'yi seçin. Ekle'ye tıklayın.

Assets'ten Flip.css dosyasını ekleme
Yeni eklediğiniz Flip.css dosyasını açın ve içeriğini inceleyin.

Çevirme dönüştürme açıklamasını bulun. Bu açıklamanın altındaki stiller CSS perspektifini ve rotateY dönüşümlerini kullanarak bir "kart çevirme" efekti oluşturur.

/* flip transformation */
.flip-container div.front {
    -moz-transform: perspective(2000px) rotateY(0deg);
    -webkit-transform: perspective(2000px) rotateY(0deg);
    -o-transform: perspective(2000px) rotateY(0deg);
    transform: perspective(2000px) rotateY(0deg);
}

    .flip-container div.front.flip {
        -moz-transform: perspective(2000px) rotateY(179.9deg);
        -webkit-transform: perspective(2000px) rotateY(179.9deg);
        -o-transform: perspective(2000px) rotateY(179.9deg);
        transform: perspective(2000px) rotateY(179.9deg);
    }

.flip-container div.back {
    -moz-transform: perspective(2000px) rotateY(-180deg);
    -webkit-transform: perspective(2000px) rotateY(-180deg);
    -o-transform: perspective(2000px) rotateY(-180deg);
    transform: perspective(2000px) rotateY(-180deg);
}

    .flip-container div.back.flip {
        -moz-transform: perspective(2000px) rotateY(0deg);
        -webkit-transform: perspective(2000px) rotateY(0deg);
        -ms-transform: perspective(2000px) rotateY(0);
        -o-transform: perspective(2000px) rotateY(0);
        transform: perspective(2000px) rotateY(0);
    }

Çevirme açıklaması sırasında bölmenin arkasını gizle'yi bulun. Bu açıklamanın altındaki stil, backface-visibility CSS özelliğini gizli olarak ayarlayarak yüzlerin görüntüleyiciden uzaklaştığında arka tarafını gizler.
```
/* hide back of pane during flip */
.front, .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
```

App_Start klasörünün içinde BundleConfig.cs dosyasını açın ve "~/Content/css" stil paketinde Flip.css dosyasına başvuruyu ekleyin

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css",
    "~/Content/Flip.css"));

Çözümü çalıştırmak ve kimlik bilgilerinizle oturum açmak için F5 tuşuna basın.
Seçeneklerden birine tıklayarak bir soruyu yanıtlayın. Görünümler arasında geçiş yaparken ters çevirme efektine dikkat edin.

Flip

Bir soruyu çevirme efektiyle yanıtlama
Aşağıdaki soruyu almak için Sonraki Soru'ya tıklayın. Çevirme efekti yeniden görünmelidir.

Flip

Ters çevirme efektiyle aşağıdaki soruyu alma

Özet

Bu uygulamalı laboratuvarı tamamlayarak aşağıdakilerin nasıl yapılacağını öğrendiniz:

ASP.NET İskelesi kullanarak ASP.NET Web API denetleyicisi oluşturma
Sonraki test sorusunu almak için web API'sini alma eylemi uygulama
Test yanıtlarını depolamak için web API'sini gönderme eylemi uygulama
Visual Studio Paket Yöneticisi Konsolu'ndan AngularJS'yi yükleme
AngularJS şablonları ve denetleyicileri uygulama
Animasyon efektleri gerçekleştirmek için CSS3 geçişlerini kullanma

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2023-07-13