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
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 433×

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 Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Reklama
Reklama
Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

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 © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý