Programování webových stránek ASP.NET v sadě Visual Studio

 
 

 

Tato příloha vysvětluje, jak programovat webové stránky ASP.NET se syntaxí Razor s použitím sady Visual Studio 2010 nebo aplikace Visual Web Developer 2010 Express.

Co se naučíte

 

 

Proč používat Visual Studio?

Webové stránky ASP.NET se syntaxí Razor můžete programovat s použitím sady WebMatrix nebo celé řady dalších editorů kódu. Můžete také použít sadu Microsoft Visual Studio 2010, která nabízí plně funkčně vybavené integrované vývojové prostředí poskytující sadu výkonných nástrojů pro vytváření mnoha typů aplikací (nejen webů). Pro práci se stránkami ASP.NET se syntaxí Razor můžete použít některou z plných edicí sady Visual Studio nebo bezplatnou edici Visual Web Developer Express.

Dvě mimořádně užitečné funkce, které při programování webových stránek se syntaxí Razor v sadě Visual Studio můžete využít, jsou:

Tyto funkce jsou v současnosti k dispozici pouze v sadě Visual Studio.

Instalace nástrojů ASP.NET Razor

V této části se dozvíte, jak nainstalovat bezplatnou edici aplikace Visual Web Developer Express 2010 a nástroje pro programování webových stránek ASP.NET v sadě Visual Studio.

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

    http://www.microsoft.com/web/downloads/platform.aspx

  2. Spusťte nástroj Web Platform Installer, vyberte položku Products (Produkty), vyhledejte položku ASP.NET MVC 3 a poté klikněte na tlačítko Add (Přidat). Tento nástroj zahrnuje nástroje pro vytváření webů ASP.NET se syntaxí Razor v sadě Visual Studio.

    vs-1

  3. Pokud ještě nemáte nainstalovanou sadu Visual Studio nebo Visual Studio Express, vyhledejte položku Visual Web Developer Express a poté klikněte na tlačítko Add (Přidat).
  4. Dokončete instalaci kliknutím na tlačítko Install (Instalovat).

Použití nástrojů ASP.NET Razor pro sadu Visual Studio

Abyste mohli použít technologii IntelliSense a ladicí program, musíte v sadě Visual Studio vytvořit web ASP.NET se syntaxí Razor.

  1. Spusťte sadu Visual Studio nebo aplikaci Visual Web Developer.
  2. V nabídce File (Soubor) klikněte na položku New Web Site (Nový web).
  3. V dialogovém okně New Web Site (Nový web) vyberte jazyk, který chcete použít (Visual C# nebo Visual Basic).
  4. Vyberte šablonu ASP.NET Web Site (Razor) (Web ASP.NET se syntaxí Razor).
  5. V rozevírací nabídce vedle titulku Web locations (Umístění webu) vyberte položku File System (Souborový systém) a jako cestu zadejte místní složku.

    vs-2

  6. Klikněte na tlačítko OK.

Použití technologie IntelliSense

Po vytvoření webu si můžete vyzkoušet, jak technologie IntelliSense v sadě Visual Studio funguje.

  1. V právě vytvořeném webu otevřete stránku Default.cshtml. Přesvědčte se, zda ve spodní části okna je vybrána karta Source (Zdrojový kód).
  2. Za koncovou značku </p> ve stránce napište text @ServerInfo. (včetně tečky). Všimněte si, jak technologie IntelliSense v rozevíracím seznamu zobrazuje metody, které jsou k dispozici pro pomocnou třídu (helper) ServerInfo.

    vs-3

  3. Vyberte ze seznamu metodu GetHtml (Získat kód HTML) a poté stiskněte klávesu ENTER. Technologie IntelliSense metodu automaticky doplní. (Jako u všech metod v jazyce C# musíte za metodu doplnit znaky ().)
    Kompletní kód pro metodu
    GetHtml
    vypadá stejně jako v následujícím příkladu:
     
    @Server.GetHtml()
  4. Spusťte stránku pomocí klávesové zkratky CTRL+F5. Po zobrazení v prohlížeči bude stránka vypadat následovně:

    vs-4

  5. Zavřete prohlížeč a poté uložte aktualizovanou stránku Default.cshtml page.

Použití ladicího programu

  1. Do horní části stránky Default.cshtml za řádek, který začíná výrazem Page.Title, přidejte následující řádek kódu:
    var myTime = DateTime.Now.TimeOfDay;
  2. V šedém okraji editoru vlevo od kódu klikněte vedle tohoto nového řádku, čímž přidáte novou zarážku. Zarážka je značka, pomocí které ladicí program pozná, že v tomto bodě má program zastavit, abyste mohli zjistit, co se děje.
  3. Odstraňte volání metody ServerInfo.GetHtml a na její místo přidejte volání proměnné @myTime. Toto volání zobrazí hodnotu s aktuálním časem, kterou vrací nový řádek kódu.

    Aktualizovaná stránka se dvěma novými řádky kódu a zarážkou vypadá takto:

    vs-5

  4. Stiskněte klávesu F5 pro spuštění stránky v ladicím programu. Stránka se zastaví na nastavené zarážce. Následující obrázek ukazuje, jak stránka vypadá v editoru, včetně zarážky (zobrazena žlutou barvou), panelu nástrojů Debug (Ladění) a tlačítka Step Into (Krokovat s vnořením).

    vs-6

  5. Klikněte na tlačítko Step Into (Krokovat s vnořením) nebo stiskněte klávesu F11. Tím je vykonán další řádek kódu. Opětovným stisknutím klávesy F11 přejdete na další řádek spustitelného kódu a tak dále.
  6. Hodnotu proměnné myTime můžete zjistit tak, že nad ni umístíte ukazatel myši, nebo si můžete prohlédnout hodnoty zobrazené v oknech Locals (Místní hodnoty) a Call Stack (Zásobník volání).
  7. Když už nebude chtít prohlížet obsah proměnné a krokovat kód, můžete stisknout klávesu F5, aby vykonávání stránky pokračovalo bez zastavení na každém řádku. Po zobrazení v prohlížeči bude stránka vypadat následovně:

    vs-7

Více informací o ladicím programu a ladění kódu v sadě Visual Studio vám poskytne návod Ladění webových stránek v aplikaci Visual Web Developer.