1. diel - Prvá webová aplikácia v ASP.NET
V minulom dieli nášho kurzu tutoriálov o tvorbe webových aplikácií v ASP.NET sme si vysvetlili prečo je dobrý nápad našu aplikáciu naprogramovať ako webovú. Ak čítate túto lekciu, rozhodli ste sa naučiť technológiu ASP.NET Web Forms.
Táto technológia je už staršieho dáta a bola prekonaná ASP.NET Core, odporúčame prejsť teda skôr na kurz ASP.NET Core.
Kurz predpokladá základné znalosti C# .NET a HTML, ak niečomu nebudete rozumieť, prečítajte si najprv kurzy v sekcii C# .NET (najmä OOP), prípadne HTML seriál Webové stránky krok za krokom, kde je všetko potrebné vysvetlené.
Ak používate edícii Express Visual Studia, budete potrebovať verziu Microsoft Visual Studio Express For Web.
Založenie projektu
Naša prvá webová aplikácia bude generátor náhodných čísel. Začnime založením nového projektu vo Visual Studio. Nový projekt založíme pomocou hlavného menu File -> New project (je tam aj možnosť New Web Site, ale tú nebudeme používať).
V dialógu vyberieme ako jazyk C #, ako typ projektu ASP.NET Web Application a meno zvolíme NahodneCislo.
Akonáhle dialóg potvrdíme, zobrazí sa ďalší s výberom template. Template je předgenerovaná štruktúra projektu, my začneme s prázdnym projektom a preto vyberieme Empty. Potvrdíme.
Pridanie stránky
Už vieme, že Web Forms sa snaží priblížiť čo najviac technológiu Windows Forms, ktorá sa používa pre tvorbu desktopových aplikácií. Každá dynamická stránka webu bude teda ako Web Form. K projektu si jednu takú stránku pridáme (pravým na prtojekt -> Add -> Web Form).
Web Form pomenujeme Default.
Stránka s týmto názvom sa otvorí v prípade, keď vstúpime na hlavnú stranu webu. Iné technológie podobne pomenúvajú predvolenú stránku index, čo iste poznáte minimálne z HTML.
Visual Studio nám vygeneruje novú webovú stránku Default.aspx s nasledujúcim obsahom:
<%@ 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ánke vidíme známu štruktúru jednoduché HTML stránky, teda presnejšie XHTML. To sa od HTML príliš nelíši až na nutnosť uzatvárať párové tagy. Jediným elementom v tele stránky je formulár. Práve na formulároch sú celé Web Forms postavené. Atribút runat = "server" označuje, že sa HTML element spracováva na serveri, inak by ho ASP.NET ignorovalo a bralo by ho ako obyčajný HTML form.
Na začiatku dokumentu sa nachádza direktíva <%, ktorá je
akási hlavička pre serverovú časť webu. Určuje, ako má s dokumentom
ASP.NET zaobchádzať. Stránke sa nastavuje programovací jazyk (C #) a tzv.
CodeBehind, čo je podobne ako u formulárových aplikácií vo Windows Forms C#
kód, ktorý formulár obsluhuje. K nemu sa dostaneme za malý moment.
Príprava stránky
Vo Visual Studio sa prepneme do módu Design. To je grafický návrhár, cez ktorý môžeme jednoducho meniť obsah stránky a pridávať nové kontrolky. Príslušné tlačidlo nájdete v dolnej lište.
Na ľavej strane okna si otvoríme Toolbox, čo je panel nástrojov s kontrolkami.
Do divu pretiahneme Label.
Vrátime sa späť do kódu alebo sa môžete prepnúť do pohľadu Split, kedy uvidíte súčasne kód aj jeho grafickú podobu.
Do HTML kódu vyplníme titulok a nad formulár pridáme nadpis prvej úrovne s textom "Náhodné číslo".
Kód stránky Default.aspx bude teraz vyzerať 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 sa do formulára vložil nový Label, čo je kontrolka pre textový popis. Element má opäť atribút runat = "server". Labelu zmeníme ID z Label1 na cisloLabel.
Logika
Rovnako ako v desktopových aplikáciách budeme aj tu striktne oddeľovať prezentáciu a logiku. To znamená, že výpočty, práca s databázou a podobné úkony budú prehľadne umiestnené v samostatných triedach. Prezentácií sa naopak myslí tá časť aplikácie, ktorá komunikuje s užívateľom.
K projektu si pridajme novú triedu s názvom Generator as nasledujúcim obsahom:
public class Generator { private Random random = new Random(); public int VratCislo() { return random.Next(100); } }
Trieda nerobí nič iné, než že vracia náhodné číslo z privátnej inštancie triedy Random. Prakticky nemá takýto model veľký zmysel, pre nás je však dôležitý princíp a v budúcnosti budeme úplne rovnako vracať napr. Článok z databázy.
Code Behind
Máme teda hotovú prezentačné časť aplikácie, ktorú je HTML stránka s labelom. Ďalej máme logickú časť, ktorou je trieda s metódou, ktorá nám vráti náhodné číslo. To budeme chcieť vložiť do labelu.
Medzičlánkom, ktorý prepája prezentáciu a logiku, je práve Code Behind daného Web Formu. Do neho môžeme zo stránky prejsť pomocou pravého tlačidla a možnosti View Code. Prípadne si môžete nájsť súbor Default.aspx.cs v Solution Exploreri, stačí rozbaliť Web Form Default.aspx.
Obsah súboru je nasledovné (vynechal som menné priestory):
public partial class Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } }
ASP.NET Web Forms sú udalosťami riadené. Práve udalosť Page_Load sa vykoná ešte predtým, než ASP.NET začne načítať konkrétnu stránku. V metóde Load si vytvoríme inštancie nášho generátora a vygenerované číslo nastavíme do vlastnosti Text inštancie labelCislo. Práve pod labelCislo máme teraz prístupný náš label z formulára. Číslo musíme previesť najprv na string.
Generator generator = new Generator();
cisloLabel.Text = generator.VratCislo().ToString();
Aplikáciu spustíme.
Aplikácia naozaj pri každom príchode na stránku zobrazí label s náhodným číslom. Ako to teda celé funguje?
Princíp generovanie stránky
ASP.NET si naparsuje zdrojový kód stránky Default.aspx ako XML az jednotlivých elementov zostaví v pamäti stromovú štruktúru stránky. Za elementy s atribútom runat = "server" vytvorí inštancie objektov. Vtedy vzniká náš formulár a label. Potom je zavolaná metóda Page_Load (), ktorá nám umožňuje meniť vlastnosti jednotlivých objektov. Nakoniec sa z objektov v pamäti vygeneruje výsledná HTML stránka, v ktorom nie je po ASP.NET ani pamiatky.
Graficky by sme celú situáciu mohli znázorniť takto:
V budúcej lekcii, Obsluha formulárov v ASP.NET , vytvoríme jednoduchú kalkulačku a vysvetlíme si viac o tom, ako ASP.NET funguje vnútri. Zdrojové kódy dnešného projektu sú nižšie k stiahnutiu pre prípad, že by sa vám niečo nepodarilo, môžete si tak nájsť chybu. Bude tomu tak vo všetkých dieloch.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 441x (24.95 kB)
Aplikácia je vrátane zdrojových kódov v jazyku C#
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.