TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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.
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ří.
