Lekce 1 - První webová aplikace v ASP.NET
Pokud čtete tuto lekci, rozhodli jste se naučit technologii ASP.NET Web Forms.
Technologie ASP.NET Web Forms je již staršího data a byla překonána ASP.NET Core. Doporučujeme přejít na kurz ASP.NET Core.
Kurz předpokládá základní znalosti C# .NET a HTML, pokud něčemu nebudete rozumět, přečtěte si nejprve kurzy v sekci C# .NET (zejména OOP), případně HTML seriál Webové stránky krok za krokem, kde je vše potřebné vysvětleno.
Pokud používáte edici Express Visual Studia, budete potřebovat verzi Microsoft Visual Studio Express For Web.
Založení projektu
Naše první webová aplikace bude generátor náhodných čísel. Začněme založením nového projektu ve Visual Studio. Nový projekt založíme pomocí hlavního menu File -> New project (je tam i možnost New Web Site, ale tu nebudeme používat).
V dialogu vybereme jako jazyk C#, jako typ projektu ASP.NET Web Application a jméno zvolíme NahodneCislo.
Jakmile dialog potvrdíme, zobrazí se další s výběrem template. Template je předgenerovaná struktura projektu, my začneme s prázdným projektem a proto vybereme Empty. Potvrdíme.
Přidání stránky
Již víme, že Web Forms se snaží přiblížit co nejvíce technologii Windows Forms, která se používá pro tvorbu desktopových aplikací. Každá dynamická stránka webu bude tedy jako Web Form. K projektu si jednu takovou stránku přidáme (pravým na prtojekt -> Add -> Web Form).
Web Form pojmenujeme Default.
Stránka s tímto názvem se otevře v případě, když vstoupíme na hlavní stranu webu. Jiné technologie podobně pojmenovávají výchozí stránku index, což jistě znáte minimálně z HTML.
Visual Studio nám vygeneruje novou webovou stránku Default.aspx s následujícím obsahem:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NahodneCislo.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
Na stránce vidíme známou strukturu jednoduché HTML stránky, tedy přesněji XHTML. To se od HTML příliš neliší až na nutnost uzavírat párové tagy. Jediným elementem v těle stránky je formulář. Právě na formulářích jsou celé Web Forms postavené. Atribut runat="server" označuje, že se HTML element zpracovává na serveru, jinak by ho ASP.NET ignorovalo a bralo by ho jako obyčejný HTML form.
Na začátku dokumentu se nalézá direktiva <%, která je
jakási hlavička pro serverovou část webu. Určuje, jak má s dokumentem
ASP.NET zacházet. Stránce se nastavuje programovací jazyk (C#) a tzv.
CodeBehind, což je podobně jako u formulářových aplikací ve Windows Forms
C# kód, který formulář obsluhuje. K němu se dostaneme za malý moment.
Příprava stránky
Ve Visual Studio se přepneme do módu Design. To je grafický návrhář, přes který můžeme jednoduše měnit obsah stránky a přidávat nové kontrolky. Příslušné tlačítko naleznete v dolní liště.
Na levé straně okna si otevřeme Toolbox, což je panel nástrojů s kontrolkami.
Do divu přetáhneme Label.
Vrátíme se zpátky do kódu nebo se můžete přepnout do pohledu Split, kdy uvidíte současně kód i jeho grafickou podobu.
Do HTML kódu vyplníme titulek a nad formulář přidáme nadpis první úrovně s textem "Náhodné číslo".
Kód stránky Default.aspx bude nyní vypadat asi takto:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NahodneCislo.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Generátor náhodných čísel</title> </head> <body> <h1>Náhodné číslo</h1> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html>
Vidíme, že se do formuláře vložil nový Label, což je kontrolka pro textový popisek. Element má opět atribut runat="server". Labelu změníme ID z Label1 na cisloLabel.
Logika
Stejně jako v desktopových aplikacích budeme i zde striktně oddělovat prezentaci a logiku. To znamená, že výpočty, práce s databází a podobné úkony budou přehledně umístěné v samostatných třídách. Prezentací se naopak myslí ta část aplikace, která komunikuje s uživatelem.
K projektu si přidejme novou třídu s názvem Generator a s následujícím obsahem:
public class Generator { private Random random = new Random(); public int VratCislo() { return random.Next(100); } }
Třída nedělá nic jiného, než že vrací náhodné číslo z privátní instance třídy Random. Prakticky nemá takovýto model valný smysl, pro nás je však důležitý princip a v budoucnu budeme úplně stejně vracet např. článek z databáze.
Code Behind
Máme tedy hotovou prezentační část aplikace, kterou je HTML stránka s labelem. Dále máme logickou část, kterou je třída s metodou, která nám vrátí náhodné číslo. To budeme chtít vložit do Labelu.
Mezičlánkem, který propojuje prezentaci a logiku, je právě Code Behind daného Web Formu. Do něj můžeme ze stránky přejít pomocí pravého tlačítka a možnosti View Code. Případně si můžete najít soubor Default.aspx.cs v Solution Exploreru, stačí rozbalit Web Form Default.aspx.
Obsah souboru je následující (vynechal jsem jmenné prostory):
public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } }
ASP.NET Web Forms jsou událostně řízené. Právě událost Page_Load se vykoná ještě předtím, než ASP.NET začne načítat konkrétní stránku. V metodě Load si vytvoříme instance našeho generátoru a vygenerované číslo nastavíme do vlastnosti Text instance labelCislo. Právě pod labelCislo máme nyní přístupný náš label z formuláře. Číslo musíme převést nejprve na string.
Generator generator = new Generator();
cisloLabel.Text = generator.VratCislo().ToString();
Aplikaci spustíme.
Aplikace opravdu při každém příchodu na stránku zobrazí label s náhodným číslem. Jak to tedy celé funguje?
Princip generování stránky
ASP.NET si naparsuje zdrojový kód stránky Default.aspx jako XML a z jednotlivých elementů sestaví v paměti stromovou strukturu stránky. Za elementy s atributem runat="server" vytvoří instance objektů. Tehdy vzniká náš formulář a label. Poté je zavolána metoda Page_Load(), která nám umožňuje měnit vlastnosti jednotlivých objektů. Nakonec se z objektů v paměti vygeneruje výsledná HTML stránka, ve kterém není po ASP.NET ani památky.
Graficky bychom celou situaci mohli znázornit takto:
V příští lekci, Obsluha formulářů v ASP.NET, vytvoříme jednoduchou kalkulačku a vysvětlíme si více o tom, jak ASP.NET funguje uvnitř. Zdrojové kódy dnešního projektu jsou níže ke stažení pro případ, že by se vám něco nepovedlo, můžete si tak najít chybu. Bude tomu tak ve všech dílech.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 441x (24.95 kB)
Aplikace je včetně zdrojových kódů v jazyce C#
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.