Udostępnij za pośrednictwem


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

– autor Tom FitzMacken

W tym artykule wyjaśniono, jak za pomocą programu Visual Studio lub Visual Web Developer Express programować witryny internetowe ASP.NET Web Pages (Razor).

Zawartość

  • 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 Web Pages do programu Visual Web Developer 2010 Express.
  • Jak używać funkcji w programie Visual Studio do pracy z ASP.NET stron 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 działa również z programem ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 i WebMatrix 2.

Można programować ASP.NET stron sieci Web przy użyciu składni Razor przy użyciu programu 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 Razor, możesz użyć programu Visual Studio 2017.

Dwie szczególnie przydatne funkcje zapewniane przez program Visual Studio na potrzeby programowania za pomocą ASP.NET stron internetowych Razor to:

  • IntelliSense. Funkcja IntelliSense wbudowana w program Visual Studio jest bardziej kompleksowa niż funkcja IntelliSense w programie WebMatrix.
  • Debuger. 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.

Używanie programu Visual Studio z różnymi wersjami ASP.NET Web Pages

Aby opracowywać aplikacje internetowe ASP.NET w programie Visual Studio 2017, zainstaluj obciążenie ASP.NET i tworzenie aplikacji internetowych .

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

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

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

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
ASP.NET Web Pages 2 Instalowanie ASP.NET MVC 4 (Uwzględnione) (Uwzględnione)
ASP.NET Web Pages 3 Aktualizacja do ASP.NET stron sieci Web 3 za pośrednictwem pakietu NuGet (Uwzględnione)

Aby pracować z programem Visual Studio 2010, zobacz Instalowanie obsługi ASP.NET Web Pages 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.

uruchamianie programu Visual Studio

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 należy je ponownie załadować, aby uzyskać najnowsze zmiany.

Tworzenie witryny Razor ASP.NET 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.

    tworzenie nowej witryny 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).

    witryna 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 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.

    Intellisense

  3. Wybierz metodę GetHtml z listy, a następnie naciśnij klawisz Enter. Funkcja IntelliSense automatycznie wypeł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 po wyświetleniu w przeglądarce:

    domyślna strona 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 można było zobaczyć, co się dzieje.

    ustawianie punktu przerwania

  3. Usuń wywołanie ServerInfo.GetHtml metody i dodaj wywołanie do zmiennej @myTime w jej miejscu. 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 zostanie zatrzymana w ustawionym punkcie przerwania. Na poniższej ilustracji przedstawiono wygląd strony w edytorze z punktem przerwania (w kolorze żółtym).

    debugowanie punktu przerwania

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

    Przycisk Przechodzenie do

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

    pokaż wartość czasu

  7. Gdy skończysz badać zmienną i przechodzić przez kod, naciśnij klawisz F5, aby kontynuować uruchamianie strony bez zatrzymywania 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 MVC ASP.NET. 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ę MVC ASP.NET. Aby zapoznać się z przykładem tworzenia aplikacji MVC, zobacz Wprowadzenie z 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 .

    Karta Produkty webPI

  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.

    Opcje instalacji interfejsu WebPi

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