1 – Začínáme se sadou WebMatrix a webovými stránkami ASP.NET

 
 

 

Tato kapitola přináší představení sady Microsoft WebMatrix, bezplatné technologie pro vývoj webů, která webovým vývojářům poskytuje nejlepší možné prostředí na světě.

Co se naučíte

 

 

Co je WebMatrix?

WebMatrix je bezplatná, nenáročná sada nástrojů pro vývoj webových řešení umožňující nejsnazší způsob vytváření webů. Zahrnuje webový server pro vývoj IIS Express, webové rozhraní ASP.NET a integrovanou databázi SQL Server Compact. Její součástí je také jednoduchý nástroj, který zjednodušuje vývoj webů a usnadňuje vytváření webů z oblíbených aplikací Open Source. Dovednosti a kód, který získáte při vývoji pomocí sady WebMatrix, lze bez problémů přenést do prostředí produktů Visual Studio a SQL Server.

Pomocí sady WebMatrix můžete vytvářet dynamické stránky, tedy stránky, které mohou měnit svůj obsah nebo styl na základě vstupu uživatele nebo jiných informací, například informací uložených v databázi. Při programování dynamických webových stránek budete používat technologii ASP.NET se syntaxí Razor a programovací jazyky C# nebo Visual Basic.

Pokud už máte své oblíbené programovací nástroje, můžete vyzkoušet nástroje sady WebMatrix, ale také můžete při vytváření webů využívajících technologii ASP.NET používat své vlastní nástroje.

V této kapitole se dozvíte, jak snadno začít vytvářet weby a dynamické webové stránky pomocí sady WebMatrix.

Instalace sady WebMatrix

Pro instalaci sady WebMatrix můžete použít nástroj Web Platform Installer společnosti Microsoft. Jedná se o bezplatnou aplikaci, která usnadňuje instalaci a konfiguraci s webem souvisejících technologií.

  1. Pokud nástroj Web Platform Installer ještě nemáte, stáhněte si jej z následující adresy URL:

    http://go.microsoft.com/fwlink/?LinkID=205867

  2. Spusťte nástroj Web Platform Installer, vyberte položku Spotlight (V centru pozornosti) a poté kliknutím na tlačítko Add (Přidat) spusťte instalaci sady WebMatrix.

    ch01_learnweb-1

    Poznámka   Pokud jste již nainstalovali beta verzi sady WebMatrix, nástroj Web Platform Installer provede upgrade instalace na verzi WebMatrix 1.0. Weby vytvořené pomocí předchozích beta verzí se při prvním spuštění prostředí WebMatrix nemusí zobrazit v seznamu My Sites (Mé weby). Pokud chcete otevřít dříve vytvořený web, klikněte na ikonu Site From Folder (Web ze složky), přejděte na požadovaný web a otevřete jej. Při příštím spuštění prostředí WebMatrix tento web již v seznamu My Sites (Mé weby) bude zobrazen.

Začínáme se sadou WebMatrix

Začneme tím, že vytvoříme nový web a jednoduchou webovou stránku.

  1. Spusťte prostředí WebMatrix.

    ch01_learnweb-2

  2. Klikněte na položku Site From Template (Web ze šablony). šablony obsahují předem sestavené soubory a stránky pro různé typy webů.

    ch01_learnweb-3

  3. Vyberte položku Empty Site (Prázdný web) a nový web pojmenujte Hello World.
  4. Klikněte na tlačítko OK. WebMatrix vytvoří a otevře nový web.

    V horní části obrazovky najdete panel nástrojů Rychlý přístup a pás karet, stejně jako v aplikacích systému Microsoft Office 2010. Na levé straně se nachází selektor pracovního prostředí, který obsahuje tlačítka určující, co bude zobrazeno v levém podokně nad nimi. Pravou stranu vyplňuje podokno s obsahem, ve kterém se zobrazují sestavy, probíhá úprava souborů atd. A konečně, napříč spodní částí se táhne oznamovací pruh, ve kterém jsou podle potřeby zobrazovány zprávy.

    ch01_learnweb-4

Vytvoření webové stránky

  1. V prostředí WebMatrix vyberte pracovní prostředí Files (Soubory). V tomto pracovním prostředí je možné pracovat se soubory a složkami. Levé podokno zobrazuje strukturu souborů vašeho webu.

    ch01_learnweb-5

  2. Klikněte na položku New (Nový) na pásu karet a poté na položku New File (Nový soubor).

    ch01_learnweb-6

    WebMatrix zobrazí seznam typů souborů.

    ch01_learnweb-7

  3. Vyberte typ CSHTML a v poli Name (Název) zadejte default.cshtml. Stránka CSHTML je speciálním typem stránky v prostředí WebMatrix, který obsahuje obvyklý obsah webové stránky, například kód HTML nebo JavaScript, a může také obsahovat kód pro programování webových stránek. (Více informací o souborech CSHTML se dozvíte za chvíli.)
  4. Klikněte na tlačítko OK. WebMatrix stránku vytvoří a otevře ji v editoru.

    ch01_learnweb-8

    Jak vidíte, jedná se o obyčejný kód značkovacího jazyka HTML.

  5. Přidejte do stránky následující nadpis, záhlaví a obsah odstavce: 
    <!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>
  6. Na panelu Rychlý přístup klikněte na tlačítko Save (Uložit).

    ch01_learnweb-9

  7. Na pásu karet klikněte na položku Run (Spustit).

    ch01_learnweb-10

    Poznámka   Než kliknete na položku Run (Spustit), ověřte, zda v navigačním podokně pracovního prostředí Files (Soubory) je vybrána stránka, kterou chcete spustit. WebMatrix spustí vybranou stránku, i když právě provádíte úpravy jiné stránky. Pokud není vybrána žádná stránka, WebMatrix se pokusí spustit výchozí stránku webu (default.cshtml) a pokud neexistuje žádná výchozí stránka, prohlížeč zobrazí chybu.

    WebMatrix spustí webový server (IIS Express), pomocí něhož můžete stránky testovat ve svém počítači. Stránka bude zobrazena ve vašem výchozím prohlížeči.

    ch01_learnweb-11

Instalace pomocných tříd pomocí nástroje pro správu

Nyní, když je sada WebMatrix nainstalována a vytvořili jste nový web, může být užitečné seznámit se s tím, jak pomocí nástrojů ASP.NET Web Pages Administration (Správa webových stránek ASP.NET) a Package Manager (Správce balíčků) nainstalovat pomocné třídy. Sada WebMatrix obsahuje pomocné třídy (komponenty), které zjednodušují časté programátorské úlohy a které budete v těchto lekcích často využívat. (Některé pomocné třídy jsou už součástí sady WebMatrix, ale je možné nainstalovat další.) Seznam všech pomocných tříd, které jsou k dispozici, najdete v příloze. Následující postup ukazuje, jak pomocí nástroje pro správu nainstalovat knihovnu webových pomocných tříd ASP.NET Web Helpers Library. Některé z těchto pomocných tříd použijete v této lekci a také v dalších lekcích této série.

  1. V prostředí WebMatrix klikněte na pracovní prostředí Site (Web).
  2. V podokně s obsahem klikněte na položku ASP.NET Web Pages Administration (Správa webových stránek ASP.NET). V prohlížeči se otevře stránka pro správu. Protože se ke stránce pro správu přihlašujete poprvé, budete vyzváni k vytvoření hesla.
  3. Vytvořte heslo.

    ch01_learnweb-12

    Po kliknutí na tlačítko Create Password (Vytvořit heslo) budete na stránce kontroly zabezpečení, která vypadá podobně jako na níže uvedeném snímku obrazovky, vyzváni k tomu, abyste z bezpečnostních důvodů soubor s heslem přejmenovali. Pokud tuto stránku vidíte poprvé, nepokoušejte se zatím soubor přejmenovat. Přejděte na další krok a postupujte podle uvedených pokynů.

    ch01_learnweb-12a

  4. Nechejte stránku kontroly zabezpečení otevřenou v prohlížeči, vraťte se do prostředí WebMatrix a klikněte na pracovní prostředí Files (Soubory).
  5. Klikněte pravým tlačítkem na složku Hello World pro váš web a poté klikněte na položku Refresh (Aktualizovat). V seznamu souborů a složek bude nyní zobrazena složka App_Data. Po jejím otevření uvidíte složku Admin. Nově vytvořený soubor s heslem (_Password.config) je zobrazen ve složce ./App_Data/Admin/. Následující ilustrace ukazuje aktualizovanou strukturu souborů, ve které je vybrán soubor s heslem:

    ch01_learnweb-13

  6. Změňte název souboru na Password.config tak, že odstraníte počáteční znak podtržítka (_).
  7. Vraťte se na stránku kontroly zabezpečení v prohlížeči a klikněte na odkaz Click Here (Klikněte sem), který najdete v závěru textu výzvy k přejmenování souboru s heslem.
  8. Přihlaste se ke stránce Administration (Správa) pomocí vytvořeného hesla. Na stránce bude zobrazen nástroj Package Manager (Správce balíčků), který obsahuje seznam balíčků doplňků.

    ch01_learnweb-14

    Pokud byste někdy chtěli zobrazit zdroje z jiných umístění, klikněte na odkaz Manage Package Sources (Správa zdrojů balíčků), pomocí něhož můžete přidat nové zdroje, změnit je nebo odebrat.

  9. Vyhledejte balíček ASP.NET Web Helpers Library 1.1 (Knihovna pomocných webových tříd ASP.NET), klikněte na tlačítko Install (Instalovat) a poté podle pokynů balíček nainstalujte. Při instalaci knihovny pomocných webových tříd ASP.NET nástroj Package Manager nainstaluje také knihovnu pomocné třídy FaceBook.Helper 1.0. Pomocné třídy z těchto knihoven použijete v této a dalších lekcích. Po instalaci balíčku nástroj Package Manager zobrazí výsledek:

    ch01_learnweb-15

    Na této stránce můžete balíčky také odinstalovat a s pomocí této stránky můžete balíčky aktualizovat, pokud budou k dispozici jejich nové verze. Když přejdete na seznam Show (Zobrazit) a kliknete na položku Installed (Nainstalované), budou zobrazeny již nainstalované balíčky. Můžete také kliknout na položku Updates (Aktualizace) a zobrazit aktualizace nainstalovaných balíčků.

    V další části se dozvíte, jak snadno vytvořit dynamickou stránku přidáním kódu do stránky default.cshtml.

Použití kódu webových stránek ASP.NET

V rámci tohoto postupu vytvoříme stránku, která pomocí jednoduchého kódu zobrazuje datum a čas serveru. V tomto příkladu se seznámíte se syntaxí Razor, která umožňuje vkládat programový kód do kódu jazyka HTML webových stránek ASP.NET. (Více se dočtete v následující kapitole.) V kódu je představena jedna z pomocných tříd, které byly zmíněny v předchozí části této kapitoly.

  1. Otevřete soubor default.cshtml.
  2. Do stránky přidejte kód značkovacího jazyka, tak aby vypadala jako v následujícím příkladu: 
    <!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>The time is @DateTime.Now</p> 
    </body> 
</html>

    Stránka obsahuje obvyklé značky HTML, a navíc jeden doplněk: znak @, který uvozuje programový kód ASP.NET.

  3. Stránku uložte a spusťte ji v prohlížeči. Na stránce nyní vidíte aktuální datum a čas.

    ch01_learnweb-16

    Jeden řádek kódu, který jste přidali, odvede všechnu práci potřebnou ke zjištění aktuálního času serveru, jeho zformátování pro zobrazení a odeslání prohlížeči. (Je možné zvolit různé možnosti formátování. Zde bylo použito výchozí nastavení.)

Řekněme, že chcete provést něco složitějšího, například zobrazit rolující seznam tweetů od zvoleného uživatele služby Twitter. K tomu můžete použít pomocnou třídu (helper). Jak již bylo zmíněno výše, pomocná třída (helper) je komponenta usnadňující často prováděné úlohy. V tomto případě veškerou práci, která by jinak byla zapotřebí pro získání a zobrazení kanálu služby Twitter.

  1. Vytvořte nový soubor CSHTML a pojmenujte jej TwitterFeed.cshtml.
  2. Nahraďte stávající kód ve stránce následujícím kódem: 
    <!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Twitter Feed</title> 
    </head> 
    <body> 
        <h1>Twitter Feed</h1> 
        <form action="" method="POST"> 
         <div> 
            Enter the name of another Twitter feed to display: 
              
            <input type="text" name="TwitterUser" value=""/> 
              
            <input type="submit" value="Submit" /> 
         </div> 
         <div> 
            @if (Request["TwitterUser"].IsEmpty()) { 
                @Twitter.Search("microsoft") 
            } 
            else { 
                @Twitter.Profile(Request["TwitterUser"]) 
            }     
         </div> 
        </form> 
    </body> 
</html>

    Tento kód jazyka HTML vytvoří formulář zobrazující textové pole pro zadání jména uživatele a také tlačítko Submit (Odeslat). Tyto prvky se nacházejí uvnitř první sady značek <div>.

    Uvnitř druhé sady značek <div> se nachází programový kód. (Jak jste již viděli dříve, pro označení kódu uvnitř stránek ASP.NET slouží znak @.) Při prvním zobrazení stránky nebo pokud uživatel klikne na tlačítko Submit (Odeslat), ale ponechá textové pole prázdné, bude podmíněný výraz Request["TwitterUser"].IsEmpty nabývat hodnotu true (pravda). V tom případě stránka zobrazí mikroblog služby Twitter, který vyhledává termín 'microsoft'. V opačném případě stránka zobrazí mikroblog služby Twitter pro uživatele s libovolným jménem zadaným do textového pole.

  3. Spusťte stránku v prohlížeči. Mikroblog služby Twitter zobrazuje tweety obsahující termín 'microsoft'.

    ch01_learnweb-17

  4. Zadejte nové jméno uživatele služby Twitter a poté klikněte na tlačítko Submit (Odeslat). Je zobrazen nový mikroblog. (Pokud zadáte jméno, které neexistuje, mikroblog služby Twitter bude přesto zobrazen, ale bude prázdný.)

    V tomto příkladu jste se dozvěděli něco o tom, jak používat prostředí WebMatrix a jak můžete programovat dynamické webové stránky pomocí jednoduchého kódu ASP.NET s použitím syntaxe Razor. V další kapitole si kód probereme podrobněji. V následných kapitolách se pak dozvíte, jak můžete kód použít pro mnoho různých typů webových úloh.

Programování stránek ASP.NET se syntaxí Razor v sadě Visual Studio

Kromě sady WebMatrix můžete k programování stránek ASP.NET se syntaxí Razor použít také sadu Visual Studio 2010 – buď některou z plných edicí, nebo bezplatnou edici Visual Web Developer Express. Když budete stránky ASP.NET se syntaxí Razor upravovat pomocí sady Visual Studio nebo Visual Web Developer, získáte dva programovací nástroje, které zvýší vaši produktivitu: technologii IntelliSense a ladicí program. Technologie IntelliSense v editoru funguje tak, že zobrazuje vhodné možnosti podle kontextu. Pokud například zadáte element jazyka HTML, technologie IntelliSense zobrazí seznat atributů, které tento element může obsahovat, a může vám dokonce ukázat, jaké hodnoty můžete pro tyto atributy nastavit. Technologie IntelliSense funguje pro jazyky HTML, JavaScript a C# nebo Visual Basic (programovací jazyky používané pro stránky ASP.NET se syntaxí Razor).

Ladicí program umožňuje zastavit program po jeho spuštění. Pak je například možné ověřit hodnoty proměnných nebo postupovat programem řádek po řádku, aby bylo možné zjistit, jak je vykonáván.

Abyste v sadě Visual Studio mohli pracovat se stránkami ASP.NET se syntaxí Razor, musí být ve vašem počítači nainstalován následující software:

Poznámka   Software Visual Web Developer 2010 Express a ASP.NET MVC 3 můžete nainstalovat pomocí nástroje Web Platform Installer.

Pokud při úpravách webu v prostředí WebMatrix budete mít současně nainstalovánu sadu Visual Studio, můžete web spustit v prostředí sady Visual Studio, abyste mohli využít technologii IntelliSense nebo ladicí program.

  1. Otevřete web vytvořený v této kapitole a klikněte na pracovní prostředí Files (Soubory).
  2. Na pásu karet klikněte na tlačítko Visual Studio Launch (Spustit Visual Studio).

    ch01_learnweb-18

    Po otevření webu v sadě Visual Studio uvidíte strukturu webu v podokně Solution Explorer (Průzkumník řešení). Následující ilustrace ukazuje web otevřený v prostředí sady Visual Web Developer 2010 Express:

    (1. října 2007)

    Přehled použití technologie IntelliSense a ladicího programu pro stránky ASP.NET se syntaxí Razor v sadě Visual Studio najdete v příloze v rámci položky Visual Studio a webové stránky ASP.NET.

Vytváření a testování stránek ASP.NET s použitím vlastního textového editoru

Pro vytváření a testování webových stránek ASP.NET nemusíte používat editor prostředí WebMatrix. Stránku můžete vytvořit v libovolném textovém editoru, například v programu Poznámkový blok. Jen si musíte dát pozor, abyste při uložení stránky použili název souboru s příponou CSHTML. (Nebo VBHTML, pokud chcete použít jazyk Visual Basic.)

Stránky CSHTML lze nejsnadněji testovat spuštěním webového serveru (IIS Express) pomocí tlačítka Run (Spustit) v prostředí WebMatrix. Nechcete-li používat nástroj WebMatrix, můžete webový server spustit z příkazového řádku a spojit ho s konkrétním číslem portu. Tento port poté uvedete, až budete z prohlížeče odesílat požadavek na soubory CSHTML.

V systému Windows otevřete příkazový řádek s oprávněními správce a přejděte do následující složky:

C:\Program Files\IIS Express

V 64bitových systémech použijte tuto složku:

C:\Program Files (x86)\IIS Express

Zadejte následující příkaz s použitím skutečné cesty k vašemu webu:

iisexpress.exe /port:35896 /path:C:\BasicWebSite

Nezáleží na tom, jaké číslo portu použijete, ale tento port nesmí už být vyhrazen pro jiné procesy. (Čísla portů nad 1024 jsou obvykle volná.)

Pro hodnotu path (cesta) použijte cestu k webu se soubory CSHTML, které chcete testovat.

Po spuštění tohoto příkazu můžete otevřít prohlížeč a zadáním následující adresy přejít na soubor CSHTML:

http://localhost:35896/default.cshtml

Nápovědu pro možnosti příkazového řádku serveru IIS Express můžete zobrazit zadáním příkazu iisexpress.exe /? na příkazovém řádku.