Programowanie ASP.NET stron internetowych (Razor) przy użyciu programu Visual Studio

Autor: Tom FitzMacken

W tym artykule wyjaśniono, jak programować witryny internetowe ASP.NET Web Pages (Razor) przy użyciu programu Visual Studio lub Visual Web Developer Express.

Czego się nauczysz

• Co należy zainstalować (jeśli w ogóle), aby pracować z usługą ASP.NET Web Pages w wersji programu Visual Studio.
• Jak dodać obsługę ASP.NET stron internetowych do programu Visual Web Developer 2010 Express.
• Jak używać funkcji w programie Visual Studio do pracy ze stronami ASP.NET Razor, w tym z funkcją IntelliSense i debugerem.

Wersje oprogramowania używane w samouczku

• ASP.NET Web Pages (Razor) 3
• Visual Studio 2013
• WebMatrix 3

Ten samouczek współpracuje również z ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 i WebMatrix 2.

Można programować strony internetowe w ASP.NET przy użyciu składni Razor za pomocą WebMatrix lub wielu innych edytorów kodu. Możesz również użyć programu Microsoft Visual Studio, które jest w pełni funkcjonalnym zintegrowanym środowiskiem projektowym (IDE), które udostępnia zaawansowany zestaw narzędzi do tworzenia wielu typów aplikacji (nie tylko witryn internetowych). Aby pracować z ASP.NET stronami Razorowymi, możesz użyć programu Visual Studio 2017.

Dwie szczególnie przydatne funkcje, które program Visual Studio zapewnia do programowania za pomocą ASP.NET stron internetowych Razor:

• IntelliSense. Funkcja IntelliSense wbudowana w program Visual Studio jest bardziej kompleksowa niż funkcja IntelliSense w programie WebMatrix.
• Debugger. Debuger umożliwia rozwiązywanie problemów z kodem przez zatrzymanie programu podczas jego działania, badanie zmiennych i przechodzenie przez wiersz kodu według wiersza.

Korzystanie z programu Visual Studio z różnymi wersjami ASP.NET stron sieci Web

Aby tworzyć aplikacje internetowe ASP.NET w programie Visual Studio 2017, zainstaluj pakiet roboczy ASP.NET i tworzenie aplikacji internetowych .

Programy Visual Studio 2012 i Visual Studio 2013 obejmują obsługę stron internetowych ASP.NET. (Pakiety wymagane do obsługi ASP.NET Stron sieci Web są instalowane podczas instalowania programu Visual Studio).

Program Visual Studio 2010 nie obejmuje domyślnie obsługi ASP.NET Web Pages. Aby używać ASP.NET stron sieci Web w programie Visual Studio 2010, należy zainstalować pakiet ASP.NET MVC. Aby uzyskać ASP.NET Web Pages 2, zainstaluj ASP.NET MVC 4.

Poniższa tabela zawiera podsumowanie obsługi ASP.NET stron internetowych w różnych wersjach programu Visual Studio.

Aby pracować z programem Visual Studio 2010, zobacz Instalowanie obsługi stron internetowych ASP.NET w programie Visual Studio 2010.

Uruchamianie programu Visual Studio z programu WebMatrix

Jeśli projekt został uruchomiony w programie WebMatrix i chcesz przełączyć się do programu Visual Studio, program WebMatrix udostępnia przycisk umożliwiający łatwe otwieranie projektu w programie Visual Studio. Aby ten przycisk był włączony, na komputerze musi być zainstalowany program Visual Studio. Na poniższej ilustracji przedstawiono przycisk w programie WebMatrix.

Po kliknięciu przycisku projekt zostanie otwarty w programie Visual Studio. Możesz przełączać się między programem WebMatrix i programem Visual Studio bez żadnych problemów. Otrzymasz powiadomienie, jeśli jakiekolwiek pliki uległy zmianie w innym środowisku i trzeba je ponownie załadować, aby uzyskać najnowsze zmiany.

Tworzenie witryny ASP.NET Razor w programie Visual Studio

Aby utworzyć witrynę internetową Razor ASP.NET w programie Visual Studio:

1. Otwórz program Visual Studio.

2. W menu Plik kliknij pozycję Nowa witryna sieci Web.

   

3. W oknie dialogowym Nowa witryna sieci Web wybierz język do użycia (Visual C# lub Visual Basic).

4. Wybierz szablon witryny internetowej ASP.NET (Razor).

   

5. Kliknij przycisk OK.

Nowy projekt istnieje i jest wypełniany niektórymi domyślnymi stronami internetowymi, które ułatwiają rozpoczęcie pracy.

Korzystanie z funkcji IntelliSense

Po utworzeniu witryny możesz zobaczyć, jak działa funkcja IntelliSense w programie Visual Studio.

1. W utworzonej witrynie internetowej otwórz stronę Default.cshtml .

2. Po tagach <h3> na stronie wpisz @ServerInfo. (w tym kropkę). Zwróć uwagę, że funkcja IntelliSense wyświetla dostępne metody pomocnika ServerInfo na liście rozwijanej.

   

3. Wybierz metodę GetHtml z listy, a następnie naciśnij klawisz Enter. IntelliSense automatycznie uzupełnia metodę. (Podobnie jak w przypadku dowolnej metody w języku C#, należy dodać () znaki po metodzie ). Ukończony kod metody wygląda podobnie do następującego przykładu GetHtml :

   @ServerInfo.GetHtml()
   

4. Naciśnij klawisze Ctrl+F5, aby uruchomić stronę. Tak wygląda strona w przypadku wyświetlania w przeglądarce:

   

5. Zamknij okno przeglądarki.

Korzystanie z debugera

1. W górnej części strony Default.cshtml po wierszu rozpoczynającym się od Page.Titledodaj następujący wiersz kodu:

   var myTime = DateTime.Now.TimeOfDay;
   

2. Na szarym marginesie edytora po lewej stronie kodu kliknij obok tego nowego wiersza, aby dodać punkt przerwania. Punkt przerwania to znacznik, który nakazuje debugerowi zatrzymanie uruchamiania programu w tym momencie, aby zobaczyć, co się dzieje.

   

3. Usuń wywołanie metody ServerInfo.GetHtml i zamiast tego odwołaj się do zmiennej @myTime. To wywołanie wyświetla bieżącą wartość godziny zwróconą przez nowy wiersz kodu.

4. Naciśnij klawisz F5, aby uruchomić stronę w debugerze. Strona zatrzymuje się w ustawionym punkcie przerwania. Na poniższej ilustracji przedstawiono wygląd strony w edytorze z punktem przerwania (w kolorze żółtym).

   

5. Na pasku narzędzi Debugowanie kliknij przycisk Krok do (lub naciśnij klawisz F11), aby uruchomić następny wiersz kodu. Za każdym razem, gdy klikniesz ten przycisk, wykonanie przechodzi do następnego wiersza kodu.

   

6. Sprawdź wartość zmiennej myTime , trzymając wskaźnik myszy nad nią lub sprawdzając wartości wyświetlane w oknach Zmienne lokalne i Stos wywołań. Program Visual Studio wyświetla wartość zmiennej.

   

7. Po zakończeniu badania zmiennej i przechodzeniu przez kod naciśnij klawisz F5, aby kontynuować uruchamianie strony bez zatrzymywania się w każdym wierszu. Po zakończeniu przechodzenia przez cały kod przeglądarka wyświetli stronę.

Aby dowiedzieć się więcej na temat debugera i sposobu debugowania kodu w programie Visual Studio, zobacz Przewodnik: debugowanie stron internetowych w programie Visual Web Developer.

Używanie platformy Razor w projektach MVC ASP.NET z programem Visual Studio

Składnia Razor jest również szeroko używana w projektach ASP.NET MVC. MVC to zaawansowany, oparty na wzorcach sposób tworzenia dynamicznych witryn internetowych. Jeśli witryna ASP.NET Web Pages stanie się trudna do utrzymania, warto rozważyć przekonwertowanie jej na aplikację ASP.NET MVC. Przykład tworzenia aplikacji MVC można znaleźć w temacie Getting Started with ASP.NET MVC 5 (Wprowadzenie do ASP.NET MVC 5).

Instalowanie obsługi ASP.NET Web Pages w programie Visual Studio 2010

W tej sekcji przedstawiono sposób instalowania programu Visual Web Developer Express 2010 i narzędzi ASP.NET Web Pages Tools for Visual Studio.

1. Jeśli nie masz jeszcze Instalatora platformy internetowej, pobierz go z następującego adresu URL:

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

2. Uruchom Instalatora platformy internetowej.

3. Kliknij kartę Produkty .

   

4. Wyszukaj ASP.NET MVC 4 (dla ASP.NET Web Pages 2), a następnie kliknij przycisk Dodaj. Te produkty obejmują narzędzia programu Visual Studio do tworzenia witryn internetowych ASP.NET Razor.

   

5. Kliknij przycisk Zainstaluj , aby ukończyć instalację.