Vytvoření stránky webových formulářů Basic ASP.NET 4.5 pomocí sady Visual Studio 2013

Erik Reitan

Pro vývoj nových webových aplikací doporučujeme Blazor.

Tento názorný postup obsahuje úvod do vývojového prostředí pro web v sadě Microsoft Visual Studio 2013 a v sadě Microsoft Visual Studio Express 2013 pro web. Tento názorný postup vás provede vytvořením jednoduché stránky ASP.NET webových formulářů a ilustruje základní techniky vytvoření nové stránky, přidání ovládacích prvků a psaní kódu.

Mezi úlohy znázorněné v tomto názorném postupu patří:

  • Vytvoření projektu aplikace systému souborů s webovými formuláři.
  • Seznamte se s Visual Studio
  • Vytvoření ASP.NET stránky
  • Přidání ovládacích prvků
  • Přidání obslužných rutin událostí
  • Spuštění a testování stránky ze sady Visual Studio

Požadavky

K dokončení tohoto návodu budete potřebovat:

  • Microsoft Visual Studio 2013 nebo Microsoft Visual Studio Express 2013 pro web Rozhraní .NET Framework se nainstaluje automaticky.

    Poznámka:

    Microsoft Visual Studio 2013 a Microsoft Visual Studio Express 2013 pro web se v této sérii kurzů často označují jako Visual Studio.

    Pokud používáte Visual Studio, tento návod předpokládá, že jste při prvním spuštění Visual Studio vybrali nastavení pro webový vývoj. Další informace naleznete v tématu Postupy: Výběr nastavení webového vývojového prostředí.

Vytvoření projektu webové aplikace a stránky

V této části názorného postupu vytvoříte projekt webové aplikace a přidáte do něj novou stránku. Přidáte také text HTML a spustíte stránku v prohlížeči.

Vytvoření projektu webové aplikace

  1. Otevřete aplikaci Microsoft Visual Studio.

  2. V nabídce Soubor vyberte Nový projekt.
    Nabídka Souboru

    Zobrazí se dialogové okno Nový projekt.

  3. Na levé straně vyberte skupinu Šablony ->Visual C# ->Web templates.

  4. V prostředním sloupci zvolte šablonu webové aplikace ASP.NET.

  5. Pojmenujte projekt BasicWebApp a klikněte na tlačítko OK.
    Dialogové okno Nový projekt

  6. Dále vyberte šablonu webových formulářů a kliknutím na tlačítko OK vytvořte projekt.
    Dialogové okno Nový projekt ASP.NET

    Visual Studio vytvoří nový projekt, který obsahuje předem připravené funkce založené na šabloně webových formulářů. Poskytuje vám nejen Home.aspx stránku, About.aspx stránku, Contact.aspx stránku, ale také funkce členství, které registrují uživatele a ukládají přihlašovací údaje, aby se mohli přihlásit k vašemu webu. Při vytvoření nové stránky se ve výchozím nastavení v sadě Visual Studio stránka zobrazí v Zdrojovém zobrazení, kde můžete vidět prvky HTML stránky. Následující obrázek ukazuje, co byste viděli v zobrazení Zdroj , pokud jste vytvořili novou webovou stránku s názvem BasicWebApp.aspx.
    Zobrazení zdroje

Prohlídka vývojového prostředí pro web v sadě Visual Studio

Než budete pokračovat úpravou stránky, je užitečné se seznámit s vývojovým prostředím sady Visual Studio. Následující obrázek ukazuje okna a nástroje, které jsou k dispozici v sadě Visual Studio a Visual Studio Express pro web.

Poznámka:

Tento diagram znázorňuje výchozí okna a umístění oken. Nabídka Zobrazení umožňuje zobrazit další okna a změnit uspořádání a změnit velikost oken tak, aby vyhovovala vašim preferencím. Pokud už v uspořádání okna došlo ke změnám, nebude se shodovat s obrázkem.

Prostředí sady Visual Studio

Visual Studio Environment

Seznámení s webovým návrhářem

Prohlédněte si výše uvedený obrázek a shodujte text s následujícím seznamem, který popisuje nejčastěji používané okna a nástroje. (Tady nejsou uvedená všechna okna a nástroje, které vidíte, jenom ty, které jsou označené na předchozím obrázku.)

  • Panely nástrojů Zadejte příkazy pro formátování textu, hledání textu atd. Některé panely nástrojů jsou k dispozici pouze při práci v návrhovém zobrazení.
  • Okno Průzkumníka řešení Zobrazí soubory a složky ve webové aplikaci.
  • Okno dokumentu Zobrazí dokumenty, na které pracujete v oknech s kartami. Mezi dokumenty můžete přepínat kliknutím na karty.
  • Okno Vlastnosti . Umožňuje změnit nastavení stránky, elementů HTML, ovládacích prvků a dalších objektů.
  • Prohlížení karet. Ukázat vám různá zobrazení stejného dokumentu Návrhové zobrazení je editační plocha, která je téměř stejně jako WYSIWYG. Zdrojové zobrazení je editor HTML stránky. Rozdělené zobrazení zobrazuje návrhové i zdrojové zobrazení dokumentu. V tomto návodu budete později pracovat se zobrazeními Návrh a Zdroj. Pokud dáváte přednost otevření webových stránek v návrhovém zobrazení, v nabídce Nástroje klikněte na Možnosti, vyberte uzel Návrhář HTML a změňte možnost Úvodní stránky v.
  • ToolBox. Poskytuje ovládací prvky a prvky HTML, které lze přetáhnout na stránku. Prvky panelu nástrojů jsou seskupené podle společné funkce.
  • S erver Explorer. Zobrazí připojení k databázi. Pokud Průzkumník serveru není viditelný, v nabídce Zobrazení klikněte na Průzkumníka serveru.

Vytvoření nové stránky webových formulářů ASP.NET

Když vytvoříte novou aplikaci Webové formuláře pomocí šablony projektu webové aplikace ASP.NET, Visual Studio přidá ASP.NET stránku (stránku webových formulářů) s názvem Default.aspx a také několik dalších souborů a složek. Jako domovskou stránku webové aplikace můžete použít Default.aspx stránku. V tomto názorném postupu ale vytvoříte novou stránku a budete s ní pracovat.

Přidání stránky do webové aplikace

  1. Zavřete Default.aspx stránku. Uděláte to tak, že kliknete na kartu s názvem souboru a potom kliknete na možnost Zavřít.
  2. V Průzkumník řešení klepněte pravým tlačítkem myši na název webové aplikace (v tomto kurzu název aplikace je BasicWebSite) a potom klepněte na tlačítko Přidat ->Nová položka.
    Zobrazí se dialogové okno Přidat novou položku .
  3. Na levé straně vyberte skupinu šablon Visual C# ->Web. Potom v prostředním seznamu vyberte webový formulář a pojmenujte ho FirstWebPage.aspx.
    Dialogové okno Přidat novou položku
  4. Kliknutím na Přidat přidáte webovou stránku do projektu.
    Visual Studio vytvoří novou stránku a otevře ji.

Přidání KÓDU HTML na stránku

V této části návodu přidáte na stránku nějaký statický text.

Přidání textu na stránku

  1. V dolní části okna dokumentu klikněte na kartu Návrh a přepněte do návrhového zobrazení.

    Návrhové zobrazení zobrazuje aktuální stránku ve stylu WYSIWYG. V tomto okamžiku nemáte na stránce žádný text ani ovládací prvky, takže stránka je prázdná s výjimkou přerušované čáry, která znázorňuje obdélník. Tento obdélník představuje element div na stránce.

  2. Klikněte na obdélník, který je ohraničený přerušovanou čárou.

  3. Zadejte welcome to Visual Web Developer a stiskněte enter dvakrát.

    Následující obrázek znázorňuje text, který jste zadali v návrhovém zobrazení.

    Uvítací text v návrhovém zobrazení

  4. Přepněte do zobrazení zdroj.

    HTML můžete zobrazit v zobrazení Zdroj, které jste vytvořili, když jste psali v návrhovém zobrazení.
    Webová stránka se statickým textem

Spuštění stránky

Než budete pokračovat přidáním ovládacích prvků na stránku, můžete ho napřed spustit.

Spustit stránku

  1. V Průzkumník řešení klikněte pravým tlačítkem na FirstWebPage.aspx a vyberte Nastavit jako úvodní stránku.

  2. Stisknutím kombinace kláves CTRL+F5 stránku spusťte.

    Stránka se zobrazí v prohlížeči. I když stránka, kterou jste vytvořili, má příponu názvu souboru .aspx, v současné době běží jako jakákoli stránka HTML.

    Pokud chcete zobrazit stránku v prohlížeči, můžete také kliknout pravým tlačítkem myši na stránku v Průzkumník řešení a vybrat Zobrazit v prohlížeči.

  3. Zavřete prohlížeč a zastavte webovou aplikaci.

Přidávání a programování ovládacích prvků

Teď na stránku přidáte ovládací prvky serveru. Ovládací prvky serveru, jako jsou tlačítka, popisky, textová pole a další známé ovládací prvky, poskytují typické možnosti zpracování formulářů pro stránky webových formulářů. Ovládací prvky ale můžete programovat pomocí kódu, který běží na serveru, a ne klienta.

Na stránku přidáte ovládací prvek Tlačítko , ovládací prvek TextBox a popisek a napíšete kód pro zpracování události Kliknutí pro ovládací prvek Tlačítko .

Přidání ovládacích prvků na stránku

  1. Kliknutím na kartu Návrh přepněte do návrhového zobrazení.

  2. Umístěte kurzor na konec textu Welcome to Visual Web Developer a stiskněte klávesu ENTER pět nebo vícekrát, abyste v poli elementu div vytvořili místo.

  3. Rozbalte skupinu Standard v Panelu nástrojů, pokud ještě není rozbalená.
    Všimněte si, že možná budete muset okno panelu nástrojů na levé straně rozbalit, abyste ho mohli zobrazit.

  4. Přetáhněte ovládací prvek TextBox na stránku a umístěte ho do středu pole prvku div, který má Vítá vás Visual Web Developer na prvním řádku.

  5. Přetáhněte ovládací prvek Button na stránku a přesuňte ho vpravo od ovládacího prvku TextBox.

  6. Přetáhněte ovládací prvek Popisek na stránku a umístěte ho na samostatný řádek pod ovládacím tlačítkem.

  7. Umístěte kurzor nad ovládací prvek TextBox a zadejte své jméno: .

    Tento statický text HTML je titulek ovládacího prvku TextBox . Statické ovládací prvky HTML a serveru můžete kombinovat na stejné stránce. Následující obrázek ukazuje, jak se v návrhovém zobrazení zobrazují tři ovládací prvky.

    Tři ovládací prvky v návrhovém zobrazení

Nastavení vlastností ovládacího prvku

Visual Studio nabízí různé způsoby nastavení vlastností ovládacích prvků na stránce. V této části návodu nastavíte vlastnosti v návrhovém zobrazení i ve zdrojovém zobrazení.

Nastavení vlastností ovládacího prvku

  1. Nejprve zobrazte okno Vlastnosti tak, že vyberete z nabídky Zobrazení ->Další Okna ->Okno Vlastnosti. Můžete také vybrat klávesu F4 a zobrazit okno Vlastnosti.

  2. Vyberte ovládací prvek Tlačítko a potom v okně Vlastnosti nastavte hodnotu Text na Zobrazovaný název. Zadaný text se zobrazí na tlačítku v návrháři, jak je znázorněno na následujícím obrázku.

    Nastavit text tlačítka

  3. Přepněte do zobrazení zdroj.

    Zobrazení zdroje zobrazí kód HTML pro stránku, včetně prvků, které Sada Visual Studio vytvořila pro ovládací prvky serveru. Ovládací prvky se deklarují pomocí syntaxe podobné html, s tím rozdílem, že značky používají předponu asp: a zahrnují atribut runat="server".

    Vlastnosti ovládacího prvku jsou deklarovány jako atributy. Když například nastavíte vlastnost Text pro ovládací prvek Tlačítko , v kroku 1 jste ve skutečnosti nastavili atribut Text v kódu ovládacího prvku.

    Poznámka:

    Všechny ovládací prvky jsou uvnitř elementu formuláře , který má také atribut runat="server". Atribut runat="server" a asp: předpona pro značky ovládacího prvku označí ovládací prvky tak, aby byly zpracovány ASP.NET na serveru při spuštění stránky. Kód mimo elementy <form runat="server"> a <script runat="server"> se odesílá do prohlížeče beze změny, což je důvod, proč kód ASP.NET musí být uvnitř elementu, jehož počáteční značka obsahuje atribut runat="server".

  4. V dalším kroku přidáte do ovládacího prvku Popisek další vlastnost. Umístěte kurzor přímo za asp:Label do značky <asp:Label> a stiskněte MEZERNÍK.

    Zobrazí se rozevírací seznam s dostupnými vlastnostmi, které lze nastavit pro ovládací prvek Label. Tato funkce označovaná jako IntelliSense vám pomůže v zobrazení Zdroj se syntaxí serverových ovládacích prvků, elementů HTML a dalších položek na stránce. Tento obrázek znázorňuje rozevírací seznam IntelliSense pro ovládací prvek Label.

    Atributy IntelliSense

  5. Vyberte ForeColor a napište znak rovnítka.

    IntelliSense zobrazí seznam barev.

    Poznámka:

    Rozevírací seznam IntelliSense můžete kdykoli zobrazit stisknutím kombinace kláves CTRL+J při prohlížení kódu.

  6. Vyberte barvu textu ovládacího prvku Popisek. Ujistěte se, že jste vybrali barvu, která je dostatečně tmavá, aby se četla na bílém pozadí.

    Atribut ForeColor je dokončen barvou, kterou jste vybrali, včetně uzavírací uvozovky.

Programování ovládacího prvku Button

V tomto názorném postupu napíšete kód, který přečte jméno, které uživatel zadá do textového pole, a pak zobrazí jméno v ovládacím prvku Popisek.

Přidejte výchozí obslužnou rutinu pro událost tlačítka

  1. Přepněte do návrhového zobrazení.

  2. Dvakrát klikněte na Tlačítko.

    Ve výchozím nastavení Visual Studio přepne do souboru s kódem na pozadí a vytvoří základní obslužnou rutinu události pro výchozí událost ovládacího prvku Tlačítko, což je událost Click. Soubor kódu za kódem odděluje kód uživatelského rozhraní (například HTML) od kódu serveru (například C#).
    Kurzor se umístí do přidaného kódu pro tuto obslužnou rutinu události.

    Poznámka:

    Poklikání na ovládací prvek v návrhovém zobrazení je jedním z několika způsobů, jak můžete vytvářet obslužné rutiny událostí.

  3. Uvnitř obslužné metody Button1_Click zadejte Popisek1 následovaný tečkou (.).

    Pokud zadáte tečku za ID popisku (Label1), Visual Studio zobrazí seznam dostupných členů pro ovládací prvek Label, jak je znázorněno na následujícím obrázku. Člen je obvykle vlastnost, metoda nebo událost.

    IntelliSense v zobrazení kódu

  4. Dokončete obslužnou rutinu pro událost Click tlačítka tak, aby odpovídala následujícímu příkladu kódu.

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
}

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. Přepněte zpět do zobrazení zdroj vašeho kódu HTML tak, že kliknete pravým tlačítkem na FirstWebPage.aspx v Průzkumníku řešení a vyberete Zobrazit značkování.

  6. Posuňte se k elementu <asp:Button> . Všimněte si, že prvek <asp:Button> nyní má atribut onclick="Button1_Click".

    Tento atribut vytvoří vazbu události Click tlačítka na metodu obslužné rutiny, kterou jste naprogramovali v předchozím kroku.

    Metody obslužné rutiny události mohou mít libovolný název; název, který vidíte, je výchozí název vytvořený sadou Visual Studio. Důležitým bodem je, že název použitý pro atribut OnClick v HTML musí odpovídat názvu metody definované v kódu za kódem.

Spuštění stránky

Teď můžete otestovat ovládací prvky serveru na stránce.

Spustit stránku

  1. Stisknutím kombinace kláves CTRL+F5 spusťte stránku v prohlížeči. Pokud dojde k chybě, znovu zkontrolujte výše uvedené kroky.

  2. Do textového pole zadejte název a klikněte na tlačítko Zobrazovaný název .

    Zadané jméno se zobrazí v ovládacím prvku typu Popisek. Všimněte si, že když kliknete na tlačítko, stránka se publikuje na webový server. ASP.NET pak znovu vytvoří stránku, spustí váš kód (v tomto případě se spustí obslužná rutina události Click ovládacího prvku Button) a poté odešle novou stránku do prohlížeče. Pokud se díváte na stavový řádek v prohlížeči, uvidíte, že stránka podniká cestu tam a zpět k webovému serveru pokaždé, když kliknete na tlačítko.

  3. V prohlížeči zobrazte zdroj stránky, kterou používáte, tak, že kliknete pravým tlačítkem na stránku a vyberete Zdroj zobrazení.

    Ve zdrojovém kódu stránky se zobrazí kód HTML bez kódu serveru. Konkrétně nevidíte <asp: prvky, se kterými jste pracovali v Zobrazení zdroj. Když se stránka spustí, ASP.NET zpracuje ovládací prvky serveru a vykresluje prvky HTML na stránku, která provádí funkce představující ovládací prvek. Například se ovládací prvek <asp:Button> vykreslí jako element HTML <input type="submit">.

  4. Zavřete prohlížeč.

Práce s dalšími ovládacími prvky

V této části návodu budete pracovat s ovládacím prvkem Kalendář, který zobrazuje data po jednom měsíci. Ovládací prvek Kalendář je složitější ovládací prvek než tlačítko, textové pole a popisek, se kterými jste pracovali, a ilustruje některé další možnosti ovládacích prvků serveru.

V této části přidáte na stránku ovládací prvek System.Web.UI.WebControls.Calendar a naformátujete jej.

Přidání ovládacího prvku Kalendář

  1. V sadě Visual Studio přepněte do návrhového zobrazení.

  2. V části Standard panelu nástrojů přetáhněte Kalendářový ovládací prvek na stránku a umístěte jej pod div prvek, který obsahuje ostatní ovládací prvky.

    Zobrazí se panel inteligentních značek kalendáře. Na panelu se zobrazí příkazy, které usnadňují provádění nejběžnějších úloh pro vybraný ovládací prvek. Následující obrázek znázorňuje ovládací prvek Kalendář vykreslený v návrhovém zobrazení.

    Ovládací prvek Kalendář v návrhovém zobrazení

  3. Na panelu inteligentních značek zvolte Automatický formát.

    Zobrazí se dialogové okno Automatické formátování , které umožňuje vybrat schéma formátování kalendáře. Následující obrázek znázorňuje dialogové okno Automatické formátování ovládacího prvku Kalendář.

    Dialogové okno Automatické formátování (ovládací prvek Kalendář)

  4. V seznamu Vybrat schéma vyberte Možnost Jednoduché a klepněte na tlačítko OK.

  5. Přepněte do zobrazení zdroj.

    Zobrazí se <element asp:Calendar> . Tento prvek je mnohem delší než prvky pro jednoduché ovládací prvky, které jste vytvořili dříve. Obsahuje také dílčí prvky, například <WeekEndDayStyle>, které představují různá nastavení formátování. Následující obrázek znázorňuje ovládací prvek Kalendář v zobrazení Zdroj . (Přesné označení, které vidíte v Zobrazení zdroje se může mírně lišit od obrázku.)

    Ovládací prvek Kalendář v zobrazení Zdroj

Programování ovládacího prvku Kalendář

V této části naprogramujete ovládací prvek Kalendář tak, aby zobrazoval aktuálně vybrané datum.

Programování ovládacího prvku Kalendář

  1. V návrhovém zobrazení poklikejte na ovládací prvek Kalendář .

    Vytvoří se nová obslužná rutina události a zobrazí se v souboru kódu za rozhraním s názvem FirstWebPage.aspx.cs.

  2. Dokončete obslužný kód pro událost SelectionChanged následujícím kódem.

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

    Výše uvedený kód nastaví text ovládacího prvku popisku na vybrané datum ovládacího prvku kalendáře.

Spuštění stránky

Kalendář teď můžete otestovat.

Spustit stránku

  1. Stisknutím kombinace kláves CTRL+F5 spusťte stránku v prohlížeči.

  2. Klikněte na datum v kalendáři.

    Datum, na které jste klikli, bude zobrazeno v ovládacím prvku Popisek.

  3. V prohlížeči zobrazte zdrojový kód stránky.

    Všimněte si, že ovládací prvek Kalendář byl zobrazen na stránce jako tabulka, přičemž každý den je zobrazen jako prvek td.

  4. Zavřete prohlížeč.

Další kroky

Tento názorný postup znázorňuje základní funkce návrháře stránek sady Visual Studio. Teď, když rozumíte tomu, jak vytvořit a upravit stránku webových formulářů v sadě Visual Studio, můžete prozkoumat další funkce. Můžete například chtít provést následující:

  • Last updated on