Začínáme s ASP.NET

Tom FitzMacken

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

Poznámka:

WebMatrix se už nedoporučuje jako integrované vývojové prostředí pro ASP.NET webových stránek. Použijte Visual Studio nebo Visual Studio Code.

Tyto pokyny a aplikace poskytují přehled webových stránek ASP.NET (verze 2 nebo novější) a syntaxe Razor, což je zjednodušená architektura pro vytváření dynamických webů. Představuje také WebMatrix, což je nástroj pro vytváření stránek a webů.

Úroveň: Novinka ASP.NET webových stránek.
Předpokládá se dovednosti: HTML, základní šablony stylů CSS (Css).

Co se naučíte v prvním kurzu sady:

• K čemu ASP.NET technologie webových stránek slouží a k čemu slouží.
• Co je WebMatrix.
• Jak nainstalovat všechno.
• Vytvoření webu pomocí nástroje WebMatrix

Funkce a technologie probírané:

• Webová platforma Microsoft Instalační program.
• WebMatrix.
• Stránky .cshtml

Mike Pope původně napsal tento kurz. Tom FitzMacken ho aktualizoval pro Microsoft WebMatrix 3.

Verze softwaru používané v tomto kurzu

• ASP.NET webových stránek (Razor) 2
• WebMatrix 3

Co byste měli vědět?

Předpokládáme, že znáte:

• HTML. Nevyžaduje se žádné podrobné znalosti. Nebudeme vysvětlovat KÓD HTML, ale také nebudeme používat nic složitého. Poskytneme odkazy na kurzy HTML, kde si myslíme, že jsou užitečné.
• Šablony stylů CSS Stejné jako s HTML.
• Základní myšlenky databáze Pokud jste použili tabulku pro data a seřadili a vyfiltrovali data, je to úroveň odborných znalostí, které obecně předpokládáme pro tuto sadu kurzů.

Předpokládáme také, že se zajímáte o základní programování. ASP.NET webové stránky používají programovací jazyk s názvem C#. Nemusíte mít žádné zkušenosti s programováním, jen o to zájem. Pokud jste někdy předtím napsali javascript na webovou stránku, máte spoustu pozadí.

Všimněte si, že pokud jste obeznámeni s programováním, můžete zjistit, že tato sada kurzů se zpočátku pomalu přesouvá, zatímco jsme noví programátoři rychle. Když se ale dostaneme za několik prvních kurzů, bude k dispozici méně základní programování, které vysvětlíme a věci se budou pohybovat rychleji.

Co potřebujete?

Zde je seznam toho, co budete potřebovat:

• Počítač se systémem Windows 8, Windows 7, Windows Server 2008 nebo Windows Server 2012.
• Živé připojení k internetu.
• Oprávnění správce (vyžaduje se pro proces instalace).

Co jsou webové stránky ASP.NET?

ASP.NET webové stránky je architektura, kterou můžete použít k vytváření dynamických webových stránek. Jednoduchá webová stránka HTML je statická; jeho obsah je určen pevným kódem HTML, který je na stránce. Dynamické stránky, jako jsou ty, které vytvoříte pomocí ASP.NET webových stránek, umožňují vytvořit obsah stránky za běhu pomocí kódu.

Dynamické stránky umožňují provádět nejrůznější věci. Uživatele můžete požádat o zadání pomocí formuláře a potom změnit, co stránka zobrazuje nebo jak vypadá. Můžete získat informace od uživatele, uložit je do databáze a pak je zobrazit v seznamu později. Můžete posílat e-maily ze svého webu. Můžete pracovat s dalšími službami na webu (například mapovací službou) a vytvářet stránky, které integrují informace z těchto zdrojů.

Co je WebMatrix?

WebMatrix je nástroj, který integruje editor webových stránek, databázový nástroj, webový server pro testování stránek a funkce pro publikování webu na internetu. WebMatrix je zdarma a snadno se instaluje a snadno se používá. (Funguje také pro prosté stránky HTML a také pro jiné technologie, jako je PHP.)

WebMatrix ve skutečnosti nemusíte používat k práci s ASP.NET webovými stránkami. Stránky můžete vytvářet pomocí textového editoru, například pomocí testovacích stránek pomocí webového serveru, ke kterému máte přístup. WebMatrix ale vše velmi usnadňuje, takže tyto kurzy budou používat WebMatrix v celém prostředí.

O těchto kurzech

Tato sada kurzů představuje úvod k používání webových stránek ASP.NET. V této úvodní sadě kurzů je celkem 9 kurzů. Je součástí série výukových sad, které vás od ASP.NET webových stránek začínající na vytváření skutečných a profesionálně vypadajících webů.

Tento první kurz se zaměřuje na to, jak pracovat s webovými stránkami ASP.NET. Až budete hotovi, můžete pracovat s dalšími sadami kurzů, které vyberou místo, kde končí a které podrobněji prozkoumávají webové stránky.

Na podrobných vysvětleních se záměrně snadno podíváme. A kdykoli něco ukážeme, pro tuto sadu kurzů vždy zvolíme způsob, jakým si myslíme, že je nejjednodušší pochopit. Pozdější sady kurzů se více ponoří do hloubky a ukážou vám efektivnější nebo flexibilnější přístupy (také zábavnější). Tyto kurzy ale vyžadují, abyste nejprve porozuměli základům.

Sada kurzů, kterou jste právě začali používat, se zabývá těmito funkcemi webových stránek ASP.NET:

• Úvod a instalace všeho. (To je v kurzu, který čtete.)
• Základy programování webových stránek ASP.NET.
• Vytvoření databáze
• Vytvoření a zpracování uživatelského vstupního formuláře
• Přidání, aktualizace a odstranění dat v databázi

Co vytvoříte?

Tento kurz set a následné se točí kolem webu, kde můžete vypsat filmy, které se vám líbí. Budete moct zadat filmy, upravit je a zobrazit jejich seznam. Tady je několik stránek, které vytvoříte v této sadě kurzů. První zobrazí stránku s výpisem videa, kterou vytvoříte:

A tady je stránka, která umožňuje přidat na web nové informace o filmu:

Další sady kurzů vycházejí z této sady a přidávají další funkce, jako je nahrávání obrázků, přihlašování lidí, odesílání e-mailů a integrace se sociálními sítěmi.

Zobrazit tuto aplikaci spuštěnou v Azure

Chcete vidět dokončený web spuštěný jako živou webovou aplikaci? Úplnou verzi aplikace můžete nasadit do svého účtu Azure jednoduše kliknutím na následující tlačítko.

K nasazení tohoto řešení do Azure potřebujete účet Azure. Pokud ještě účet nemáte, máte následující možnosti:

• Otevřete bezplatný účet Azure – získáte kredity, které můžete použít k vyzkoušení placených služeb Azure, a dokonce i po jejich využití můžete účet zachovat a používat bezplatné služby Azure.
• Aktivace výhod předplatitele MSDN – Předplatné MSDN vám každý měsíc poskytuje kredity, které můžete použít pro placené služby Azure.

Instalace všeho

Všechno můžete nainstalovat pomocí instalačního programu webové platformy od Microsoftu. V důsledku toho instalační program nainstalujete a pak ho použijete k instalaci všeho ostatního.

Chcete-li použít webové stránky, musíte mít alespoň systém Windows XP s nainstalovanou aktualizací SP3 nebo Windows Server 2008 nebo novější.

Na stránce webové stránky webu ASP.NET klepněte na tlačítko Nainstalovat.

Před instalací aplikace WebMatrix se zobrazí výzva k přijetí licenčních podmínek a prohlášení o zásadách ochrany osobních údajů.

Kliknutím na Spustit spusťte instalaci. (Pokud chcete instalační program uložit, klikněte na Uložte a spusťte instalační program ze složky, do které jste ho uložili.)

Zobrazí se instalační program webové platformy připravený k instalaci Nástroje WebMatrix. Klikněte na Install (Nainstalovat).

Proces instalace zjistí, co je potřeba nainstalovat do počítače, a spustí proces. V závislosti na tom, co přesně je potřeba nainstalovat, může proces trvat od několika okamžiků do několika minut. Výběrem možnosti Přijmout přijměte licenční podmínky.

Dobrý den, WebMatrix

Po dokončení může proces instalace spustit Nástroj WebMatrix automaticky. Pokud ne, v systému Windows v nabídce Start spusťte aplikaci Microsoft WebMatrix.

Když webMatrix poprvé spustíte, máte možnost se přihlásit k Microsoft Azure pomocí svého účtu Microsoft. Přihlášením obdržíte 10 bezplatných webových aplikací prostřednictvím Azure. Tyto bezplatné webové aplikace poskytují pohodlný způsob, jak otestovat aplikace. Pokud ještě nemáte účet Azure, ale máte předplatné MSDN, můžete si aktivovat výhody předplatného MSDN. V opačném případě můžete během několika minut vytvořit bezplatný zkušební účet. Podrobnosti najdete v článku Bezplatná zkušební verze Azure.

Abyste mohli pokračovat v tomto kurzu, nemusíte se teď přihlašovat. Pokud se teď nepřihlásíte, budete mít možnost se přihlásit později. Poslední téma v této sérii kurzů popisuje, jak nasadit web do Azure. Proto byste se k dokončení tohoto tématu museli přihlásit.

V tomto okamžiku se přihlaste pomocí účtu Microsoft nebo vyberte v pravém dolním rohu možnost Není .

Začněte tím, že vytvoříte prázdný web a přidáte stránku. V pozdějším kurzu v této sadě budete hrát s jednou z předdefinovaných webových šablon.

V úvodním okně klikněte na Tlačítko Nový.

Šablony jsou předem připravené soubory a stránky pro různé typy webů. Pokud chcete zobrazit všechny šablony, které jsou ve výchozím nastavení dostupné, vyberte možnost Galerie šablon.

V okně Rychlý start vyberte ze skupiny ASP.NET prázdný web a pojmenujte nový web WebPagesMovies.

Klikněte na tlačítko Další.

Pokud jste se přihlásili ke svému účtu Microsoft, budete mít možnost vytvořit web v Azure. Na základě názvu webu se navrhne výchozí název WebPagesMovies.azurewebsites.net . Vykřičník ale značí, že tento název není ve Windows Azure dostupný. Pro zjednodušení vyberte Přeskočit a obejití vytváření webu v Azure. Později v této sérii publikujeme web do Azure.

WebMatrix vytvoří a otevře web:

Nahoře je panel nástrojů Rychlý přístup a pás karet. V levém dolním rohu se zobrazí selektor pracovního prostoru, ve kterém můžete přepínat mezi úkoly (Web, Soubory, Databáze, Sestavy). Vpravo je podokno obsahu pro editor a sestavy. A v dolní části se občas zobrazí oznamovací pruh pro zprávy.

Při procházení těchto kurzů se dozvíte více o Nástroji WebMatrix a jeho funkcích.

Vytvoření webové stránky

Abyste se seznámili s WebMatrixem a ASP.NET webovými stránkami, vytvoříte jednoduchou stránku.

V selektoru pracovního prostoru vyberte pracovní prostor Soubory . Tento pracovní prostor umožňuje pracovat se soubory a složkami. V levém podokně se zobrazuje struktura souborů vašeho webu. Pás karet se změní tak, aby zobrazoval úkoly související se soubory.

Na pásu karet klikněte na šipku pod položkou Nový a potom klikněte na Nový soubor.

WebMatrix zobrazí seznam typů souborů. Vyberte CSHTML a do pole Název zadejte "HelloWorld". Stránka CSHTML je stránka ASP.NET webových stránek.

Klikněte na OK.

WebMatrix vytvoří stránku a otevře ji v editoru.

Jak vidíte, stránka obsahuje většinou běžné kódy HTML s výjimkou bloku v horní části, který vypadá takto:

@{ 

}

To je pro přidání kódu, jak uvidíte krátce.

Všimněte si, že různé části stránky – názvy prvků, atributy a text, plus blok v horní části – jsou v různých barvách. Říká se tomu zvýrazňování syntaxe a usnadňuje zachování všeho jasného. Je to jedna z funkcí, které usnadňují práci s webovými stránkami v nástroji WebMatrix.

Přidejte obsah pro prvky <head> , <body> jako je v následujícím příkladu. (Pokud chcete, stačí zkopírovat následující blok a nahradit celou existující stránku tímto kódem.)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

Na panelu nástrojů Rychlý přístup nebo v nabídce Soubor klikněte na Uložit.

Testování stránky

V pracovním prostoru Soubory klikněte pravým tlačítkem myši na stránku HelloWorld.cshtml a potom klikněte na Spustit v prohlížeči.

WebMatrix spustí integrovaný webový server (IIS Express), který můžete použít k otestování stránek v počítači. (Bez služby IIS Express ve službě WebMatrix byste museli stránku publikovat na webový server někam předtím, než ji otestujete.) Stránka se zobrazí ve výchozím prohlížeči.

Všimněte si, že když testujete stránku ve službě WebMatrix, adresa URL v prohlížeči je něco jako http://localhost:33651/HelloWorld.cshtml. název localhost odkazuje na místní server, což znamená, že stránka je obsluhována webovým serverem, který je ve vašem počítači. Jak je uvedeno, WebMatrix obsahuje program webového serveru s názvem IIS Express, který se spustí při spuštění stránky.

Číslo za místním hostitelem (například localhost:33651) odkazuje na číslo portu ve vašem počítači. Toto je počet "kanálu", který služba IIS Express používá pro tento konkrétní web. Číslo portu je vybrané náhodně z rozsahu 1024 až 65536 při vytváření webu a pro každý web, který vytvoříte, se liší. (Při testování vlastního webu bude číslo portu téměř jistě jiné než 33561.) Pomocí jiného portu pro každý web může služba IIS Express udržovat přímou komunikaci s vašimi weby.

Později, když web publikujete na veřejný webový server, už se v adrese URL nezobrazí localhost . V tomto okamžiku uvidíte obvyklejší adresu URL, například http://myhostingsite/mywebsite/HelloWorld.cshtml nebo cokoli, co je stránka. Další informace o publikování webu se dozvíte později v této sérii kurzů.

Přidání kódu na straně serveru

Zavřete prohlížeč a vraťte se na stránku v nástroji WebMatrix.

Přidejte řádek do bloku kódu, aby vypadal jako následující kód:

@{
   var currentDateTime = DateTime.Now;
}

Toto je trochu kódu Razor. Je pravděpodobné, že získá aktuální datum a čas a vloží danou hodnotu do proměnné s názvem currentDateTime. Další informace o syntaxi Razor si přečtete v dalším kurzu.

Do textu stránky za <p>Hello World!</p> prvek přidejte následující:

<p>Right now it's @currentDateTime</p>

Tento kód získá hodnotu, kterou vložíte do currentDateTime proměnné v horní části, a vloží ji do kódu stránky. Znak @ označuje kód ASP.NET webových stránek na stránce.

Spusťte stránku znovu (WebMatrix uloží změny, než stránku spustí). Tentokrát se na stránce zobrazí datum a čas.

Chvíli počkejte a pak aktualizujte stránku v prohlížeči. Zobrazení data a času se aktualizuje.

V prohlížeči se podívejte na zdroj stránky. Bude vypadat jako následující kód:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Všimněte si, že @{ } blok nahoře tam není. Všimněte si také, že zobrazení data a času zobrazuje skutečný řetězec znaků (1/18/2012 2:49:50 PM nebo cokoli), ne @currentDateTime jako jste měli na stránce .cshtml . Co se stalo tady, je, že když jste spustili stránku, ASP.NET zpracoval veškerý kód (v tomto případě velmi málo), který byl označen @. Kód vytvoří výstup a tento výstup se vloží na stránku.

O tom se ASP.NET webových stránkách jedná.

Když si přečtete, že ASP.NET webové stránky vytváří dynamický webový obsah, co jste zde viděli, je myšlenka. Stránka, kterou jste právě vytvořili, obsahuje stejný kód HTML, který jste viděli dříve. Může také obsahovat kód, který může provádět nejrůznější úlohy. V tomto příkladu provedl triviální úkol získání aktuálního data a času. Jak jste viděli, můžete intersperse kód s HTML vytvořit výstup na stránce. Když někdo požádá o stránku .cshtml v prohlížeči, ASP.NET stránku zpracuje, zatímco je stále v rukou webového serveru. ASP.NET vloží výstup kódu (pokud existuje) na stránku jako HTML. Po dokončení zpracování kódu ASP.NET odešle výslednou stránku do prohlížeče. Veškerý prohlížeč, který někdy získá, je HTML. Tady je diagram:

Myšlenka je jednoduchá, ale existuje mnoho zajímavých úloh, které může kód provádět, a existuje mnoho zajímavých způsobů, kterými můžete dynamicky přidávat obsah HTML na stránku. A ASP.NET stránek .cshtml , stejně jako každá stránka HTML, může také obsahovat kód, který běží v samotném prohlížeči (JavaScript a jQuery kód). Všechny tyto věci prozkoumáte v této sadě kurzů a v dalších.

Připravujeme další

V dalším kurzu této série prozkoumáte ASP.NET programování webových stránek trochu více.

Další materiály

Vytvořte ASP.NET web úplně od začátku. Toto je kurz, který se týká použití nástroje WebMatrix (nikoli ASP.NET webových stránek). O některých dalších funkcích webMatrixu, které se v této sadě kurzů nezabýváme, se podrobněji seznámíme s některými dalšími funkcemi.

Další