QUIZ – aplikacja ASP.NET MVC z jQuery Template

Autorzy: Piotr Romański


C#, ASP.NET, AJAX, ASP.NET MVC, MVC, jQuery, Template


Artykuł ten jest drugą częścią serii, która ukazywać się będzie na stronie koła informatycznego Reset. Artykuły przedstawiać będą 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 jQuery Ajax oraz jQuery Template.
Artykuł został napisany w ramach staży realizowanych w firmie LGBS Polska.

 

Wstęp {sekcja}
Nawiązując do poprzedniego artykułu, w którym tworzyliśmy Quiz w czystym ASP.NET MVC, spróbujemy przerobić ten projekt tak, aby wykorzystać wspomniane technologie: jQuery Ajax[http://api.jquery.com/category/ajax/] oraz jQuery Template[https://github.com/BorisMoore/jquery-tmpl].
Będziemy bazować na projekcie wykonanym w poprzednim artykule[tutaj_link_do_poprzedniego_artykułu].
Technologia jQuery Ajax umożliwia asynchroniczne wczytywanie wybranej zawartości strony bez przeładowywania jej całości. Natomiast technologia jQuery Template pozwala na tworzenie szablonów, które będą odpowiedzialne za wyświetlanie konkretnej zawartości

 

Wstęp

Nawiązując do poprzedniego artykułu, w którym tworzyliśmy Quiz w czystym ASP.NET MVC, spróbujemy przerobić ten projekt tak, aby wykorzystać wspomniane technologie: jQuery Ajax[http://api.jquery.com/category/ajax/] oraz jQuery Template[https://github.com/BorisMoore/jquery-tmpl].

Będziemy bazować na projekcie wykonanym w poprzednim artykule[QUIZ - aplikacja ASP.NET MVC].

Technologia jQuery Ajax umożliwia asynchroniczne wczytywanie wybranej zawartości strony bez przeładowywania jej całości. Natomiast technologia jQuery Template pozwala na tworzenie szablonów, które będą odpowiedzialne za wyświetlanie konkretnej zawartości.

Aktualizacja projektu

Aby w ogóle móc korzystać z dobrodziejstw powyższych technologii, musimy dodać odpowiednie skrypty do projektu. Dla przypomnienia struktura kompletnego projektu z poprzedniego artykułu.

solucja1

Pobieramy skrypt jQuery wykorzystując w tym celu menadżer dodatków w Visual Studio NuGet. Klikamy prawym przyciskiem na nazwie projektu, wybieramy pozycję Menage NuGet Packages. Po wyszukaniu paczki instalujemy ją.

NuGet1

Kolejny krokiem będzie pobranie skryptu jQuery Template, który znajdziemy pod adresem [https://my-web-js.googlecode.com/files/jquery.tmpl.min.js] . Pobrane pliki zapisujemy do folderu Scripts w naszym projekcie.

Gdy dodaliśmy już wymagane pliki możemy utworzyć nowy, pusty kontroler. Nazwijmy go AjaxController. Następnie dodajemy do kontrolera kod przedstawiony poniżej na listingu. Sposób dostępu do danych z poprzedniego artykułu pozostaje niezmieniony i zostanie on wykorzystany również w niniejszym projekcie.

 

public class AjaxController : Controller
{
    private GalleryService _galleryService = new GalleryService();

    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetQuestion()
    {
        var question = _galleryService.GetQuestion();
        return Json(question, JsonRequestBehavior.AllowGet);
    }

    public JsonResult CheckAnswer(int answerId = -1)
    {
        if (Session["GalleryId"] != null && Session["GalleryId"] is int)
        {
            var galleryId = (int)Session["GalleryId"];
            var answer = _galleryService.CheckAnswer(answerId, galleryId);
            var question = _galleryService.GetQuestion();
            question.Result = answer.NameOfCorrectAnswer;
            question.IsCorrect = answer.IsCorrect;
            return Json(question, JsonRequestBehavior.DenyGet);
        }
        else
            return Json(_galleryService.GetQuestion(), JsonRequestBehavior.DenyGet);
    }
}

Dodaliśmy dwie dodatkowe metody, które zwracają obiekt typu JsonResult. Pierwsza z nich GetQuestion ma za zadanie zwracać nasz model widoku w formacie Json. Zwróćmy uwagę, na drugi parametr w metodzie:

 

Json(question, JsonRequestBehavior.AllowGet)

 

Odpowiada on za możliwość wywołania akcji poprzez zapytanie typu get. Druga metoda CheckAnswer sprawdza poprawność udzielonej odpowiedzi i zwraca rezultat działania - również w formacie Json. Jednak ta metoda nie może być wywołana przez zapytanie typu get.

Dodanie nowego widoku

Gdy zdefiniowaliśmy już nowy kontroler, dodajmy teraz do niego widok. Sposób dodawania widoków przedstawiony został w poprzednim artykule.

W MVC 4 wprowadzono nowy mechanizm zwany Bundle. Jego zadaniem jest łączenie- wskazanych przez programistę- plików ze skryptami w celu zwiększenia wydajności. Użytkownik pobiera wtedy jeden plik, w którym zawarte są wszystkie wymagane skrypty. Jednak dla ułatwienia, w niniejszym artykule, wykorzystamy dołączanie plików z kodem javascript, umieszając je w elemencie head.

 

<script src="~/Scripts/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.tmpl.min.js" type="text/x-jquery-tmpl"></script>

 

Następnie definiujemy szablon dla każdej z możliwych do wyboru odpowiedzi. W elemencie head pod dodanymi wcześniej skryptami dodajemy poniższy kod.

 

<script id="answerTmpl" type="text/x-jquery-tmpl">
    <input type="radio" name="answerId" value="${AnswerId}" />
    <label>${Name}</label>
    <br />
</script>

 

Każdy szablon musi mieć zadeklarowany identyfikator oraz atrybut type ustawiony na text/x-jquery-tmpl. Wewnątrz znaczników script definiujemy nasz szablon. Przedstawiony powyżej przykład do atrybutu value przypisze wartość Id. Do wstawiania wartości tekstowych do szablonów służy tag ${}.

W sposób analogiczny utworzymy szablony dla całego pytania, obrazka oraz zwracanej poprawnej odpowiedzi. Pod stworzonym szablonem należy dopisać poniższy kod.

 

<script id="imageTmpl" type="text/x-jquery-tmpl">
    <img src="${$item.data}" width="500" height="280" />
    <br />
</script>
<script id="questionTmpl" type="text/x-jquery-tmpl">
    {{tmpl(ImagePath) "#imageTmpl"}}
    <form method="POST" name="questionForm">
        {{tmpl(Answers) "#answerTmpl"}}
    </form>
</script>
<script id="correctAnswerTmpl" type="text/x-jquery-tmpl">
    <h3>Poprawna odpowiedź to: ${Result}</h3>
    {{if IsCorrect === true}}
    <h4>Brawo!</h4>
    {{else}}
    <h4>Niestety nie udzieliłeś poprawnej odpowiedzi!</h4>
    {{/if}}
</script>

 

Jak można zauważyć technologia jQuery Template umożliwia nam również stosowanie wyrażeń logicznych. Możliwe jest także generowanie szablonów w szablonie, jak ma to miejsce w przypadku szablonu dla pytania.

Kolejnym krokiem będzie tworzenie zapytań w technologii Ajax. Zanim jednak do niego przejdziemy, zdefiniujemy zawartość body naszego widoku.

 

<body>
    <div id="answer">

    </div>
    <h2>Co to za gra?</h2>
    <div id="content">

    </div>
    <input type="button" value="Sprawdź!" id="check" />
</body>

 

 

Gdy już mamy utworzony widok, możemy skupić się na napisaniu zapytań w technologii AJAX. W części head, pod ostatnim zdefiniowanym przez nas szablonie, dodamy zapytanie, które będzie wywoływane po załadowaniu całości dokumentu.

 

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("GetQuestion")',
            dataType: "JSON",
            success: function (data) {
                $("#content").empty();
                $("#questionTmpl").tmpl(data).appendTo("#content");
            },
            error: function () {
                alert("Problem z pobraniem danych");
            }
        });
    });
</script>

 

Warto podkreślić, że powyższe polecenie można zapisać w formie skróconej - zainteresowanych czytelników odsyłamy na stronę: getJSON[http://api.jquery.com/jquery.getjson/].

Wykorzystane parametry zapytania Ajax to:

• url - adres akcji po stronie serwera, do której zostanie wysłane zapytanie,

• dataType - określa typ danych, które otrzymamy w odpowiedzi(w naszym przypadku Json),

• success - jest to funkcja wywoływana po poprawnym wykonaniu zapytania,

• error - zwróci komunikat "Problem z pobraniem danych" w przypadku nieudanego pobierania danych z serwera.

Fragment kodu,który został przedstawiony wcześniej:

 

$("#questionTmpl").tmpl(data).appendTo("#content");

 

odpowiada za wygenerowanie szablonu dla wskazanych danych w odpowiednim miejscu, tzn.:

 

$(id_szablonu).tmpl(nasze_dane).appendTo(miejsce_docelowe);

 

Dodajmy jeszcze funkcję, która będzie wywoływana po kliknięciu w przycisk Sprawdź!. Zapytanie to określimy jako zapytanie typu post. Będzie ono wysyłało udzieloną odpowiedź do akcji CheckAnswer.

 

$(document).ready(function () {
    $("#check").click(function () {
        $.ajax({
            url: '@Url.Action("CheckAnswer")',
            dataType: "JSON",
            type: "post",
            data: $("form[name=questionForm]").serialize(),
            success: function (dataRes) {
                $("#answer").empty();
                $("#correctAnswerTmpl").tmpl(dataRes).appendTo("#answer");
                $("#content").empty();
                $("#questionTmpl").tmpl(dataRes).appendTo("#content");
            },
            error: function () {
                alert("Problem z pobraniem danych");
            }
        });
        return false;
    });
});

 

Zapytanie typu post ma określone dwa dodatkowe parametry w porównaniu do zapytania przedstawionego wcześniej. Są to:

• type - określający typ zapytania- post czy get,

• data - definiujący dane przekazywane do serwera w zapytaniu.

Tak przygotowany widok zapewni nam możliwość wyświetlania odpowiedzi oraz wczytywania nowych pytań bez przeładowywania całej strony.

 

Technologie przedstawione w niniejszym artykule pozwoliły na wstępne poznanie jQuery Ajax oraz jQuery Template. Autor zachęca do szerszego zapoznania się z zaprezentowanymi technologiami.

Do pobrania


Liczba ocen: 5 | Średnia ocen: 4.2

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