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.

Nový ASP.NET projekt vo Visual Studio - ASP.NET Web Forms

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.

Prázdny ASP.NET MVC projekt vo Visual Studio - ASP.NET Web Forms

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.

Default Web Form v ASP.NET - ASP.NET Web Forms

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.

Grafický designer vo Visual Studio pre ASP.NET - ASP.NET Web Forms

Na ľavej strane okna si otvoríme Toolbox, čo je panel nástrojov s kontrolkami.

ToolBox vo Visual Studio pre ASP.NET - ASP.NET Web Forms

Do divu pretiahneme Label.

Label v ASP.NET Web Forms - ASP.NET Web Forms

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.

Webová aplikácia generujúce náhodné číslo v ASP.NET Web Forms - ASP.NET Web Forms

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:

Generovanie stránky v ASP.NET - ASP.NET Web Forms

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#

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity