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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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

Google       Google       20. 9. 2009       15 384×

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
Jakub studuje informatiku na FIT ČVUT, jeho oblíbenou platformou je .NET.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

V přechodu na DVB-T2 tápou především senioři. Přeladit jim pomáhají vnoučata, zapojí se i stát

Už na konci měsíce může zůstat část Čechů bez televizního signálu. Vypínání stávající sítě začne již 27. listopadu v Praze a středních Čechách a do poloviny roku 2020 čeká přechod na nový standard pozemního digitálního televizního vysílání DVB-T2 celou republiku. K naladění nového televizního vysílání musí řada lidí nakoupit modernější zařízení, upravit antény nebo přejít na kabelové či internetové vysílání. 

Reklama
Reklama
Obrázek ke článku Zavádění Master Data Management v praxi

Zavádění Master Data Management v praxi

Předchozím článku jsme si vysvětlili, co jsou to Master Data, kdy je firma obvykle začíná řešit, v jakých krocích postupovat a jak nám může pomoci zvláštní nástroj pro evidenci Master dat. V tomto článku se podíváme na dvou příkladech, jak prakticky začít Master data řešit.

1. Nová Master Data, která potřebujeme někde spravovat
2. Zmapování existujících Master dat a určení jejich vlastníků

Obrázek ke článku 5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

5 nesprávných důvodů, proč dělat vlastní mobilní aplikaci

Myslíte si, že máte skvělý nápad na byznys apku a znáte všechno, co potřebujete? Možná vám vývoj software na míru rozmluví Vláďa Skoumal, z firmy studio SKOUMAL vyvijející mobilní aplikace 5.11. 2019 v 18:00 v Impact Hub Praha nebo tento jeho článek.


 

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý