Udostępnij za pośrednictwem


Wprowadzenie do ASP.NET

Autor: Tom FitzMacken

W przypadku tworzenia nowych aplikacji internetowych zalecamy korzystanie z platformy Blazor.

Uwaga

Program WebMatrix nie jest już zalecany jako zintegrowane środowisko programistyczne dla usług ASP.NET Web Pages. Użyj programu Visual Studio lub Visual Studio Code.

Te wskazówki i aplikacja zawierają omówienie ASP.NET stron internetowych (w wersji 2 lub nowszej) i składni Razor, uproszczonej struktury do tworzenia dynamicznych witryn internetowych. Wprowadza również program WebMatrix, narzędzie do tworzenia stron i witryn.

Poziom: Nowy do ASP.NET stron sieci Web.
Zakładane umiejętności: HTML, podstawowe kaskadowe arkusze stylów (CSS).

Czego nauczysz się w pierwszym samouczku zestawu:

  • Czym jest technologia ASP.NET Web Pages i do czego służy.
  • Czym jest program WebMatrix.
  • Jak zainstalować wszystko.
  • Jak utworzyć witrynę internetową przy użyciu programu WebMatrix.

Omówione funkcje/technologie:

  • Instalator platformy Microsoft Web.
  • WebMatrix.
  • Strony cshtml

Mike Pope pierwotnie napisał ten samouczek. Tom FitzMacken zaktualizował go dla programu Microsoft WebMatrix 3.

Wersje oprogramowania używane w samouczku

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 3

Co należy wiedzieć?

Zakładamy, że znasz następujące poznać:

  • HTML. Nie jest wymagana żadna szczegółowa wiedza. Nie wyjaśnimy kodu HTML, ale nie będziemy również używać niczego złożonego. Udostępnimy linki do samouczków HTML, w których uważamy, że są one przydatne.
  • Kaskadowe arkusze stylów (CSS). Tak samo jak w przypadku kodu HTML.
  • Podstawowe pojęcia dotyczące bazy danych. Jeśli użyto arkusza kalkulacyjnego dla danych i posortowanych i przefiltrowanych danych, jest to poziom wiedzy, którą zwykle zakładamy dla tego zestawu samouczków.

Zakładamy również, że interesuje Cię uczenie się podstawowego programowania. ASP.NET stron sieci Web używają języka programowania o nazwie C#. Nie musisz mieć żadnego doświadczenia w programowaniu, tylko zainteresowanie nim. Jeśli kiedykolwiek wcześniej napisałeś jakikolwiek kod JavaScript na stronie internetowej, masz mnóstwo tła.

Pamiętaj, że jeśli znasz programowanie, możesz zauważyć, że ten zestaw samouczków początkowo porusza się powoli, gdy wprowadzamy nowych programistów do prędkości. Gdy przejdziemy do pierwszych kilku samouczków, będzie jednak mniej podstawowe programowanie, aby wyjaśnić, a wszystko będzie się poruszało w szybszym klipie.

Czego potrzebujesz?

Oto, co jest potrzebne:

  • Komputer z systemem Windows 8, Windows 7, Windows Server 2008 lub Windows Server 2012.
  • Połączenie internetowe na żywo.
  • Uprawnienia administratora (wymagane do procesu instalacji).

Co to jest ASP.NET stron sieci Web?

ASP.NET Web Pages to struktura, której można użyć do tworzenia dynamicznych stron sieci Web. Prosta strona internetowa HTML jest statyczna; jego zawartość jest określana przez stały znacznik HTML, który znajduje się na stronie. Strony dynamiczne, takie jak utworzone za pomocą ASP.NET stron sieci Web, umożliwiają tworzenie zawartości strony na bieżąco przy użyciu kodu.

Strony dynamiczne umożliwiają wykonywanie różnych czynności. Możesz poprosić użytkownika o wprowadzenie danych wejściowych przy użyciu formularza, a następnie zmienić sposób wyświetlania lub wyglądu strony. Możesz pobrać informacje od użytkownika, zapisać je w bazie danych, a następnie wyświetlić je później. Możesz wysłać wiadomość e-mail z witryny. Możesz wchodzić w interakcje z innymi usługami w Internecie (na przykład usługą mapowania) i tworzyć strony integrujące informacje z tych źródeł.

Co to jest program WebMatrix?

WebMatrix to narzędzie, które integruje edytor stron internetowych, narzędzie bazy danych, serwer internetowy do testowania stron i funkcje publikowania witryny internetowej w Internecie. Program WebMatrix jest bezpłatny i łatwy w instalacji i łatwy w użyciu. (Działa również w przypadku zwykłych stron HTML, a także dla innych technologii, takich jak PHP).

W rzeczywistości nie musisz używać programu WebMatrix do pracy z ASP.NET stronami sieci Web. Strony można tworzyć przy użyciu edytora tekstów, na przykład i strony testowe przy użyciu serwera internetowego, do którego masz dostęp. Jednak program WebMatrix sprawia, że wszystko jest bardzo łatwe, więc te samouczki będą używać programu WebMatrix w całym.

Informacje o tych samouczkach

Ten zestaw samouczków stanowi wprowadzenie do używania ASP.NET stron sieci Web. W tym zestawie samouczków wprowadzających jest łącznie 9 samouczków. Jest to część serii zestawów samouczków, która przenosi Cię od ASP.NET web pages początkujących do tworzenia rzeczywistych, profesjonalnych witryn internetowych.

Ten pierwszy zestaw samouczków koncentruje się na tym, jak pracować z ASP.NET stronami internetowymi. Gdy wszystko będzie gotowe, możesz pracować z dodatkowymi zestawami samouczków, które podniosą miejsce zakończenia tego samouczka i będą bardziej szczegółowo eksplorować strony sieci Web.

Celowo poszliśmy łatwo na szczegółowe wyjaśnienia. A za każdym razem, gdy coś pokażemy, na potrzeby tego samouczka zawsze wybieramy sposób, w jaki uważamy, że najłatwiej zrozumieć. W kolejnych zestawach samouczków bardziej szczegółowo przedstawiono bardziej wydajne lub bardziej elastyczne podejścia (również bardziej zabawne). Jednak te samouczki wymagają, aby najpierw zrozumieć podstawy.

Zestaw samouczków, który właśnie rozpoczęto, obejmuje te funkcje ASP.NET Web Pages:

  • Wprowadzenie i pobranie wszystkich zainstalowanych elementów. (To jest samouczek, który czytasz).
  • Podstawy programowania ASP.NET stron internetowych.
  • Tworzenie bazy danych.
  • Tworzenie i przetwarzanie formularza wejściowego użytkownika.
  • Dodawanie, aktualizowanie i usuwanie danych w bazie danych.

Co utworzysz?

Ten zestaw samouczków i kolejne obracają się wokół witryny internetowej, w której można wyświetlić listę filmów, które ci się podobają. Będziesz mieć możliwość wprowadzania filmów, edytowania ich i wyświetlania ich listy. Oto kilka stron, które utworzysz w tym zestawie samouczków. Pierwszy z nich zawiera stronę listy filmów, którą utworzysz:

Aplikacja Finshed Movie przedstawiająca listę filmów

Oto strona, która umożliwia dodawanie nowych informacji o filmie do witryny:

Zakończona aplikacja filmowa z wyświetloną stroną Dodaj film

Kolejne zestawy samouczków bazują na tym zestawie i dodają więcej funkcji, takich jak przekazywanie zdjęć, umożliwianie użytkownikom logowania się, wysyłanie wiadomości e-mail i integrowanie z mediami społecznościowymi.

Zobacz tę aplikację działającą na platformie Azure

Czy chcesz zobaczyć zakończoną witrynę działającą jako działającą aplikację internetową? Aby wdrożyć pełną wersję aplikacji na koncie platformy Azure, wystarczy kliknąć poniższy przycisk.

Przycisk funkcji wdrażania platformy Azure.

Do wdrożenia tego rozwiązania na platformie Azure potrzebne jest konto platformy Azure. Jeśli nie masz jeszcze konta, masz następujące opcje:

  • Otwórz bezpłatne konto platformy Azure — możesz uzyskać środki, których możesz użyć do wypróbowania płatnych usług platformy Azure, a nawet po ich użyciu możesz zachować konto i korzystać z bezpłatnych usług platformy Azure.
  • Aktywowanie korzyści dla subskrybentów MSDN — subskrypcja MSDN zapewnia środki na korzystanie co miesiąc z płatnych usług platformy Azure.

Instalowanie wszystkiego

Wszystko można zainstalować przy użyciu Instalatora platformy internetowej firmy Microsoft. W efekcie należy zainstalować instalatora, a następnie użyć go do zainstalowania wszystkich innych elementów.

Aby korzystać ze stron sieci Web, musisz mieć zainstalowany system Windows XP z dodatkiem SP3 lub Windows Server 2008 lub nowszym.

Na stronie Strony sieci Web witryny internetowej ASP.NET kliknij przycisk Zainstaluj.

ASP.NET witrynie sieci Web z przyciskiem

Przed zainstalowaniem programu WebMatrix zostanie wyświetlony monit o zaakceptowanie postanowień licencyjnych i zasad zachowania poufności informacji.

zaakceptuj termin, aby rozpocząć instalację

Kliknij przycisk Uruchom , aby rozpocząć instalację. (Jeśli chcesz zapisać instalatora, kliknij przycisk Zapisz , a następnie uruchom instalatora z folderu, w którym został zapisany.

Zrzut ekranu przedstawiający uruchomiony baner okna przeglądarki z wyróżnionym przyciskiem Uruchom z czerwonym prostokątem.

Zostanie wyświetlony Instalator platformy internetowej gotowy do zainstalowania programu WebMatrix. Kliknij przycisk Zainstaluj.

Zrzut ekranu instalatora platformy internetowej przedstawiający instalator macierzy sieci Web firmy Microsoft z wyróżnionym przyciskiem Zainstaluj z czerwonym prostokątem.

Proces instalacji określa, co musi zainstalować na komputerze i uruchamia proces. W zależności od tego, co dokładnie trzeba zainstalować, proces może potrwać od kilku minut do kilku minut. Wybierz pozycję Akceptuję , aby zaakceptować postanowienia licencyjne.

Witaj, WebMatrix

Po zakończeniu proces instalacji może automatycznie uruchomić program WebMatrix. Jeśli tak nie jest, w systemie Windows z menu Start uruchom program Microsoft WebMatrix.

Po pierwszym uruchomieniu programu WebMatrix masz szansę zalogować się do platformy Microsoft Azure przy użyciu konta Microsoft. Po zalogowaniu się otrzymasz 10 bezpłatnych aplikacji internetowych za pośrednictwem platformy Azure. Te bezpłatne aplikacje internetowe zapewniają wygodny sposób testowania aplikacji. Jeśli nie masz jeszcze konta platformy Azure, ale masz subskrypcję MSDN, możesz aktywować korzyści z subskrypcji MSDN. W przeciwnym razie możesz utworzyć bezpłatne konto próbne w ciągu zaledwie kilku minut. Aby uzyskać szczegółowe informacje, zobacz Bezpłatna wersja próbna platformy Azure.

Nie musisz się teraz logować, aby kontynuować pracę z tym samouczkiem. Jeśli nie zalogujesz się teraz, nadal będziesz mieć możliwość zalogowania się później. W ostatnim temacie z tej serii samouczków opisano sposób wdrażania witryny internetowej na platformie Azure, dlatego należy się zalogować, aby ukończyć ten temat.

Na tym etapie zaloguj się przy użyciu konta Microsoft lub wybierz pozycję Nie teraz w prawym dolnym rogu.

Zaloguj się

Aby rozpocząć, utworzysz pustą witrynę internetową i dodasz stronę. W późniejszym samouczku w tym zestawie będziesz grać z jednym z wbudowanych szablonów witryn internetowych.

W oknie startowym kliknij pozycję Nowy.

Ekran uruchamiania programu WebMatrix

Szablony to wstępnie utworzone pliki i strony dla różnych typów witryn internetowych. Aby wyświetlić wszystkie dostępne domyślnie szablony, wybierz opcję Galeria szablonów.

Wybieranie galerii szablonów

W oknie Szybki start wybierz pozycję Pusta witryna z grupy ASP.NET i nadaj nowej witrynie nazwę "WebPagesFilms".

Okno Szybki start programu WebMatrix z wybranym szablonem pustej witryny

Kliknij przycisk Dalej.

Jeśli zalogowałeś się do konta Microsoft, będziesz mieć możliwość utworzenia witryny na platformie Azure. Na podstawie nazwy witryny sugerowana jest domyślna nazwa WebPagesMovies.azurewebsites.net . Jednak wykrzyknik wskazuje, że ta nazwa nie jest dostępna na platformie Windows Azure. Dla uproszczenia wybierz pozycję Pomiń , aby pominąć tworzenie witryny internetowej na platformie Azure w tej chwili. W dalszej części tej serii opublikujemy witrynę na platformie Azure.

tworzenie witryny platformy Azure

Program WebMatrix tworzy i otwiera witrynę:

Nowa witryna WebPagesAdres otwarta w programie WebMatrix

U góry znajduje się pasek narzędzi Szybki dostęp i wstążka. W lewym dolnym rogu zobaczysz selektor obszaru roboczego, w którym przełączasz się między zadaniami (lokacja, pliki, bazy danych, raporty). Po prawej stronie znajduje się okienko zawartości dla edytora i raportów. W dolnej części od czasu do czasu zobaczysz pasek powiadomień dla komunikatów.

Aby dowiedzieć się więcej na temat programu WebMatrix i jego funkcji, zapoznasz się z tymi samouczkami.

Tworzenie strony sieci Web

Aby zapoznać się z programem WebMatrix i ASP.NET stronami sieci Web, utworzysz prostą stronę.

W selektorze obszaru roboczego wybierz obszar roboczy Pliki . Ten obszar roboczy umożliwia pracę z plikami i folderami. W okienku po lewej stronie zostanie wyświetlona struktura pliku witryny. Wstążka zmienia się w celu wyświetlenia zadań związanych z plikami.

Obszar roboczy pliku w programie WebMatrix

Na wstążce kliknij strzałkę w obszarze Nowy , a następnie kliknij pozycję Nowy plik.

Za pomocą polecenia

Program WebMatrix wyświetla listę typów plików. Wybierz pozycję CSHTML, a następnie w polu Nazwa wpisz "HelloWorld". Strona CSHTML to strona ASP.NET stron sieci Web.

Tworzenie nowej strony CSHTML o nazwie HelloWorld.cshtml

Kliknij przycisk OK.

Program WebMatrix tworzy stronę i otwiera ją w edytorze.

Nowa strona HelloWorld w edytorze WebMatrix

Jak widać, strona zawiera głównie zwykłe znaczniki HTML, z wyjątkiem bloku u góry, który wygląda następująco:

@{ 

}

Jest to przeznaczone do dodawania kodu, jak zobaczysz wkrótce.

Zwróć uwagę, że różne części strony — nazwy elementów, atrybuty i tekst oraz blok u góry — są w różnych kolorach. Jest to nazywane wyróżnianie składni i ułatwia przechowywanie wszystkiego jasnego. Jest to jedna z funkcji ułatwiających pracę ze stronami internetowymi w programie WebMatrix.

Dodaj zawartość dla <head> elementów i <body> , takich jak w poniższym przykładzie. (Jeśli chcesz, możesz skopiować następujący blok i zastąpić całą istniejącą stronę tym kodem).

@{

}

<!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>

Na pasku narzędzi Szybki dostęp lub w menu Plik kliknij przycisk Zapisz.

Przycisk Zapisz na pasku narzędzi Szybki dostęp programu WebMatrix

Testowanie strony

W obszarze roboczym Pliki kliknij prawym przyciskiem myszy stronę HelloWorld.cshtml, a następnie kliknij polecenie Uruchom w przeglądarce.

Uruchamianie strony przy użyciu przycisku Uruchom na wstążce WebMatrix

Program WebMatrix uruchamia wbudowany serwer internetowy (IIS Express), którego można użyć do testowania stron na komputerze. (Bez usług IIS Express w programie WebMatrix musisz opublikować stronę na serwerze sieci Web, zanim będzie można go przetestować). Strona jest wyświetlana w domyślnej przeglądarce.

Strona

Zwróć uwagę, że podczas testowania strony w programie WebMatrix adres URL w przeglądarce jest podobny do http://localhost:33651/HelloWorld.cshtml. nazwa Localhost odnosi się do serwera lokalnego, co oznacza, że strona jest obsługiwana przez serwer internetowy, który znajduje się na własnym komputerze. Jak wspomniano, program WebMatrix zawiera program serwera internetowego o nazwie IIS Express uruchamiany podczas uruchamiania strony.

Liczba po hoście lokalnym (na przykład localhost:33651) odnosi się do numeru portu na komputerze. Jest to liczba "kanału", którego używa usługa IIS Express dla tej konkretnej witryny internetowej. Numer portu jest wybierany losowo z zakresu od 1024 do 65536 podczas tworzenia witryny i różni się od każdej utworzonej witryny. (Podczas testowania własnej witryny numer portu prawie na pewno będzie inną liczbą niż 33561). Korzystając z innego portu dla każdej witryny internetowej, usługi IIS Express mogą być proste, z którymi witrynami rozmawia.

Później po opublikowaniu witryny na publicznym serwerze sieci Web nie widzisz już hosta lokalnego w adresie URL. W tym momencie zobaczysz bardziej typowy adres URL, taki jak http://myhostingsite/mywebsite/HelloWorld.cshtml lub dowolna strona. Więcej informacji na temat publikowania witryny znajdziesz w dalszej części tej serii samouczków.

Dodawanie kodu po stronie serwera

Zamknij przeglądarkę i wróć do strony w programie WebMatrix.

Dodaj wiersz do bloku kodu, aby wyglądał jak następujący kod:

@{
   var currentDateTime = DateTime.Now;
}

Jest to trochę kodu Razor. Prawdopodobnie jest jasne, że pobiera bieżącą datę i godzinę i umieszcza ją w zmiennej o nazwie currentDateTime. Więcej informacji na temat składni Razor znajdziesz w następnym samouczku.

W treści strony po elemecie <p>Hello World!</p> dodaj następujące elementy:

<p>Right now it's @currentDateTime</p>

Ten kod pobiera wartość wstawioną do zmiennej currentDateTime u góry i wstawia ją do znaczników strony. Znak @ oznacza kod ASP.NET Web Pages na stronie.

Uruchom ponownie stronę (program WebMatrix zapisuje zmiany przed uruchomieniem strony). Tym razem na stronie zostanie wyświetlona data i godzina.

Strona

Poczekaj chwilę, a następnie odśwież stronę w przeglądarce. Ekran daty i godziny jest aktualizowany.

W przeglądarce przyjrzyj się źródle strony. Wygląda tak, jak poniższe tagi:

<!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>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Zwróć uwagę, że @{ } blok u góry nie istnieje. Zwróć również uwagę, że wyświetlanie daty i godziny pokazuje rzeczywisty ciąg znaków (1/18/2012 2:49:50 PM lub cokolwiek innego), a nie @currentDateTime tak jak na stronie cshtml . Stało się tak, że po uruchomieniu strony ASP.NET przetworzył cały kod (w tym przypadku bardzo mało), który został oznaczony za pomocą @polecenia . Kod generuje dane wyjściowe i dane wyjściowe zostały wstawione do strony.

To właśnie są ASP.NET stron sieci Web

Po przeczytaniu tego ASP.NET strony sieci Web generują dynamiczną zawartość internetową, co widzieliście tutaj, jest pomysłem. Właśnie utworzona strona zawiera ten sam znacznik HTML, który był wcześniej widoczny. Może również zawierać kod, który może wykonywać różnego rodzaju zadania. W tym przykładzie wykonało to proste zadanie pobierania bieżącej daty i godziny. Jak widać, możesz przeplatać kod html w celu wygenerowania danych wyjściowych na stronie. Gdy ktoś zażąda strony cshtml w przeglądarce, ASP.NET przetwarza stronę, gdy jest ona nadal w rękach serwera internetowego. ASP.NET wstawia dane wyjściowe kodu (jeśli istnieje) na stronie jako HTML. Po zakończeniu przetwarzania kodu ASP.NET wysyła wynikową stronę do przeglądarki. Cała przeglądarka, jaką kiedykolwiek dostaje, to HTML. Oto diagram:

Koncepcyjny przepływ sposobu dynamicznego generowania kodu HTML przez ASP.NET

Pomysł jest prosty, ale istnieje wiele interesujących zadań, które można wykonać w kodzie, i istnieje wiele interesujących sposobów dynamicznego dodawania zawartości HTML do strony. Ponadto ASP.NET strony cshtml , podobnie jak każda strona HTML, mogą również zawierać kod uruchamiany w samej przeglądarce (kod JavaScript i jQuery). Poznasz wszystkie te elementy w tym zestawie samouczków i w kolejnych.

Następna

W następnym samouczku z tej serii zapoznasz się z ASP.NET programowaniem stron internetowych.

Dodatkowe zasoby

Utwórz witrynę internetową ASP.NET od podstaw. Jest to samouczek dotyczący używania programu WebMatrix (nie ASP.NET stron internetowych). Bardziej szczegółowo omówiono niektóre dodatkowe funkcje programu WebMatrix, których nie omówimy w tym zestawie samouczków.