1. díl - První webová aplikace v ASP.NET

C# .NET ASP.NET Web Forms První webová aplikace v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme si vysvětlili proč je dobrý nápad naší aplikaci naprogramovat jako webovou. Pokud čtete tento tutoriál, rozhodli jste se naučit technologii ASP.NET Web Forms.

Seriál předpokládá základní znalosti C# .NET a HTML, pokud něčemu nebudete rozumět, přečtěte si nejprve seriály 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. Tutoriály píši pro verzi 2013, rozhraní starších verzí se může trochu lišit, ale určitě nijak dramaticky, takže byste vše popisované měli nalézt.

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.

Nový ASP.NET projekt ve Visual Studio

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.

Prázdný ASP.NET MVC projekt ve Visual Studio

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.

Default Web Form v ASP.NET

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ě.

Grafický designer ve Visual Studio pro ASP.NET

Na levé straně okna si otevřeme Toolbox, což je panel nástrojů s kontrolkami.

ToolBox ve Visual Studio pro ASP.NET

Do divu přetáhneme Label.

Label v ASP.NET Web Forms

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.

Webová aplikace generující náhodné číslo v ASP.NET Web Forms

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:

Generování stránky v ASP.NET

Příště 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.


 

Stáhnout

Staženo 340x (24.95 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (8 hlasů) :
55555


 


Miniatura
Všechny články v sekci
ASP.NET Web Forms
Miniatura
Následující článek
Obsluha formulářů v ASP.NET

 

 

Komentáře

Avatar
lastp
Redaktor
Avatar
lastp:

U instance třídy Random ve třídě Generator by asi mělo být klíčové slovo static. Jinak když uživatel bude zobrazovat stránku velmi rychle za sebou (po milisekundách), bude dostávat po sobě několik stejných čísel.

 
Odpovědět 16.1.2014 21:28
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na lastp
David Čápka:

Se statikou bych byl v ASP.NET velmi opatrný, protože k těm atributům potom přistupují různá vlákna, což může vést k velkým problémům.

Odpovědět 28.2.2014 12:14
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
lastp
Redaktor
Avatar
lastp:

Vím o jednom webu, kde se třída Random používala ke generování hesel a programátor zapomněl na klíčové slovo static. Když v jednu chvíli navštívilo web více uživatelů najednou, všem bylo přiděleno stejné heslo. Bylo jen štěstí, že toho žádný hacker nevyužil. I nepatrná chyba může způsobit bezpečnostní díru a napáchat velké škody.
Souhlasím s tím, že při použití statických proměnných musí být člověk opatrný a všude zamykat (v C# můžete použít klíčové slovo lock). Pokud zapomenete zamknout, pak se vám to jednou vymstí. Méně navštěvované weby mohou i několik let fungovat bez problémů a pak to najednou celé spadne a nikdo neví proč.

 
Odpovědět  +1 2.3.2014 1:05
Avatar
himak
Člen
Avatar
himak:

Dakujem za lekciu. Velmi uzitocny zaciatok.

 
Odpovědět 2.3.2014 12:43
Avatar
vrsek.daniel
Člen
Avatar
vrsek.daniel:

Tak toto mi príde pohodlnejšie ako MVC a príde mi to aj o dosť zrozumiteľnejšie :) Páči sa mi to :D

 
Odpovědět 5.3.2014 14:04
Avatar
kowax
Člen
Avatar
kowax:

hezky napsané :)

 
Odpovědět 12.4.2014 23:05
Avatar
himak
Člen
Avatar
himak:

Super, dakujem za lekciu. Idem do druhej.

 
Odpovědět 16.9.2014 16:37
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.