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:

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

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.

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.

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

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.

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

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.

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.

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.

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

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.

Program WebMatrix tworzy i otwiera witrynę:

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.

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

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.

Kliknij przycisk OK.

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

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.

Testowanie strony

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

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.

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.

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:

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.

Dalej