QUIZ – aplikacja ASP.NET MVC z AngularJS

Autorzy: Remigiusz Bogdał


C#, ASP.NET, MVC, AngularJS


Artykuł ten jest czwartą- ostatną częścią serii, która ukazała się na stronie koła informatycznego Reset. Artykuły przedstawiały rozwiązanie problemu dotyczącego napisania prostego quizu internetowego „Co to za gra?”. W tym przypadku zastosowaną technologią do rozwiązania tego zagadnienia będzie ASP.NET MVC z wykorzystaniem Ajax oraz AngularJS.
Artykuł został napisany w ramach staży realizowanych w firmie LGBS Polska.

Wstęp {sekcja}
W tym tutorialu użyjemy modelu quizu, który został utworzony w pierwszym(link do art. Piotra) artykule tej serii. Zmieni się jedynie sposób w jaki będziemy wyświetlać dane - teraz widok będzie odpytywał kontroler "w tle", a informacje, które zostaną z niego zwrócone będą wyświetlone użytkownikowi bez przeładowania strony.
Potrzebne narzędzia {sekcja}
Czego będziemy potrzebować? Jak nie trudno się domyślić, musimy pobrać AngularJS. Jak? Mamy dwie możliwości: odwiedzić stronę http://angularjs.org, następnie wybrać Download i dodać pobrane pliki do projektu lub przez zainstalowanie paczki NuGet.
Ja wybrałem drugą opcję - klikamy więc prawym przyciskiem myszy na nasz projekt, wybieramy Manage NuGet Packages, wpisujemy "AngularJS" i instalujemy paczkę.



Wstęp

W tym tutorialu użyjemy modelu quizu, który został utworzony w pierwszym artykule tej serii[Quiz-aplikacja ASP.NET MVC]. Zmieni się jedynie sposób w jaki będziemy wyświetlać dane - teraz widok będzie odpytywał kontroler "w tle", a informacje, które zostaną z niego zwrócone będą wyświetlone użytkownikowi bez przeładowania strony.

Potrzebne narzędzia

Czego będziemy potrzebować? Jak nie trudno się domyślić, musimy pobrać AngularJS. Jak? Mamy dwie możliwości: odwiedzić stronę http://angularjs.org, następnie wybrać Download i dodać pobrane pliki do projektu lub przez zainstalowanie paczki NuGet.

Ja wybrałem drugą opcję - klikamy więc prawym przyciskiem myszy na nasz projekt, wybieramy Manage NuGet Packages, wpisujemy "AngularJS" i instalujemy paczkę.

nuget

Kontroler

Pierwsze, co musimy zrobić to utworzyć kontroler - nazwijmy go AngularController.

W utworzonym przed chwilą kontrolerze musimy stworzyć obiekt GalleryService - robić to będziemy w konstruktorze kontrolera.

 

public AngularController()
{
    _galleryService = new GalleryService();
}

 

Dla akcji Index zwracamy widok - tak jak w poprzednich artykułach.

Teraz musimy utworzyć metodę, która będzie zwracała JsonResult, a jako parametr przyjmie identyfikator wysłanej przez nas odpowiedzi. Obiektem, który zwrócimy jest nasz cały ViewModel - będziemy mieli dostęp do właściwości, które w nim utworzyliśmy.

Tak będzie wyglądała metoda, z którą będziemy się komunikować z widoku:

 

public JsonResult GetQuestion(int? answer)
{
    if (_galleryService==null)
        _galleryService = new GalleryService();
    if (System.Web.HttpContext.Current.Session["GalleryId"] != null)
        _galleryId = (int) System.Web.HttpContext.Current.Session["GalleryId"];
    else
        _galleryId = 0;

    _question = _galleryService.GetQuestion();
            
    if(answer!=null && _galleryId!=0)
    {
        var correctAnswer = _galleryService.CheckAnswer((int) answer, _galleryId);
        _question = _galleryService.GetQuestion();
        _question.IsCorrect = correctAnswer.IsCorrect;
        _question.Result = correctAnswer.NameOfCorrectAnswer;
    }
    return Json(_question, JsonRequestBehavior.AllowGet);
}

 

W metodzie GetQuestion sprawdzamy, czy w sesji mamy zapamiętaną odpowiedź do gry. Jeżeli tak- pobieramy ją i wykonujemy metodę CheckAnswer, która sprawdza, czy udzieliliśmy poprawnej odpowiedzi - później dane zapisujemy do ViewModelu.

Widok

W końcu udało nam się dojść do momentu, w którym zaczniemy korzystać z AngularJS.

Tworzymy widok - Index.cshtml, dodajemy lokalizację do pliku, który został pobrany ze strony AngularJs.org oraz do jQuery.

 

function QuizCtrl($scope, $http) {
    $scope.NextQuestion = function (answer) {
        if (answer == null) {
            alert("Wybierz odpowiedź");
        } else {
            $http({
                method: "GET",
                url: "/Angular/GetQuestion",
                params: { answer: answer }
            }).
               success(function (data) {
                   $scope.Quiz = angular.fromJson(data);
                   $scope.Quiz.Selected = null;
                }).
               error(function () {
                   alert("Błąd");
               });
        }
    }

    $(function() {
        $scope.NextQuestion('');
    });
}

 

Krótkie wyjaśnienie: wewnątrz kontrolera mamy dostęp do obiektu $scope - do niego właśnie musimy przypisywać wszystkie zmienne, które chcemy wyświetlić w dokumencie. Jest to swego rodzaju pośrednik między widokiem a kontrolerem.

Utworzyliśmy funkcję NextQuestion, która jako argument przyjmuje odpowiedź. Jej zadaniem jest wykonanie zapytania do kontrolera naszej aplikacji i zapisanie otrzymanych danych do obiektu $scope. Dane, które otrzymujemy z kontrolera są w formacje Json, musimy więc użyć metody do parsowania danych.

Przejdźmy teraz do HTML'a.

Najważniejszą rzeczą jest dodanie do znacznika html dyrektywy ng-app. Dzięki niej wszystko wewnątrz znacznika html zostanie "przepuszczone" do Angulara.

Tworzymy blok, w którym zawierać się będzie nasz quiz. Ważnym elementem jest dodanie do naszego "div'a" dyrektywy ng-controller="QuizCtrl". Oznacza ona, że wewnątrz elementu, w którym została umieszczona, będziemy korzystać z kontrolera QuizCtrl. Do elementu <img /> dodajemy ng-src="{{Quiz.ImagePath}}" - adres obrazka będzie pobierany z obiektu $scope.Quiz.

ViewModel naszej gry zawiera listę odpowiedzi (właściwość Answers). Aby wyświetlić wszystkie elementy kolekcji wystarczy użyć dyrektywy ng-repeat, która działa jak foreach. Wygląda to tak:

 

<span ng-repeat="answer in Quiz.Answers">
    <label>
        <input type="radio" name="answer" value="{{answer.AnswerId}}" ng-model="Quiz.Selected" />
        <span>{{answer.Name}}</span>
    </label><br />
</span>

 

Ostatnim z podstawowych elementów jest przycisk:

 

<input type="button" value="Sprawdź" ng-click="NextQuestion(Quiz.Selected)" />

 

Funkcja NextQuestion jest wywoływana po naciśnięciu przycisku - jako argument przesyłana jest wartość zmiennej Selected, która zmieniać się będzie wraz ze zmianą zaznaczonej odpowiedzi.

W tym momencie nasza aplikacja działa. Możemy teraz dodać informację czy udzielona odpowiedź była prawidłowa, jeżeli odpowiedź była zła - powinno nastąpić wyświetlenie poprawnej.

Informacja o udzielonej odpowiedzi:

 

<h4 ng-if="Quiz.IsCorrect">Dobrze</h4>
<h4 ng-if="Quiz.IsCorrect == false && Quiz.Result!=null">Źle<br />To była gra <span>{{Quiz.Result}}</span></h4>

 

ng-if to znany nam if - jeżeli wyrażenie wewnątrz jest prawdziwe, wyświetlamy treść znajdującą się w tagach.

W tym momencie nasza aplikacja wygląda tak:

screen

To już wszystko, co chciałem przedstawić. Możliwości Angulara są ogromne - powyższe przykłady, to jedynie namiastka tego, co możemy uzyskać korzystając z tej biblioteki.

Ciekawe przykłady znaleźć można na oficjalnej stronie: angularjs.org.

 

Do pobrania

Liczba ocen: 12 | Średnia ocen: 3.66

Czytaj także

 

Skomentuj

Twój komentarz
Dodaj

Komentarze

Nasz Fanpage

Popularne treści

  • .NET  
  • 3D  
  • 8  
  • ActiveDirectory  
  • AJAX  
  • amazon web services  
  • Android  
  • Android Market  
  • AngularJS  
  • Animacja  
  • API  
  • aplikacje  
  • Aplikacje wielojęzyczne  
  • asembler  
  • ASHX  
  • ASP.NET  
  • ASP.NET MVC  
  • assembler  
  • Automated Installation Kit  
  • Azure  
  • bezpieczeństwo  
  • bing  
  • Blender  
  • C#  
  • certyfikat  
  • chmura  
  • cloud computing  
  • cmd  
  • Cmdlet  
  • Cmdlet’ów  
  • core  
  • CSS  
  • Cycles  
  • developer  
  • Entity Framework  
  • Expression Blend  
  • fitl  
  • google  
  • google app engine  
  • googlemaps  
  • GPU  
  • Grafika  
  • GroupPolicy  
  • hamachi  
  • hyperv  
  • hyper-v  
  • IaaS  
  • ImageX  
  • instalacja aplikacji  
  • interface  
  • interfejs  
  • Iron Speed  
  • java  
  • JavaScript  
  • jQuery  
  • Kinect  
  • Knockout  
  • kolokacja  
  • konsola  
  • LINQ  
  • LINQ to SQL  
  • Linux  
  • MakeCert  
  • maps  
  • microsoft  
  • mobile  
  • moduły  
  • MVC  
  • mySQL  
  • OpenSource  
  • openstreet  
  • openvpn  
  • PaaS  
  • partycja  
  • PHP  
  • pliki apk  
  • pon  
  • powershell  
  • preview  
  • programowanie  
  • przeglądarka  
  • przetwarzanie w chmurze  
  • przewodnik  
  • Qt  
  • RAD  
  • Rendering  
  • SaaS  
  • script  
  • SDK  
  • server  
  • serwer  
  • Skalowanie  
  • SQL  
  • Systemy operacyjne  
  • światłowody  
  • Światłowód  
  • Template  
  • ubuntu  
  • virtual  
  • Visual Studio  
  • vpn  
  • WAIK  
  • WCF  
  • WebAdministration  
  • WebApi  
  • Windows  
  • windows azure  
  • Windows PE  
  • Windows Phone  
  • WinFroms  
  • wirtualizacja  
  • WPF  
  • XAML  
  • zdalny  
  • zdjęcia  
Komu polecasz tą stronę? (email)
Poleca (twoje imie/pseudonim)
Treść (opcjonalnie) Do Twojej treści zostanie dodany link polecanej strony
POLECAM