Jerry's Log

ASP.net web - lekce 1: Motivační formulář

27. března 2008 8:09
výuka, semináře

Dnes ráno jsem začal vyučovat nový dobrovolný seminář, který se zabývá programováním na webu – práci s formuláři a aktivními prvky internetových stránek. Svým žákům jsem slíbil, že materiály budu zveřejňovat na webu, tak se třeba budou hodit i vám.

Seminář ve škole probíhá každý čtvrtek od 7.00 do 7.45 a je otevřený všem žákům ZŠ Vrchlického v Liberci a mohou tedy přijít a kdykoliv se zapojit. Jednotlivé lekce jsou pouze hodinové a řešené příklady tedy budou krátké a snad i dostatečně názorné.

Důležité je zmínit, že momentálně stránky tvoříme s pomocí Microsoft Visual Studia 2005 a píšeme je za využití ASP.net 2.0, ale velmi brzy (po nějakých komplexnějších úpravách na síti školy) budeme používat Visual Web Developer 2008 Express a tedy i ASP.net 3.5 a to včetně ASP.net AJAX.

Otevření Visual Studia a založení webového projektu

Naši první lekci dnes začneme spuštěním Visual Studia (případně Visual Web Developeru), které naleznete po instalaci někde v menu Start. Pozor, první spuštění trvá o něco déle…

Jakmile je před vámi již spuštěné prostředí Visual Studia, založíme nový webový projekt kliknutím na položku v menu: File > New Web Site… Otevře se okno, ve kterém můžete zvolit typ projektu a jeho vlastnosti. My budeme všechny projekty psát za pomocí jazyka Visual Basic .net a budeme je tvořit klasicky v souborech na našem disku C:

Důležité je zvolit jako typ projektu ASP.NET Web Site, nechat vybraná nastavení dle obrázku a určit název adresáře, do kterého se má webový projekt uložit.

Webový projekt se otevře rovnou i s vytvořenou základní internetovou stránkou Default.aspx, kterou ihned můžeme začít editovat a připraveným konfiguračním souborem web.config. Všechny soubory, které máme ve webovém projektu, nalezneme v okně Solution Explorer, kterou naleznete ve standardním rozložení v pravém horním rohu Visual Studia. Důležité je si všimnout, že internetové stránky, které budeme tvořit v ASP.net mají příponu .aspx a navíc k nim je přiřazen i druhý soubor se stejným názvem rozšířeným o příponu .vb (Visual Basic) nebo .cs (v případě jazyku C#). Do souboru ASPX píšeme přímo (X)HTML kód případně doplněný o speciální objekty ASP.net a do souboru VB píšeme program ve Visual Basicu, který zajišťuje námi požadovanou funkci internetové aplikace.

Vytvoření jednoduchého formuláře

Nyní si konečně vyzkoušíme jak lze do stránky vložit formulářové prvky ASP.net. Naše aplikace bude obsahovat jedno textové pole, tlačítko a místo, do kterého budeme moci programem zapisovat text.

Pokud chcete na stránku vložit jakýkoliv objekt, stačí jej najít na liště Toolbox (standardně je umístěn na levé straně VS) a následně přetáhnout pomocí myši přímo do stránky (a to lze jak do stránky, na kterou nahlížíte v režimu design i stránky zobrazené v režimu zdrojový kód). Tímto způsobem do stránky vložte objekty TextBox (textové pole), Button (tlačítko) a Label (pole pro textové popisky). Jedinou podmínkou je, že všechny ASP.net objekty musí být vloženy dovnitř do značky <form runat="server"></form>. Navíc stránku (například v režimu zdrojového kódu) doplňte o další (X)HTML značky například nadpisu stránky,…

Nastavení vlastností

U každého objektu ASP.net můžete nastavovat vlastnosti. K vlastnostem každého objektu se dostanem tak, že na něj jednou klikneme (tedy pouze ho vybereme) a pak všechny vlastnosti tohoto objektu uvidíme v okně Properties, které standardně nalezneme vpravo dole ve VS.

Tou základní vlastností je název – ID – každého objektu, který slouží k jednoznačné identifikaci každého objektu na stránce při programování funkčnosti webové stránky. Je tedy logické, že ve stránce nesmí být žádné dva objekty se stejným ID. Navíc je potřeba, aby ID nezačínalo číslicí a nesmí obsahovat žádné mezery. Navíc doporučuji nepoužívat české znaky s háčky a čárkami. Osobně jsem si navíc navykl na to, že do názvu na začátku použiji zhruba 3 znaky na zkratku, která označí o jaký typ objektu jde (např. txt pro TextBox, btn pro Button,…) a následně doplním samotný název objektu dle jeho významu začínající velkým písmenem.

Další velmi používanou vlastností, kterou má velká skupina objektů a my ji dnes také využijeme, je Text. V této vlastnosti jsou uchovávány texty, které se na objektu nějak zobrazují. Může jít například o popisku tlačítka, text zobrazený nebo aktuálně uživatelem zapisovaný do textového pole,…

Výsledný kód (X)HTML stránky

Nyní tedy můžeme upravit názvy a texty jednotlivých objektů. A přímo do stránky doplnit texty a nadpisy. Když se pak podíváme do zdrojového kódu stránky, měli bychom získat přibližně takovýto (X)HTML kód:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Můj první formulář v ASP.net</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Můj první formulář</h1>
        <p>
            Zadejte své jméno:
            <asp:TextBox ID="txtJmeno" runat="server"></asp:TextBox>
            <asp:Button ID="btnOdeslat" runat="server" Text="Odeslat formulář..." />
        </p>
        <p>
            <asp:Label ID="lblVypis" runat="server" Text="Zde bude text"></asp:Label>
        </p>
    </div>
    </form>
</body>
</html>

Naprogramování funkce webové stránky

Teď konečně do stránky doplníme i její funkčnost. Od aplikace budeme očekávat, že když uživatel zadá do textového pole jméno a následně klikne na tlačítko „Odeslat formulář…“, zadané jméno se zobrazí v popisce (Labelu) pod celým formulářem.

Pokud chceme napsat nějaký program, který se má vykonat při kliknutí na tlačítko, stačí ve Visual Studiu v designu poklepat (dvojklikem) na požadované tlačítko „Odeslat formulář…“. Tím se dostanete do souboru se zdrojovým kódem zapsaným ve Visual Basicu. Visual Studio za vás samo vytvoří potřebnou hlavičku procedury a vy se tak můžete postarat jen o dopsání programu, který zajistí požadovanou funkci.

Zapíšeme tedy program

lblVypis.Text = txtJmeno.Text

To zajistí, že do Labelu lblVypis, do jeho vlastnosti Text se vloží aktuální hodnota Textu zadaného do TextBoxu txtJmeno.

Rozšíříme aplikaci o oslovení

Aby byla webová aplikace zajímavější, doplníme ji tak, že po zadání jména a kliknutí na tlačítko se zobrazí text Ahoj Zadané jméno, moc mě těší….

Musíme tedy program doplnit o přičtení potřebných textů před jméno a za jméno. Texty se zapisují do uvozovek a sčítají pomocí znaku &. Původní řádek tedy přepíšeme na:

lblVypis.Text = "Ahoj " & txtJmeno.Text & ", moc mě těší..."

Celý kód aplikace

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub btnOdeslat_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOdeslat.Click
        lblVypis.Text = "Ahoj " & txtJmeno.Text & ", moc mě těší..."
    End Sub
End Class

Spuštění webové aplikace

Narozdíl od jednoduché (X)HTML stránky se nemůžeme přímo v internetovém prohlížeči podívat na soubor stránky, ale musíme spustit celou webovou aplikaci.

Spuštění webové aplikace provedeme stisknutím klávesy F5. Při prvním spuštění budete dotázáni, zda chcete povolit krokování programu (tzv. debugging) webové aplikace v době testování.

Zvolíme, že chceme povolit debugging a během chvíle se nám již otevře internetový prohlížeč a v něm naše funkční stránka.

Tím se nám dnes podařilo vytvořit naši první ASP.net stránku s úplně jednoduchým formulářem. Pokud máte nějaké dotazy či připomínky, napište je do komentářů pod článek a já se pokusím co nejrychleji odpovědět.

autor: jerrysohn | rss kanál komentářů