Wprowadzenie ASP.NET stron internetowych — podstawy programowania
Autor: Tom FitzMacken
Ten samouczek zawiera omówienie sposobu programowania na stronach internetowych ASP.NET za pomocą składni Razor.
Zawartość:
- Podstawowa składnia "Razor" używana do programowania w ASP.NET Web Pages.
- Niektóre podstawowe C#, czyli język programowania, którego będziesz używać.
- Niektóre podstawowe pojęcia programistyczne dla stron sieci Web.
- Sposób instalowania pakietów (składników zawierających wstępnie utworzony kod) do użycia z witryną.
- Jak używać pomocników do wykonywania typowych zadań programistycznych .
Omówione funkcje/technologie:
- NuGet i menedżer pakietów.
- Pomocnik
Gravatar.
Ten samouczek jest przede wszystkim ćwiczeniem wprowadzającym do składni programowania, która będzie używana na potrzeby ASP.NET stron sieci Web. Poznasz składnię i kod Razor napisany w języku programowania C#. W poprzednim samouczku przedstawiono tę składnię; W tym samouczku wyjaśnimy składnię więcej.
Obiecujemy, że ten samouczek obejmuje najwięcej programowania, które zobaczysz w jednym samouczku i że jest to jedyny samouczek, który dotyczy tylko programowania. W pozostałych samouczkach w tym zestawie faktycznie utworzysz strony, które wykonują interesujące rzeczy.
Dowiesz się również o pomocnikach. Pomocnik to składnik — spakowany fragment kodu — który można dodać do strony. Pomocnik wykonuje dla Ciebie pracę, która w przeciwnym razie może być żmudna lub złożona do zrobienia ręcznie.
Tworzenie strony do odtwarzania za pomocą razor
W tej sekcji będziesz nieco grać ze składnią Razor, aby można było zrozumieć podstawową składnię.
Uruchom program WebMatrix, jeśli jeszcze nie jest uruchomiony. Użyjesz witryny internetowej utworzonej w poprzednim samouczku (Wprowadzenie do stron internetowych). Aby ponownie otworzyć witrynę, kliknij pozycję Moje witryny i wybierz kolejno pozycje WebPageFormaty:
Wybierz obszar roboczy Pliki.
Na wstążce kliknij pozycję Nowy , aby utworzyć stronę. Wybierz pozycję CSHTML i nadaj nowej stronie nazwę TestRazor.cshtml.
Kliknij przycisk OK.
Skopiuj następujące elementy do pliku, całkowicie zastępując to, co już istnieje.
Uwaga
Podczas kopiowania kodu lub znaczników z przykładów do strony wcięcie i wyrównanie może nie być takie samo jak w samouczku. Wcięcie i wyrównanie nie wpływają jednak na sposób działania kodu.
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Badanie przykładowej strony
Większość wyświetlanych elementów to zwykły kod HTML. Jednak u góry znajduje się ten blok kodu:
@{
// Working with numbers.
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings).
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects.
var rightNow = DateTime.Now;
}
Zwróć uwagę na następujące kwestie dotyczące tego bloku kodu:
- Znak @ informuje ASP.NET, że następujący kod Jest kod Razor, a nie HTML. ASP.NET będzie traktować wszystko po znaku @ jako kod, dopóki nie zostanie ponownie uruchomiony kod HTML. (W tym przypadku jest to <! DOCTYPE> , element.
- Nawiasy klamrowe ( { i } ) otaczają blok kodu Razor, jeśli kod ma więcej niż jeden wiersz. Nawiasy klamrowe informują ASP.NET, gdzie rozpoczyna się i kończy kod dla tego bloku.
- Znaki // oznaczają komentarz — czyli część kodu, który nie zostanie wykonany.
- Każda instrukcja musi kończyć się średnikiem (;). (Nie komentarze, choć.)
- Wartości można przechowywać w zmiennych, które tworzy się (deklarują) przy użyciu słowa kluczowego var. Podczas tworzenia zmiennej należy nadać jej nazwę, która może zawierać litery, cyfry i podkreślenie (_). Nazwy zmiennych nie mogą zaczynać się od liczby i nie mogą używać nazwy słowa kluczowego programowania (na przykład var).
- Ciągi znaków (na przykład "ASP.NET" i "Web Pages") są ujęte w znaki cudzysłowu. (Muszą być podwójnymi cudzysłowami). Liczby nie znajdują się w cudzysłowie.
- Odstępy poza cudzysłowami nie mają znaczenia. Podziały wierszy w większości nie mają znaczenia; Wyjątek polega na tym, że nie można podzielić ciągu w cudzysłowie między wiersze. Wcięcie i wyrównanie nie ma znaczenia.
W tym przykładzie nie jest oczywiste, że w całym kodzie jest uwzględniana wielkość liter. Oznacza to, że zmienna TheSum jest inną zmienną niż zmienne, które mogą mieć nazwę theSum lub thesum. Podobnie var jest słowem kluczowym, ale var nie jest.
Obiekty i właściwości i metody
Następnie jest wyrażenie DateTime.Now. Mówiąc prosto, data/godzina jest obiektem. Obiekt to coś, za pomocą którego można programować — stronę, pole tekstowe, plik, obraz, żądanie internetowe, wiadomość e-mail, rekord klienta itp. Obiekty mają co najmniej jedną właściwości opisujące ich cechy. Obiekt pola tekstowego ma właściwość Text (między innymi), obiekt żądania ma właściwość Url (i inne), wiadomość e-mail ma właściwość From i właściwość To itd. Obiekty mają również metody , które są "czasownikami", które mogą wykonywać. Będziesz pracować z obiektami dużo.
Jak widać w przykładzie, DateTime jest obiektem, który pozwala programować daty i godziny. Ma właściwość o nazwie Now, która zwraca bieżącą datę i godzinę.
Używanie kodu do renderowania znaczników na stronie
W treści strony zwróć uwagę na następujące kwestie:
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
Ponownie znak @ informuje ASP.NET, że poniżej znajduje się kod, a nie HTML. W znaczniku można dodać znak @ i wyrażenie kodu, a ASP.NET spowoduje renderowanie wartości tego wyrażenia bezpośrednio w tym momencie. W tym przykładzie @a będzie renderować dowolną wartość zmiennej o nazwie a, @product renderuje elementy w zmiennej o nazwie product itd.
Nie ograniczasz się jednak do zmiennych. W kilku przypadkach znak @ poprzedza wyrażenie:
- @(a*b) renderuje iloczyn dowolnego elementu w zmiennych a i b. (Operator * oznacza mnożenie).
- @(technologia + " " + produkt) renderuje wartości w technologii zmiennych i produkcie po połączeniu ich i dodaniu odstępu między. Operator (+) do łączenia ciągów jest taki sam jak operator dodawania liczb. ASP.NET zazwyczaj może powiedzieć, czy pracujesz z liczbami, czy z ciągami i wykonujesz właściwą czynność z operatorem +.
- @Request.Url Renderuje właściwość Url obiektu Request. Obiekt Request zawiera informacje o bieżącym żądaniu z przeglądarki i oczywiście właściwość Url zawiera adres URL tego bieżącego żądania.
Przykład został również zaprojektowany tak, aby pokazać, że można wykonywać pracę na różne sposoby. Obliczenia można wykonać w bloku kodu u góry, umieścić wyniki w zmiennej, a następnie renderować zmienną w adiustacji. Możesz też wykonać obliczenia w wyrażeniu bezpośrednio w znaczniku. Używane podejście zależy od tego, co robisz, i w pewnym stopniu od własnych preferencji.
Wyświetlanie kodu w akcji
Kliknij prawym przyciskiem myszy nazwę pliku, a następnie wybierz polecenie Uruchom w przeglądarce. Zostanie wyświetlona strona w przeglądarce ze wszystkimi wartościami i wyrażeniami rozpoznanymi na stronie.
Przyjrzyj się źródle w przeglądarce.
Zgodnie z oczekiwaniami w poprzednim samouczku żaden kod Razor nie znajduje się na stronie. Widoczne są rzeczywiste wartości wyświetlania. Po uruchomieniu strony faktycznie wysyłasz żądanie do serwera internetowego wbudowanego w program WebMatrix. Gdy żądanie zostanie odebrane, ASP.NET rozpozna wszystkie wartości i wyrażenia i renderuje ich wartości na stronie. Następnie wysyła stronę do przeglądarki.
Napiwek
Razor i C#
Do tej pory powiedzieliśmy, że pracujesz ze składnią Razor. To prawda, ale nie jest to kompletna historia. Rzeczywisty używany język programowania nosi nazwę C#. Język C# został utworzony przez firmę Microsoft ponad dziesięć lat temu i stał się jednym z podstawowych języków programowania do tworzenia aplikacji systemu Windows. Wszystkie reguły, które znasz, jak nazwać zmienną i jak tworzyć instrukcje itd., to w rzeczywistości wszystkie reguły języka C#.
Razor odwołuje się bardziej do małego zestawu konwencji dotyczących sposobu osadzania tego kodu na stronie. Na przykład konwencja użycia znaku @ do oznaczania kodu na stronie i użycie @{ } do osadzania bloku kodu jest aspektem Strony Razor. Pomocnicy są również uważane za część Razor. Składnia Razor jest używana w więcej miejscach niż tylko w ASP.NET web Pages. (Na przykład jest on używany w widokach ASP.NET MVC).
Wspominamy o tym, ponieważ jeśli szukasz informacji na temat programowania ASP.NET stron internetowych, znajdziesz wiele odwołań do środowiska Razor. Jednak wiele z tych odwołań nie ma zastosowania do tego, co robisz i dlatego może być mylące. A w rzeczywistości wiele pytań programistycznych naprawdę będzie dotyczyć pracy z językiem C# lub pracy z ASP.NET. Więc jeśli szukasz specjalnie informacji o Razor, możesz nie znaleźć potrzebnych odpowiedzi.
Dodawanie logiki warunkowej
Jedną z doskonałych funkcji używania kodu na stronie jest możliwość zmiany tego, co się dzieje na podstawie różnych warunków. W tej części samouczka omówisz kilka sposobów zmiany wyświetlanych na stronie.
Przykład będzie prosty i nieco zaintrygowany, abyśmy mogli skoncentrować się na logice warunkowej. Zostanie utworzona strona:
- Pokaż inny tekst na stronie w zależności od tego, czy jest wyświetlany po raz pierwszy, czy po kliknięciu przycisku w celu przesłania strony. Będzie to pierwszy test warunkowy.
- Wyświetl komunikat tylko wtedy, gdy określona wartość zostanie przekazana w ciągu zapytania adresu URL (http://...? show=true). Będzie to drugi test warunkowy.
W programie WebMatrix utwórz stronę i nadaj jej nazwę TestRazorPart2.cshtml. (Na wstążce kliknij przycisk Nowy, wybierz pozycję CSHTML, nadaj plikowi nazwę, a następnie kliknij przycisk OK.
Zastąp zawartość tej strony następującymi elementami:
@{
var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<p>@message</p>
<p><input type="submit" value="Submit" /></p>
</div>
</form>
</body>
</html>
Blok kodu u góry inicjuje zmienną o nazwie message z tekstem. W treści strony zawartość zmiennej komunikatu jest wyświetlana wewnątrz <elementu p> . Znacznik zawiera również element wejściowy> umożliwiający <utworzenie przycisku Prześlij.
Uruchom stronę, aby zobaczyć, jak działa teraz. Na razie jest to w zasadzie statyczna strona, nawet jeśli klikniesz przycisk Prześlij .
Wróć do programu WebMatrix. Wewnątrz bloku kodu dodaj następujący wyróżniony kod po wierszu, który inicjuje komunikat:
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Blok if { }
Właśnie dodane informacje były warunkiem if. W kodzie warunek if ma strukturę podobną do następującej:
if(some condition){
One or more statements here that run if the condition is true;
}
Warunek do przetestowania znajduje się w nawiasach. Musi to być wartość lub wyrażenie zwracające wartość true lub false. Jeśli warunek ma wartość true, ASP.NET uruchamia instrukcję lub instrukcje, które znajdują się wewnątrz nawiasów klamrowych. (Są to elementy logiki if-then). Jeśli warunek ma wartość false, blok kodu zostanie pominięty.
Oto kilka przykładów warunków, które można przetestować w instrukcji if:
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
Zmienne można testować względem wartości lub w wyrażeniach, używając operatora logicznego lub operatora porównania: równego (==), większego niż (), mniejszego niż (><), większego lub równego (=) i mniejszego lub równego (><=). Operator != nie jest równy — na przykład jeśli (a != 0) oznacza , że wartość nie jest równa 0.
Uwaga
Upewnij się, że operator porównania dla wartości równej (==) nie jest taki sam jak =. Operator = służy tylko do przypisywania wartości (var a=2). Jeśli połączysz te operatory, wystąpi błąd lub otrzymasz kilka dziwnych wyników.
Aby sprawdzić, czy coś jest prawdziwe, kompletna składnia to if(IsDone == true). Można jednak również użyć skrótu if(IsDone). Jeśli nie ma operatora porównania, ASP.NET zakłada, że testujesz pod kątem wartości true.
Ten! operator sam w sobie oznacza logiczne NOT. Na przykład warunek if(! IsPost) oznacza , że wartość IsPost nie jest prawdziwa.
Warunki można łączyć przy użyciu operatora logicznego AND (&&) lub logicznego OR (||). Na przykład ostatni warunek if w poprzednich przykładach oznacza , że jeśli parametr FileProcessingIsDone nie jest ustawiony na true, a displayMessage jest ustawiona na wartość false.
Blok else
Jedną z ostatnich rzeczy na temat bloków: blok if może być obserwowany przez blok else. Inny blok jest przydatny, jeśli warunek ma wartość false, musisz wykonać inny kod. Oto prosty przykład:
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
W kolejnych samouczkach z tej serii przedstawiono kilka przykładów, w których użycie innego bloku jest przydatne.
Testowanie, czy żądanie jest przesyłaniem (post)
Jest więcej, ale wróćmy do przykładu, który ma warunek if(IsPost){ ... }. IsPost jest w rzeczywistości właściwością bieżącej strony. Przy pierwszym żądaniu strony funkcja IsPost zwraca wartość false. Jeśli jednak klikniesz przycisk lub w inny sposób prześlesz stronę — oznacza to, że opublikujesz ją — funkcja IsPost zwróci wartość true. Dlatego IsPost pozwala określić, czy masz do czynienia z przesłaniem formularza. (Jeśli żądanie jest operacją GET, pod względem czasowników HTTP funkcja IsPost zwraca wartość false. Jeśli żądanie jest operacją POST, funkcja IsPost zwraca wartość true. W późniejszym samouczku będziesz pracować z formularzami wejściowymi, gdzie ten test staje się szczególnie przydatny.
Uruchom stronę. Ponieważ jest to pierwszy raz, gdy żądasz strony, zobaczysz komunikat "Jest to pierwszy raz, gdy zażądano strony". Ten ciąg to wartość, do której zainicjowano zmienną komunikatu. Istnieje test if(IsPost), ale zwraca wartość false w tej chwili, więc kod wewnątrz bloku jeśli nie zostanie uruchomiony.
Kliknij przycisk Prześlij. Strona zostanie ponownie zażądana. Tak jak poprzednio, zmienna komunikatu jest ustawiona na "Jest to pierwszy raz ...". Jednak tym razem test if(IsPost) zwraca wartość true, więc kod wewnątrz bloku jest uruchamiany. Kod zmienia wartość zmiennej komunikatu na inną wartość, która jest renderowana w adiustacji.
Teraz dodaj warunek if w adiustacji. <Poniżej elementu p> zawierającego przycisk Prześlij dodaj następujący znacznik:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Dodasz kod wewnątrz znaczników, więc musisz zacząć od @. Następnie test jest podobny do tego, który został dodany wcześniej w bloku kodu. Jednak wewnątrz nawiasów klamrowych dodajesz zwykły kod HTML — przynajmniej jest to zwykłe, dopóki nie osiągnie @DateTime.Nowwartości . Jest to kolejny trochę kodu Razor, więc ponownie musisz dodać @ przed nim.
W tym miejscu można dodać warunki zarówno w bloku kodu u góry, jak i w znaczniku. Jeśli używasz warunku if w treści strony, wiersze wewnątrz bloku mogą być znacznikami lub kodem. W takim przypadku i tak jak to prawda w dowolnym momencie mieszasz znaczniki i kod, musisz użyć znaku @, aby wyjaśnić, ASP.NET, gdzie jest kod.
Uruchom stronę i kliknij pozycję Prześlij. Tym razem nie tylko zobaczysz inny komunikat po przesłaniu ("Teraz przesłano ..."), ale zostanie wyświetlony nowy komunikat z listą daty i godziny.
Testowanie wartości ciągu zapytania
Jeszcze jeden test. Tym razem dodasz blok if, który testuje wartość o nazwie show, która może zostać przekazana w ciągu zapytania. (W następujący sposób: http://localhost:43097/TestRazorPart2.cshtml?show=true) Zmienisz stronę tak, aby była wyświetlana wiadomość ("Jest to pierwszy raz ...", itp.) jest wyświetlana tylko wtedy, gdy wartość show ma wartość true.
W dolnej części (ale wewnątrz) bloku kodu w górnej części strony dodaj następujące elementy:
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Kompletny blok kodu wygląda teraz podobnie do poniższego przykładu. (Pamiętaj, że podczas kopiowania kodu na stronę wcięcie może wyglądać inaczej. Nie ma to jednak wpływu na sposób działania kodu).
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
Nowy kod w bloku inicjuje zmienną o nazwie showMessage na false. Następnie wykonuje test if, aby wyszukać wartość w ciągu zapytania. Podczas pierwszego żądania strony ma on adres URL podobny do następującego:
http://localhost:43097/TestRazorPart2.cshtml
Kod określa, czy adres URL zawiera zmienną o nazwie show w ciągu zapytania, taką jak ta wersja adresu URL:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Sam test analizuje właściwość QueryString obiektu Request. Jeśli ciąg zapytania zawiera element o nazwie show, a jeśli ten element jest ustawiony na wartość true, jeśli blok jest uruchamiany i ustawia zmienną showMessage na true.
Jest tu sztuczka, jak widać. Podobnie jak nazwa mówi, ciąg zapytania jest ciągiem. Można jednak przetestować tylko wartość true i false, jeśli testowane wartości to wartość logiczna (prawda/fałsz). Zanim będzie można przetestować wartość zmiennej show w ciągu zapytania, musisz przekonwertować ją na wartość logiczną. To właśnie robi metoda AsBool — pobiera ciąg jako dane wejściowe i konwertuje go na wartość logiczną. Oczywiście, jeśli ciąg ma wartość "true", metoda AsBool konwertuje tę wartość na true. Jeśli wartość ciągu jest niczym innym, funkcja AsBool zwraca wartość false.
Napiwek
Typy danych i metody As()
Do tej pory mówiliśmy tylko, że podczas tworzenia zmiennej używasz słowa kluczowego var. To nie jest jednak cała historia. Aby manipulować wartościami — aby dodać liczby lub połączyć ciągi albo porównać daty lub przetestować dla wartości true/false — C# musi pracować z odpowiednią wewnętrzną reprezentacją wartości. Język C# zazwyczaj może ustalić, jaka powinna być ta reprezentacja (czyli typ danych) na podstawie tego, co robisz z wartościami. Teraz, a potem jednak, nie może to zrobić. Jeśli nie, musisz pomóc, jawnie wskazując sposób reprezentowania danych w języku C#. Metoda AsBool to robi — informuje C# o tym, że wartość ciągu "true" lub "false" powinna być traktowana jako wartość logiczna. Podobne metody istnieją, aby reprezentować ciągi jako inne typy, jak również, takie jak AsInt (traktowane jako liczba całkowita), AsDateTime (traktuj jako datę/godzinę), AsFloat (traktuj jako liczbę zmiennoprzecinkową) itd. Jeśli używasz tych metod As( ), jeśli język C# nie może reprezentować wartości ciągu zgodnie z żądaniem, zostanie wyświetlony błąd.
W znacznikach strony usuń lub oznacz ten element jako komentarz (tutaj jest wyświetlany komentarz):
<!-- <p>@message</p> -->
W miejscu, w którym usunięto ten tekst lub oznaczono go jako komentarz, dodaj następujące elementy:
@if(showMessage) {
<p>@message</p>
}
Test if mówi, że jeśli zmienna showMessage ma wartość true, renderuj <element p> z wartością zmiennej komunikatu.
Podsumowanie logiki warunkowej
Jeśli nie jesteś całkowicie pewien, co właśnie zrobiłeś, oto podsumowanie.
- Zmienna komunikatu jest inicjowana do ciągu domyślnego ("Jest to pierwszy raz ...").
- Jeśli żądanie strony jest wynikiem przesłania (post), wartość wiadomości zostanie zmieniona na "Teraz przesłano ..."
- Zmienna showMessage jest inicjowana na wartość false.
- Jeśli ciąg zapytania zawiera wartość ?show=true, zmienna showMessage jest ustawiona na wartość true.
- W znaczniku, jeśli showMessage ma wartość true, element p> jest renderowany, <który pokazuje wartość komunikatu. (Jeśli funkcja showMessage ma wartość false, nic nie jest renderowane w tym momencie w znacznikach).
- W znaczniku, jeśli żądanie jest post, element p> jest renderowany, <który wyświetla datę i godzinę.
Uruchom stronę. Nie ma komunikatu, ponieważ funkcja showMessage ma wartość false, więc w znaczniku test if(showMessage) zwraca wartość false.
Kliknij przycisk Prześlij. Zostanie wyświetlona data i godzina, ale nadal nie ma komunikatu.
W przeglądarce przejdź do pola Adres URL i dodaj następujące polecenie na końcu adresu URL: ?show=true, a następnie naciśnij Enter.
Strona zostanie ponownie wyświetlona. (Ponieważ zmieniono adres URL, jest to nowe żądanie, a nie przesyłanie). Kliknij ponownie przycisk Prześlij . Komunikat jest wyświetlany ponownie, podobnie jak data i godzina.
W adresie URL zmień wartość ?show=true na ?show=false i naciśnij Enter. Ponownie prześlij stronę. Strona jest z powrotem do sposobu rozpoczęcia — brak komunikatu.
Jak wspomniano wcześniej, logika tego przykładu jest nieco zawężona. Jeśli jednak pojawi się wiele stron i zajmie to co najmniej jedną z formularzy, które zostały tu wyświetlone.
Instalowanie pomocnika (wyświetlanie obrazu Gravatar)
Niektóre zadania, które często chcą wykonywać na stronach internetowych, wymagają dużo kodu lub wymagają dodatkowej wiedzy. Przykłady: wyświetlanie wykresu dla danych; umieszczenie przycisku "Lubię to" na facebooku na stronie; wysyłanie wiadomości e-mail z witryny internetowej; przycinanie lub zmienianie rozmiaru obrazów; używanie PayPal dla witryny. Aby ułatwić wykonywanie tego rodzaju czynności, ASP.NET web Pages umożliwia korzystanie z pomocników. Pomocnicy to składniki instalowane dla lokacji, które umożliwiają wykonywanie typowych zadań przy użyciu zaledwie kilku wierszy kodu Razor.
ASP.NET strony sieci Web mają wbudowane kilka pomocników. Jednak wiele pomocników jest dostępnych w pakietach (dodatki), które są udostępniane przy użyciu menedżera pakietów NuGet. Pakiet NuGet umożliwia wybranie pakietu do zainstalowania, a następnie zadbanie o wszystkie szczegóły instalacji.
W tej części samouczka zainstalujesz pomocnika, który umożliwia wyświetlenie obrazu Gravatara ("globalnie rozpoznawanego awatara"). Poznasz dwie rzeczy. Jednym z nich jest znalezienie i zainstalowanie pomocnika. Dowiesz się również, jak pomocnik ułatwia wykonywanie czegoś, co w przeciwnym razie trzeba zrobić przy użyciu wielu kodu, który trzeba by napisać samodzielnie.
Możesz zarejestrować własny Gravatar na stronie internetowej Gravatar pod adresem http://www.gravatar.com/, ale nie jest niezbędne, aby utworzyć konto Gravatar w celu wykonania tej części samouczka.
W programie WebMatrix kliknij przycisk NuGet .
Spowoduje to uruchomienie menedżera pakietów NuGet i wyświetlenie dostępnych pakietów. (Nie wszystkie pakiety są pomocnikami; niektóre dodają funkcje do programu WebMatrix, niektóre są dodatkowymi szablonami itd.). Może zostać wyświetlony komunikat o błędzie dotyczący niezgodności wersji. Ten komunikat o błędzie można zignorować, klikając przycisk OK i przechodząc do tego samouczka.
W polu wyszukiwania wprowadź "asp.net pomocników". NuGet wyświetla pakiety zgodne z terminami wyszukiwania.
Biblioteka ASP.NET Web Helpers zawiera kod, który upraszcza wiele typowych zadań, w tym korzystanie z obrazów Gravatar. Wybierz pakiet biblioteki ASP.NET Web Helpers Library, a następnie kliknij przycisk Zainstaluj, aby uruchomić instalatora. Po wyświetleniu monitu o zainstalowanie pakietu wybierz pozycję Tak , a następnie zaakceptuj warunki ukończenia instalacji.
To wszystko. Narzędzie NuGet pobiera i instaluje wszystkie elementy, w tym wszelkie dodatkowe składniki, które mogą być wymagane (zależności).
Jeśli z jakiegoś powodu trzeba odinstalować pomocnika, proces jest bardzo podobny. Kliknij przycisk NuGet, kliknij kartę Zainstalowane i wybierz pakiet, który chcesz odinstalować.
Używanie pomocnika na stronie
Teraz użyjesz właśnie zainstalowanego pomocnika. Proces dodawania pomocnika do strony jest podobny dla większości pomocników.
W programie WebMatrix utwórz stronę i nadaj jej nazwę GravatarTest.cshml. (Tworzysz specjalną stronę do testowania pomocnika, ale możesz użyć pomocników na dowolnej stronie w witrynie).
<Wewnątrz elementu body> dodaj <element div>. <Wewnątrz elementu div> wpisz następujące polecenie:
@Gravatar.
Znak @ jest tym samym znakiem, którego używano do oznaczania kodu Razor. Gravatar to obiekt pomocnika, z którym pracujesz.
Gdy tylko wpiszesz kropkę (.), program WebMatrix wyświetla listę metod (funkcji), które udostępnia pomocnik Gravatar:
Ta funkcja jest znana jako IntelliSense. Pomaga to w kodzie, dostarczając odpowiednie kontekstowo opcje. Funkcja IntelliSense współpracuje z kodami HTML, CSS, ASP.NET, JavaScript i innymi językami obsługiwanymi w programie WebMatrix. Jest to kolejna funkcja, która ułatwia tworzenie stron internetowych w programie WebMatrix.
Naciśnij G na klawiaturze i zobaczysz, że funkcja IntelliSense znajduje metodę GetHtml. Naciśnij Tab. Funkcja IntelliSense wstawia wybraną metodę (GetHtml). Wpisz otwarty nawias i zwróć uwagę, że nawias zamykający jest dodawany automatycznie. Wpisz swój adres e-mail w cudzysłowie między dwoma nawiasami. Jeśli masz konto Gravatar, twoje zdjęcie profilowe zostanie zwrócone. Jeśli nie masz konta Gravatar, zostanie zwrócony obraz domyślny. Po zakończeniu wiersz wygląda następująco:
@Gravatar.GetHtml("john@contoso.com")
Teraz wyświetl stronę w przeglądarce. Obraz lub obraz domyślny jest wyświetlany w zależności od tego, czy masz konto Gravatar.
Aby dowiedzieć się, co robi pomocnik, wyświetl źródło strony w przeglądarce. Wraz z kodem HTML, który znajduje się na stronie, zostanie wyświetlony element obrazu zawierający identyfikator. Jest to kod renderowany przez pomocnika na stronie w miejscu, w którym znajduje @Gravatar.GetHtmlsię element . Pomocnik wziął podane informacje i wygenerował kod, który rozmawia bezpośrednio z Gravatar w celu odzyskania poprawnego obrazu dla podanego konta.
Metoda GetHtml umożliwia również dostosowanie obrazu przez podanie innych parametrów. Poniższy kod pokazuje, jak zażądać, aby obraz miał szerokość i wysokość 40 pikseli i używa określonego obrazu domyślnego o nazwie wavatar , jeśli określone konto nie istnieje.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Ten kod generuje wynik podobny do poniższego (obraz domyślny będzie się losowo różnić).
Następna
Aby skrócić ten samouczek, musieliśmy skupić się tylko na kilku podstawach. Oczywiście jest o wiele więcej do Razor i C#. Aby dowiedzieć się więcej, zapoznasz się z tymi samouczkami. Jeśli chcesz dowiedzieć się więcej na temat aspektów programowania Razor i C# w tej chwili, możesz przeczytać bardziej szczegółowe wprowadzenie tutaj: Wprowadzenie do ASP.NET programowania internetowego przy użyciu składni Razor.
W następnym samouczku przedstawiono pracę z bazą danych. W tym samouczku rozpoczniesz tworzenie przykładowej aplikacji, która umożliwia wyświetlenie listy ulubionych filmów.
Kompletna lista dla strony TestRazor
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Kompletna lista dla strony TestRazorPart2
@{
var message = "This is the first time you've requested the page.";
if (IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if (Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<!--<p>@message</p>-->
@if(showMessage){
<p>@message</p>
}
<p><input type="submit" value="Submit" /></p>
@if (IsPost) {
<p>You submitted the page at @DateTime.Now</p>
}
</div>
</form>
</body>
</html>
Kompletna lista dla strony GravatarTest
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
@Gravatar.GetHtml("john@contoso.com")
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
</div>
</body>
</html>