Programování ASP.NET webových stránek (Razor) pomocí sady Visual Studio

, autor: Tom FitzMacken

Tento článek vysvětluje, jak můžete pomocí sady Visual Studio nebo Visual Web Developer Express programovat weby ASP.NET Web Pages (Razor).

Co se dozvíte

  • Co potřebujete k instalaci (pokud vůbec něco) pro práci s webovými stránkami ASP.NET ve vaší verzi sady Visual Studio.
  • Jak přidat podporu pro ASP.NET Web Pages do Visual Web Developer 2010 Express.
  • Jak používat funkce v sadě Visual Studio pro práci se ASP.NET stránkami Razor, včetně IntelliSense a ladicího programu.

Verze softwaru použité v kurzu

  • ASP.NET Webové stránky (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

Tento kurz funguje také pro ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 a WebMatrix 2.

ASP.NET webových stránek se syntaxí Razor můžete programovat pomocí nástroje WebMatrix nebo mnoha dalších editorů kódu. Můžete také použít Microsoft Visual Studio, což je plnohodnotné integrované vývojové prostředí (IDE), které poskytuje výkonnou sadu nástrojů pro vytváření mnoha typů aplikací (nejen webů). Pokud chcete pracovat s ASP.NET Razor Pages, můžete použít Visual Studio 2017.

Pro programování s webovými stránkami ASP.NET Razor nabízí Sada Visual Studio dvě zvlášť užitečné funkce:

  • IntelliSense. Funkce IntelliSense integrovaná v sadě Visual Studio je komplexnější než IntelliSense v nástroji WebMatrix.
  • Ladicí program. Ladicí program umožňuje řešit potíže s kódem zastavením programu, který běží, prozkoumáním proměnných a procházením kódu řádek po řádku.

Použití sady Visual Studio s různými verzemi webových stránek ASP.NET

Pokud chcete vyvíjet ASP.NET webové aplikace v sadě Visual Studio 2017, nainstalujte sadu funkcí ASP.NET a vývoj pro web .

Visual Studio 2012 a Visual Studio 2013 obsahují podporu ASP.NET webových stránek. (Balíčky, které jsou potřeba k podpoře ASP.NET webových stránek, se nainstalují při instalaci sady Visual Studio.)

Visual Studio 2010 ve výchozím nastavení nepodporuje ASP.NET webových stránek. Pokud chcete používat webové stránky ASP.NET se sadou Visual Studio 2010, musíte nainstalovat balíček ASP.NET MVC. Pokud chcete získat ASP.NET webové stránky 2, nainstalujete ASP.NET MVC 4.

Následující tabulka shrnuje podporu webových stránek ASP.NET v různých verzích sady Visual Studio.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET – webové stránky 2 Instalace ASP.NET MVC 4 (Zahrnuto) (Zahrnuto)
ASP.NET – webové stránky 3 Aktualizace webových stránek ASP.NET 3 až NuGet (Zahrnuto)

Pokud chcete pracovat se sadou Visual Studio 2010, přečtěte si téma Instalace podpory webových stránek ASP.NET v sadě Visual Studio 2010.

Spuštění sady Visual Studio z nástroje WebMatrix

Pokud jste spustili projekt v nástroji WebMatrix a chcete přepnout na sadu Visual Studio, webMatrix nabízí tlačítko pro snadné otevření projektu v sadě Visual Studio. Aby bylo toto tlačítko povolené, musíte mít v počítači nainstalovanou sadu Visual Studio. Následující obrázek znázorňuje tlačítko v nástroji WebMatrix.

spuštění sady Visual Studio

Po kliknutí na tlačítko se projekt otevře v sadě Visual Studio. Mezi webMatrixem a sadou Visual Studio můžete přepínat bez problémů. Pokud se některé soubory změnily v jiném prostředí a je potřeba je znovu načíst, abyste získali nejnovější změny, dostanete oznámení.

Vytvoření webu ASP.NET Razor v sadě Visual Studio

Vytvoření webu ASP.NET Razor v sadě Visual Studio:

  1. Otevřete sadu Visual Studio.

  2. V nabídce Soubor klikněte na Nový web.

    vytvořit nový web

  3. V dialogovém okně Nový web vyberte jazyk, který chcete použít (Visual C# nebo Visual Basic).

  4. Vyberte šablonu ASP.NET Web Site (Razor).

    razor site

  5. Klikněte na OK.

Nový projekt existuje a naplní se některými výchozími webovými stránkami, které vám pomůžou začít.

Používání atributu IntelliSense

Teď, když jste vytvořili web, uvidíte, jak intellisense funguje v sadě Visual Studio.

  1. Na webu, který jste právě vytvořili, otevřete stránku Default.cshtml .

  2. Za značky <h3> na stránce zadejte @ServerInfo. (včetně tečky). Všimněte si, jak IntelliSense zobrazuje dostupné metody pro ServerInfo pomocnou rutinu v rozevíracím seznamu.

    Intellisense

  3. Vyberte metodu GetHtml ze seznamu a stiskněte Klávesu Enter. IntelliSense automaticky vyplní metodu . (Stejně jako u jakékoli jiné metody v jazyce C# musíte za metodu přidat () znaky.) Dokončený kód pro metodu GetHtml vypadá jako v následujícím příkladu:

    @ServerInfo.GetHtml()
    
  4. Stisknutím kombinace kláves Ctrl+F5 stránku spusťte. Stránka při zobrazení v prohlížeči vypadá takto:

    výchozí stránka v prohlížeči

  5. Zavřete prohlížeč.

Použití ladicího programu

  1. V horní části stránky Default.cshtml za řádek, který začíná Page.Title, přidejte následující řádek kódu:

    var myTime = DateTime.Now.TimeOfDay;
    
  2. V šedém okraji editoru nalevo od kódu klikněte vedle tohoto nového řádku a přidejte zarážku. Zarážka je značka, která ladičímu programu říká, aby v tomto okamžiku program zastavil, abyste viděli, co se děje.

    nastavit zarážku

  3. Odeberte volání ServerInfo.GetHtml metody a místo této proměnné přidejte volání @myTime . Toto volání zobrazí aktuální časovou hodnotu vrácenou novým řádkem kódu.

  4. Stisknutím klávesy F5 spusťte stránku v ladicím programu. Stránka se zastaví na zarážce, kterou jste nastavili. Následující obrázek ukazuje, jak stránka vypadá v editoru se zarážkou (žlutou barvou).

    Zarážka ladění

  5. Na panelu nástrojů Ladění klikněte na tlačítko Krokovat ( nebo stiskněte klávesu F11) a spusťte další řádek kódu. Při každém kliknutí na toto tlačítko přejdete na další řádek kódu.

    Krok do tlačítka

  6. Prozkoumejte hodnotu proměnné tak, myTime že na ni podržíte ukazatel myši nebo zkontrolujete hodnoty zobrazené v oknech Místní hodnoty a Zásobník volání . Visual Studio zobrazí hodnotu proměnné .

    zobrazení hodnoty času

  7. Až budete s prozkoumáním proměnné a krokováním kódu hotoví, stiskněte klávesu F5 a pokračujte ve spuštění stránky, aniž byste se museli zastavovat na každém řádku. Po dokončení procházení veškerého kódu se v prohlížeči zobrazí stránka.

Další informace o ladicím programu a o tom, jak ladit kód v sadě Visual Studio, najdete v tématu Návod: Ladění webových stránek v aplikaci Visual Web Developer.

Použití Razoru v projektech ASP.NET MVC se sadou Visual Studio

Syntaxe Razor se také ve velké míře používá v projektech ASP.NET MVC. MVC je výkonný způsob vytváření dynamických webů založený na vzorech. Pokud je údržba webu ASP.NET obtížná, můžete zvážit jeho převod na aplikaci ASP.NET MVC. Příklad vytvoření aplikace MVC najdete v tématu Začínáme s ASP.NET MVC 5.

Instalace podpory webových stránek ASP.NET v sadě Visual Studio 2010

Tato část ukazuje, jak nainstalovat Visual Web Developer Express 2010 a ASP.NET Web Pages Tools for Visual Studio.

  1. Pokud instalační program webové platformy ještě nemáte, stáhněte si ho z následující adresy URL:

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

  2. Spusťte instalační program webové platformy.

  3. Klikněte na kartu Produkty .

    Karta WebPI Products

  4. Vyhledejte ASP.NET MVC 4 (pro ASP.NET Web Pages 2) a klikněte na Přidat. Mezi tyto produkty patří nástroje sady Visual Studio pro vytváření webů ASP.NET Razor.

    Možnosti instalace WebPi

  5. Kliknutím na Nainstalovat dokončete instalaci.