ASP.NET MVC v praxi od A do Z, 12. díl – RSVP a AJAX
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

ASP.NET MVC v praxi od A do Z, 12. díl – RSVP a AJAXASP.NET MVC v praxi od A do Z, 12. díl – RSVP a AJAX

 

ASP.NET MVC v praxi od A do Z, 12. díl – RSVP a AJAX

Google       Google       20. 9. 2009       13 022×

V dnešním dílu umožníme přihlášeným uživatelům, aby se mohli zaregistrovat k nějaké večeři. To zajistíme pomocí AJAXu a vše navíc obohatíme trochou jQuery.

Reklama
Reklama

Nejdřív si napíšeme jednu další pomocnou metodu.

Metoda IsUserRegistered

Tato metoda je velmi podobná metodě IsHostedBy, kterou jsme si napsali v minulém dílu. Jednoduše bude vracet true nebo false v závislosti na tom, zda je uživatel přihlášený jako host k večeři, jejíž detaily si momentálně prohlíží. Následující kód vložíme do třídy Dinner v souboru Dinner.cs:

public bool IsUserRegistered(string userName)
{
    return RSVPs.Any(r => r.AttendeeName.Equals(userName, StringComparison.InvariantCultureIgnoreCase));
}

A kód níže přidáme do šablony Details, zobrazí totiž text o tom, jestli je uživatel zaregistrován k večeři, a další drobnosti:

<% if (Request.IsAuthenticated) { %>
    <% if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>       
        <p>Na tuto událost jste zaregistrován!</p>
        
    <% } else {  %>  
        <p>Na tuto událost nejste zaregistrován</p>  
    <% }  %>

<% } else { %>
    Musíte být <a href="/Account/Logon">přihlášen</a>, pokud se chcete zúčastnit této večeře.
<% } %>

Je víceméně jen na vás, kam kód umístíte, já ho dal úplně naspod stránky, takže těsně před uzavírací tag </asp:Content>.

Akční metoda Register

Bylo by vhodné dát uživateli možnost se vůbec nějak na večeři zaregistrovat, nemyslíte? Protože bude naše nová akční metoda operovat nad jinou tabulkou, vytvoříme pro ni i nový controller, který pojmenujeme, jak jinak, RSVPController (stačí jen kliknout na adresář Controller a zvolit Add->Controller).

Metoda Register bude přijímat jako parametr ID večeře, zkontroluje, jestli uživatel už není zaregistrovaný, a pokud skutečně není, přidá nový objekt do kolekce RSVPs. Tomu celému vévodí atribut Authorize, který zajistí, že uživatel je vůbec přihlášen do systému, aby mohl tuto metodu zavolat. Výše uvedená logika se dost podobá tomu, co jsme napsali v minulém dílu, takže si už rovnou ukážeme kód celého RSVPControlleru:

using System;
using System.Web.Mvc;
using NerdDinner.Models;

namespace NerdDinner.Controllers
{
    public class RSVPController : Controller
    {
        DinnerRepository dinnerRepository = new DinnerRepository();

        // AJAX: /Dinners/Register/1
        [AcceptVerbs(HttpVerbs.Post), Authorize]
        public ActionResult Register(int id)
        {
            Dinner dinner = dinnerRepository.GetDinner(id);

            if (!dinner.IsUserRegistered(User.Identity.Name))
            {
                RSVP rsvp = new RSVP();
                rsvp.AttendeeName = User.Identity.Name;

                dinner.RSVPs.Add(rsvp);
                dinnerRepository.Save();
            }

            return Content("Děkujeme, uvidíme se tam!");
        }
    }
}

Všimněte si, že místo view vracíme jen string. Mohli jsme sice potvrzovací zprávu vložit do view šablony, ale protože je to jen řádek textu, je to dost zbytečné.

Volání metody Register pomocí AJAXu

AJAXem budeme z view Details volat metodu Register. Díky tomu neuvidí uživatel žádné refreshování, vše proběhne asynchronně na pozadí.

Ještě než uděláme cokoliv jiného, musíme referencovat pár knihoven. Kód vložíme do hlavičky v master page (soubor Site.Master):

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="/Scripts/jQuery-1.3.2.js" type="text/javascript"></script>
</head>

První knihovna je jádro celého ASP.NET AJAXu, druhá knihovna slouží pro integraci AJAXu s MVC frameworkem a třetí knihovna je pro podporu jQuery, využijeme ji v další kapitole. Do master page je vkládáme hlavně proto, abychom mohli AJAX a jQuery použít kdekoliv v aplikaci.

Už se můžeme podívat na implementaci AJAXu. Stačí jen upravit šablonu Details, aby místo textu „Na tuto událost nejste zaregistrován“ zobrazovala odkaz, který při kliknutí pomocí AJAXu zavolá metodu Register:

<div id="rsvpmsg">
    <% if (Request.IsAuthenticated) { %>
        <% if (Model.IsUserRegistered(Context.User.Identity.Name)) { %>       
            <p>Na tuto událost jste zaregistrován!</p>
            
        <% } else { %>  
            <%=Ajax.ActionLink("Zaregistrujte se na tuto událost",
                                "Register", "RSVP",
                                new {id = Model.DinnerID},
                                new AjaxOptions{UpdateTargetId = "rsvpmsg"}) %>  
        <% }  %>

    <% } else { %>
        Musíte být <a href="/Account/Logon">přihlášen</a>, pokud se chcete zúčastnit této večeře.
    <% } %>
</div>

Jako vždy si teď popíšeme provedené změny. Centrem všeho je pomocná metoda Ajax.ActionLink, ne nepodobná metodě Html.ActionLink, kterou jsme už kdysi využívali. Rozdíl je asi jasný na první pohled – místo toho, aby se vygeneroval klasický odkaz, vygeneruje se odkaz na akční metodu, která se zavolá AJAXem. Ve výše uvedeném kódu tak voláme metodu Register controlleru RSVP a předáváme jí DinnerID jako „id“ parametr. Poslední parametr typu AjaxOptions říká, že po vykonání akce chceme aktualizovat div, který se jmenuje „rsvpmsg“.

Uživatelé se od teď mohou přihlašovat k večeřím! Zkuste si to a uvidíte, že je to bleskové, sami si nejspíš nestihnete ničeho všimnout, téměř to vypadá, jako kdyby se jen odkaz změnil na obyčejný text, ale na pozadí se skutečně přidal řádek do databáze. Celý POST požadavek má totiž jen pár kilobajtů a díky tomu vše proběhne rychle i na pomalém připojení:

POST /Dinners/Register/49 HTTP/1.1
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Referer: http://localhost:8080/Dinners/Details/49

A odpověď je podobně maličká:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 25
Děkujeme, uvidíme se tam!

Přidání jQuery animace

Je hezké, že registrace na večeři je tak rychlá, ale někdy si uživatel ani nemusí všimnout, že se odkaz změnil na normální text. Proto by bylo vhodné, abychom něčím upoutali pozornost uživatele, například jednoduchou jQuery animací.

jQuery je v poslední době velmi populární opensource JavaScriptová knihovna, která nám jednoduše umožní dosáhnout toho, co chceme, však uvidíte. Knihovnu jsme v master page už nareferencovali, takže si můžeme vysvětlit základní jQuery syntaxi.

Základem často bývá metoda $(), která vrací jeden nebo více HTML elementů podle CSS selektoru. Příklad: $("#rsvpmsg“) zvolí HTML element s id „rsvpmsg“, zatímco $(".neco“) by zvolilo všechny elementy používající CSS třídu „neco“. Můžeme psát i složitější příkazy, toto třeba vrátí všechny zatrhnuté checkboxy:

$("input[@type=radio][@checked]")

Jakmile máme zvolený nějaký element, můžeme na něj volat metody:

$("#rsvpmsg").hide();

Pro naši aplikaci si vytvoříme funkci „AnimateRSVPMessage“, která zvolí div „rsvpmsg“ a během 400 milisekund zvětší text v něm. Jak tento skript dostanete do hlavičky výsledného HTML, nechám na vás.

<script type="text/javascript">

function AnimateRSVPMessage() {
    $("#rsvpmsg").animate({fontSize: "1.5em"}, 400);
}

</script>

Poslední věc, kterou musíme udělat, je přidání jednoho parametru do objektu AjaxOptions, který po úspěšném vykonání akční metody Register zavolá JavaScriptovou funkci pro animaci:

<%=Ajax.ActionLink("Zaregistrujte se na tuto událost",
                    "Register", "RSVP",
                    new {id = Model.DinnerID},
                    new AjaxOptions{UpdateTargetId = "rsvpmsg",
                                    OnSuccess = "AnimateRSVPMessage"}) %> 

Tento krok je volitelný: já jsem si ještě do souboru Site.css přidal definici pro „rsvpmsg“, takže potvrzovací text bude červený.

Pročištění view Details

Protože celé naše snažení zapříčinilo to, že je kód ve view Details poměrně nepřehledný, zopakujeme si lehce obsah 9. dílu – tohle je přesně ta situace, kdy se hodí využít partial views! Provedení ale nechám na vás, pokud si už nepamatujete, jak na to, zkonzultuje zmíněný 9. díl. Já jen ukážu finální kód view Details:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NerdDinner.Models.Dinner>" %>
 
<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Večeře: <%=Html.Encode(Model.Title) %>    
</asp:Content>

<asp:Content ID="Scripts" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">

    function AnimateRSVPMessage() {
        $("#rsvpmsg").animate({ fontSize: "1.5em" }, 400);
    }

    </script>  
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%=Html.Encode(Model.Title) %></h2>
    <p>
        <strong>Kdy:</strong>
        <%=Model.EventDate.ToShortDateString() %>
        <strong>@</strong>
        <%=Model.EventDate.ToShortTimeString() %>
    </p>
    <p>
        <strong>Kde:</strong>
        <%=Html.Encode(Model.Address) %>,
        <%=Html.Encode(Model.Country) %>
    </p>
    <p>
        <strong>Popis:</strong>
        <%=Html.Encode(Model.Description) %>
    </p>
    <p>
        <strong>Pořadatel:</strong>
        <%=Html.Encode(Model.HostedBy) %>
        (<%=Html.Encode(Model.ContactPhone) %>)
    </p>
    <% Html.RenderPartial("RSVPStatus"); %>
    <% Html.RenderPartial("EditAndDeleteLinks"); %>   
</asp:Content>

To je pro dnešek vše. Příště budeme pokračovat v našich hrátkách s AJAXem a implementujeme pomocí něj a služby Microsoft Virtual Earth interaktivní mapu světa, kde se bude ukazovat umístění večeří.

Zdroj: http://nerddinnerbook.s3.amazonaws.com/Part10.htm

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Jakub KottnauerJakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý