Použití Visual Studio 2013 k vytvoření základní ASP.NET 4.5 Web Forms Page

  • Článek

Erik Reitan

Pro vývoj nových webových aplikací doporučujeme Razor Pages. Další informace najdete v tématu Začínáme s Razor Pages.

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

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

  • Vytvoření systému souborů Web Forms projektu aplikace.
  • Seznamte se se sadou 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:

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

V této části návodu 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 Microsoft Visual Studio.

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

    Zobrazí se dialogové okno Nový projekt.

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

  4. V prostředním sloupci zvolte šablonu ASP.NET Webová aplikace .

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

  6. Dále vyberte šablonu Web Forms 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 vytvořené funkce založené na šabloně Web Forms. Poskytuje nejen stránku Home.aspx , stránku About.aspx , stránku Contact.aspx , ale obsahuje také členské funkce, které registrují uživatele a ukládají jejich přihlašovací údaje, aby se mohli přihlásit k vašemu webu. Když je vytvořena nová stránka, visual Studio ve výchozím nastavení zobrazí stránku v zobrazení Zdroj , kde můžete zobrazit prvky HTML stránky. Následující obrázek znázorňuje, co byste viděli v zobrazení Zdroj , kdybyste vytvořili novou webovou stránku s názvem BasicWebApp.aspx.
    Zobrazení zdroje

Prohlídka webového vývojového prostředí sady Visual Studio

Než budete pokračovat úpravou stránky, je vhodné se seznámit s vývojovým prostředím sady Visual Studio. Následující obrázek znázorňuje 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í umístění oken a oken. Nabídka Zobrazení umožňuje zobrazit další okna a změnit uspořádání a velikost oken tak, aby vyhovovala vašim preferencím. Pokud již byly provedeny změny v uspořádání okna, to, co vidíte, nebude odpovídat obrázku.

Prostředí sady Visual Studio

Prostředí sady Visual Studio

Seznámení s návrhářem webu

Prohlédněte si výše uvedený obrázek a přirovnáte text k následujícímu seznamu, který popisuje nejčastěji používaná okna a nástroje. (Tady nejsou uvedená všechna okna a nástroje, 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 dostupné jenom při práci v návrhovém zobrazení.
  • Průzkumník řešení okno. Zobrazí soubory a složky ve webové aplikaci.
  • Okno dokumentu. Zobrazí dokumenty, na které pracujete, v oknech na záložkách. 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ů.
  • Zobrazit karty. Prezentace s různými zobrazeními stejného dokumentu Návrhové zobrazení je plocha pro úpravy téměř WYSIWYG. Zobrazení zdroje je editor HTML pro stránku. Rozdělené zobrazení zobrazí návrhové i zdrojové zobrazení dokumentu. Později v tomto návodu budete 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í, klikněte v nabídce Nástroje na Možnosti, vyberte uzel Designer HTML a změňte možnost Úvodní stránky v.
  • ToolBox. Poskytuje ovládací prvky a prvky HTML, které můžete přetáhnout na stránku. Prvky sady nástrojů jsou seskupené podle společné funkce.
  • S erver Explorer. Zobrazí databázová připojení. Pokud se Průzkumník serveru nezobrazuje, klikněte v nabídce Zobrazit na Průzkumník serveru.

Vytvoření nové stránky ASP.NET Web Forms

Když vytvoříte novou aplikaci Web Forms pomocí šablony projektu ASP.NET Web Application, visual Studio přidá stránku ASP.NET (Web Forms stránku) 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 stránku Default.aspx . V tomto návodu ale vytvoříte novou stránku a budete s tím pracovat.

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

  1. Zavřete stránku Default.aspx . 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í klikněte pravým tlačítkem myši na název webové aplikace (v tomto kurzu je název aplikace BasicWebSite) a potom klikněte na Přidat ->Nová položka.
    Zobrazí se dialogové okno Přidat novou položku.
  3. Na levé straně vyberte skupinu Šablony Visual C# ->Web . Pak 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řidejte webovou stránku do projektu.
    Visual Studio vytvoří novou stránku a otevře ji.

Přidání HTML na stránku

V této části návodu přidáte na stránku 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 způsobem podobný 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 prvek div na stránce.

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

  3. Zadejte Welcome to Visual Web Developer a dvakrát stiskněte ENTER .

    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 .

    Kód HTML se zobrazí v zobrazení zdroje , které jste vytvořili při zadávání 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 je nejprve spustit.

Spuštění stránky

  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ěží stejně jako všechny stránky HTML.

    Pokud chcete stránku zobrazit v prohlížeči, můžete na ni kliknout pravým tlačítkem 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 serverové ovládací prvky. Serverové ovládací prvky, jako jsou tlačítka, popisky, textová pole a další známé ovládací prvky, poskytují typické možnosti zpracování formulářů pro vaše Web Forms stránky. Ovládací prvky však můžete programovat pomocí kódu, který běží na serveru, nikoli pomocí klienta.

Na stránku přidáte ovládací prvek Tlačítko , TextBox a Popisek a napíšete kód pro zpracování události Click ovládacího prvku 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 Vítá vás Visual Web Developer a stiskněte klávesu ENTER pětkrát nebo vícekrát, aby se uvolnilo místo v poli element div .

  3. V sadě nástrojů rozbalte skupinu Standardní , pokud ještě není rozbalená.
    Všimněte si, že možná budete muset rozbalit okno Panel nástrojů na levé straně, abyste ho mohli zobrazit.

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

  5. Přetáhněte ovládací prvek Button na stránku a přesuňte ho napravo 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í prvek Tlačítko .

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

    Tento statický text HTML je popis pro ovládací prvek TextBox. Na stejné stránce můžete kombinovat statické ovládací prvky HTML a serverové ovládací prvky. Následující obrázek znázorňuje zobrazení tří ovládacích prvků v návrhovém zobrazení.

    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 i zdrojovém zobrazení.

Nastavení vlastností ovládacího prvku

  1. Nejprve zobrazte okna Vlastnosti tak, že vyberete z nabídky Zobrazit ->Ostatní okna ->Vlastnosti Okno. Případně můžete vybrat F4 a zobrazit okno Vlastnosti .

  2. Vyberte ovládací prvek Tlačítko a pak 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 stránky, včetně prvků, které Visual Studio vytvořilo pro ovládací prvky serveru. Ovládací prvky jsou deklarovány pomocí syntaxe podobné html s tím rozdílem, že značky používají předponu asp: a obsahují atribut runat="server".

    Vlastnosti ovládacího prvku jsou deklarovány jako atributy. Když jste například nastavili vlastnost Text ovládacího prvku 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 předpona asp: pro značky ovládacích prvků označují ovládací prvky tak, aby byly zpracovány ASP.NET na serveru při spuštění stránky. Kód mimo elementy <runat="server"> a <script runat="server"> se do prohlížeče odešle beze změny, a proto musí být kód ASP.NET 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 ve <značce asp:Label> a stiskněte mezerník.

    Zobrazí se rozevírací seznam se seznamem dostupných vlastností, které můžete nastavit pro ovládací prvek Popisek . Tato funkce, označovaná jako IntelliSense, vám v zobrazení zdroje pomůže se syntaxí serverových ovládacích prvků, elementů HTML a dalších položek na stránce. Následující obrázek znázorňuje rozevírací seznam IntelliSense pro ovládací prvek Popisek .

    Atributy IntelliSense

  5. Vyberte ForeColor a zadejte rovnítko.

    IntelliSense zobrazí seznam barev.

    Poznámka

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

  6. Vyberte barvu textu ovládacího prvku Popisek . Nezapomeňte vybrat barvu, která je dostatečně tmavá, aby se přečetla na bílém pozadí.

    Atribut ForeColor je doplněn barvou, kterou jste vybrali, včetně uvozovek.

Programování ovládacího prvku Tlačítko

Pro účely tohoto návodu napíšete kód, který přečte název, který uživatel zadá do textového pole a pak ho zobrazí v ovládacím prvku Popisek .

Přidání výchozí obslužné rutiny události tlačítka

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

  2. Poklikejte na ovládací prvek Tlačítko .

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

    Poznámka

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

  3. Do obslužné rutiny události Button1_Click zadejte Label1 a tečku (.).

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

    IntelliSense v zobrazení kódu

  4. Dokončete obslužnou rutinu události Click pro tlačítko tak, aby bylo čteno tak, jak je znázorněno v následujícím 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í Zdrojové zobrazení kódu HTML tak, že kliknete pravým tlačítkem na FirstWebPage.aspx v Průzkumník řešení a vyberete Zobrazit revize.

  6. Posuňte se k elementu <asp:Button> . Všimněte si <, že element asp:Button> teď 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álostí mohou mít libovolný název; Název, který se zobrazí, 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 se musí shodovat s názvem metody definované v kódu na pozadí.

Spuštění stránky

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

Spuštění stránky

  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ý název se zobrazí v ovládacím prvku Popisek . Všimněte si, že po kliknutí na tlačítko se stránka odešle na webový server. ASP.NET pak stránku znovu vytvoří, spustí kód (v tomto případě se spustí obslužná rutina události Click ovládacího prvku Tlačítko) a odešle novou stránku do prohlížeče. Pokud v prohlížeči watch stavový řádek, uvidíte, že stránka provádí odezvu webového 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 Zobrazit zdroj.

    Ve zdrojovém kódu stránky se zobrazí kód HTML bez kódu serveru. Konkrétně se nezobrazují <elementy asp:> , se kterými jste pracovali v zobrazení zdroje . Při spuštění stránky ASP.NET zpracuje serverové ovládací prvky a vykreslí elementy HTML na stránku, které provádějí funkce představující ovládací prvek. Například <ovládací prvek asp:Button> se 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 prvku Kalendář , který zobrazuje kalendářní data po 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 serverových ovládacích prvků.

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

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

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

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

    Zobrazí se panel inteligentních značek kalendáře. Na panelu se zobrazují 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átování.

    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 Jednoduchý a potom klikněte na OK.

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

    Můžete vidět <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ý kód, který vidíte v zobrazení Zdroj , se může od obrázku mírně lišit.)

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

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 s kódem na pozadí s názvem FirstWebPage.aspx.cs.

  2. Dokončete obslužnou rutinu události 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

Teď můžete kalendář otestovat.

Spuštění stránky

  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, se zobrazí 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 vykreslen na stránku jako tabulka, přičemž každý den 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 Web Forms v sadě Visual Studio, můžete prozkoumat další funkce. Můžete například chtít provést následující akce: