Úvod k webovým stránkám ASP.NET – základy programování
Tom FitzMacken
V tomto kurzu se dozvíte, jak programovat ve webových stránkách ASP.NET pomocí syntaxe Razor.
Naučíte se:
- Základní syntaxe Razor, kterou používáte k programování ve webových stránkách ASP.NET.
- Jedná se o základní jazyk C#, který použijete v programovacím jazyce.
- Některé základní koncepty programování pro webové stránky.
- Postup instalace balíčků (součástí obsahujících předem připravený kód) pro použití s vaší lokalitou
- Jak používat pomocné rutiny k provádění běžných programovacích úloh.
Funkce a technologie probírané:
- NuGet a správce balíčků.
- Pomocná rutina
Gravatar.
Tento kurz je primárně cvičením, které vás seznámí s programovací syntaxí, kterou použijete pro ASP.NET webových stránek. Seznámíte se se syntaxí Razor a kódem napsaný v programovacím jazyce C#. V předchozím kurzu jste získali představu o této syntaxi; v tomto kurzu vysvětlíme syntaxi podrobněji.
Slibujeme, že tento kurz zahrnuje většinu programování, které uvidíte v jednom kurzu, a že je to jediný kurz, který se týká pouze programování. Ve zbývajících kurzech v této sadě ve skutečnosti vytvoříte stránky, které dělají zajímavé věci.
Dozvíte se také o pomocných rutinách. Pomocná rutina je komponenta – zabalená část kódu – kterou můžete přidat na stránku. Pomocná rutina provádí práci za vás, která by jinak mohla být zdlouhavá nebo složitá.
Vytvoření stránky pro přehrání pomocí Razoru
V této části si trochu pohrajete s Razorem, abyste získali představu o základní syntaxi.
Spusťte WebMatrix, pokud ještě není spuštěný. Použijete web, který jste vytvořili v předchozím kurzu (Začínáme s webovými stránkami). Pokud ho chcete znovu otevřít, klikněte na Osobní weby a zvolte WebPageMovies:
Vyberte pracovní prostor Soubory.
Na pásu karet klikněte na Nový a vytvořte stránku. Vyberte CSHTML a pojmenujte novou stránku TestRazor.cshtml.
Klikněte na OK.
Zkopírujte do souboru následující položky a úplně nahraďte, co tam už je.
Poznámka:
Při kopírování kódu nebo značek z příkladů na stránku nemusí být odsazení a zarovnání stejné jako v kurzu. Odsazení a zarovnání ale nemá vliv na to, jak se kód spustí.
@{
// 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>
Zkoumání ukázkové stránky
Většina toho, co vidíte, je běžný kód HTML. V horní části je ale tento blok kódu:
@{
// 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;
}
Všimněte si následujících věcí o tomto bloku kódu:
- Znak @ říká ASP.NET, že to, co následuje, je kód Razor, nikoli HTML. ASP.NET bude zacházet se vším po znaku @ jako s kódem, dokud znovu neběží do nějakého HTML. (V tomto případě je to ! < DOCTYPE> – element.
- Složené závorky ( { a } ) uzavře blok kódu Razor, pokud má kód více než jeden řádek. Složené závorky říkají ASP.NET, kde začíná a končí kód pro daný blok.
- Znaky // označují komentář – to znamená část kódu, která se nespustí.
- Každý příkaz musí končit středníkem (;)). (Ale ne komentáře.)
- Hodnoty můžete uložit do proměnných, které vytvoříte (deklarujete) s klíčovým slovem var. Když vytvoříte proměnnou, pojmenujete ji, která může obsahovat písmena, číslice a podtržítka (_). Názvy proměnných nemůžou začínat číslem a nemůžou použít název programovacího klíčového slova (například var).
- Řetězce znaků (například "ASP.NET" a "Webové stránky") uzavřete do uvozovek. (Musí se jednat o dvojité uvozovky.) Čísla nejsou v uvozovkách.
- Prázdné znaky mimo uvozovky nezáleží. Na zalomení řádků většinou nezáleží; Výjimkou je, že řetězec nemůžete rozdělit do uvozovek napříč řádky. Odsazení a zarovnání nezáleží.
Z tohoto příkladu není zřejmé, že se rozlišují velká a malá písmena ve všech kódech. To znamená, že proměnná TheSum je jiná proměnná než proměnné, které mohou být pojmenovány theSum nebo thesum. Podobně var je klíčové slovo, ale Var není.
Objekty a vlastnosti a metody
Pak je výraz DateTime.Now. Jednoduše řečeno, DateTime je objekt. Objekt je věc, kterou můžete programovat pomocí stránky, textového pole, souboru, obrázku, webové žádosti, e-mailové zprávy, záznamu zákazníka atd. Objekty mají jednu nebo více vlastností , které popisují jejich vlastnosti. Objekt textového pole má vlastnost Text (mimo jiné), objekt požadavku má vlastnost Url (a další), e-mailová zpráva má vlastnost From a To atd. Objekty mají také metody , které mohou provádět "příkazy". Budete moc pracovat s objekty.
Jak vidíte v příkladu, DateTime je objekt, který umožňuje programovat data a časy. Má vlastnost s názvem Now, která vrací aktuální datum a čas.
Použití kódu k vykreslení revizí na stránce
V textu stránky si všimněte těchto věcí:
<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>
Znak @ opět říká ASP.NET, že to, co následuje, je kód, nikoli HTML. V kódu můžete přidat znak @ následovaný výrazem kódu a ASP.NET vykreslí hodnotu tohoto výrazu přímo v tomto okamžiku. V příkladu se vykreslí jakákoli @a hodnota proměnné s názvem a, @product vykreslí cokoli, co je v proměnné pojmenované součinu atd.
Nejste ale omezeni na proměnné. V několika případech znak @ předchází výrazu:
- @(a*b) vykreslí součin všeho, co je v proměnných a a b. (Operátor * znamená násobení.)
- @(technologie + " " + součin) vykreslí hodnoty v technologii proměnných a produktu po zřetězení a přidání mezery mezi nimi. Operátor (+) pro zřetězení řetězců je stejný jako operátor pro sčítání čísel. ASP.NET obvykle můžete zjistit, jestli pracujete s čísly nebo s řetězci, a provedete správnou věc pomocí operátoru + .
- @Request.Url vykreslí vlastnost Url objektu Request. Objekt Request obsahuje informace o aktuálním požadavku z prohlížeče a samozřejmě vlastnost Url obsahuje adresu URL tohoto aktuálního požadavku.
Příklad je také navržený tak, aby vám ukázal, že můžete pracovat různými způsoby. Výpočty můžete provádět v bloku kódu v horní části, vložit výsledky do proměnné a pak proměnnou vykreslit v kódu. Nebo můžete provádět výpočty ve výrazu přímo v revizích. Způsob, který používáte, závisí na tom, co děláte, a v určitém rozsahu na vlastní preference.
Zobrazení kódu v akci
Klikněte pravým tlačítkem myši na název souboru a pak zvolte Spustit v prohlížeči. Zobrazí se stránka v prohlížeči se všemi hodnotami a výrazy vyřešenými na stránce.
Podívejte se na zdroj v prohlížeči.
Jak očekáváte z vašeho prostředí v předchozím kurzu, žádný kód Razor není na stránce. Vše, co vidíte, jsou skutečné zobrazované hodnoty. Když spustíte stránku, ve skutečnosti vytváříte požadavek na webový server, který je integrovaný do nástroje WebMatrix. Po přijetí požadavku ASP.NET přeloží všechny hodnoty a výrazy a vykresluje jejich hodnoty na stránku. Potom odešle stránku do prohlížeče.
Tip
Razor a C#
Až teď jsme řekli, že pracujete se syntaxí Razor. To je pravda, ale není to kompletní příběh. Skutečný programovací jazyk, který používáte, se nazývá C#. Jazyk C# vytvořil Microsoft před deseti lety a stal se jedním z primárních programovacích jazyků pro vytváření aplikací pro Windows. Všechna pravidla, která jste viděli o tom, jak pojmenovat proměnnou a jak vytvářet příkazy atd., jsou ve skutečnosti všechna pravidla jazyka C#.
Razor odkazuje konkrétněji na malou sadu konvencí, jak tento kód vložíte na stránku. Například konvence použití @ k označení kódu na stránce a použití @{ } k vložení bloku kódu je aspekt Razor stránky. Pomocné rutiny jsou také považovány za součást Razoru. Syntaxe Razor se používá na více místech než jen na webových stránkách ASP.NET. (Používá se například také v zobrazeních MVC ASP.NET.)
Zmíníme to, protože pokud hledáte informace o programování ASP.NET webových stránkách, najdete spoustu odkazů na Razor. Spousta těchto odkazů se ale nevztahuje na to, co děláte, a proto může být matoucí. A ve skutečnosti mnoho vašich programovacích otázek bude ve skutečnosti pracovat s jazykem C# nebo pracovat s ASP.NET. Takže pokud hledáte konkrétně informace o Razoru, možná nenajdete potřebné odpovědi.
Přidání některé podmíněné logiky
Jednou z skvělých funkcí použití kódu na stránce je, že můžete změnit, co se stane na základě různých podmínek. V této části kurzu si pohrajete s některými způsoby, jak změnit, co se na stránce zobrazuje.
Příklad bude jednoduchý a poněkud nepomáhodný, abychom se mohli soustředit na podmíněnou logiku. Stránka, kterou vytvoříte, provede toto:
- Zobrazit na stránce jiný text v závislosti na tom, jestli se stránka zobrazuje poprvé, nebo jestli jste klikli na tlačítko pro odeslání stránky. To bude první podmíněný test.
- Zobrazí se zpráva pouze v případě, že je v řetězci dotazu adresy URL předána určitá hodnota (http://...? show=true). To bude druhý podmíněný test.
V nástroji WebMatrix vytvořte stránku a pojmenujte ji TestRazorPart2.cshtml. (Na pásu karet klikněte na Nový, zvolte CSHTML, pojmenujte soubor a klepněte na tlačítko OK.)
Obsah této stránky nahraďte následujícím kódem:
@{
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 kódu v horní části inicializuje proměnnou pojmenovanou zprávu s určitým textem. V těle stránky se obsah proměnné zprávy zobrazí uvnitř <prvku p> . Kód obsahuje <také vstupní> prvek pro vytvoření tlačítka Submit .
Spusťte stránku a podívejte se, jak teď funguje. Prozatím se jedná o statickou stránku, i když kliknete na tlačítko Odeslat .
Vraťte se na WebMatrix. Do bloku kódu přidejte následující zvýrazněný kód za řádek, který inicializuje zprávu:
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Blok if { }
To, co jste právě přidali, byla podmínka if. V kódu má podmínka if strukturu takto:
if(some condition){
One or more statements here that run if the condition is true;
}
Podmínka, která se má testovat, je v závorkách. Musí to být hodnota nebo výraz, který vrací hodnotu true nebo false. Pokud je podmínka pravdivá, ASP.NET spustí příkaz nebo příkazy, které jsou uvnitř složených závorek. (Jedná se o část logiky if-then .) Pokud je podmínka nepravda, blok kódu se přeskočí.
Tady je několik příkladů podmínek, které můžete testovat v příkazu if:
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
Proměnné můžete testovat s hodnotami nebo výrazy pomocí logického operátoru nebo relačního operátoru: rovná se (==), větší než (>), menší než (<), větší než nebo rovno (>=) a menší než nebo rovno (<=). Operátor != znamená, že se nerovná – například pokud(a != 0) znamená , že není rovno 0.
Poznámka:
Nezapomeňte si všimnout, že relační operátor rovná se (==) není stejný jako =. Operátor = slouží pouze k přiřazení hodnot (var a=2). Pokud tyto operátory zkombinujete, zobrazí se chyba nebo se zobrazí nějaké podivné výsledky.
Pokud chcete otestovat, jestli je něco pravdivého, je úplná syntaxe if(IsDone == true). Můžete ale také použít zástupce if(IsDone). Pokud neexistuje žádný relační operátor, ASP.NET předpokládá, že testujete hodnotu true.
Ten! operátor sám o sobě znamená logickou NE. Podmínka if(! IsPost) znamená , že pokud IsPost není pravdivý.
Podmínky můžete kombinovat pomocí logického operátoru AND (&&&) nebo logického operátoru OR (||). Například poslední z podmínek if v předchozích příkladech znamená , že pokud FileProcessingIsDone není nastavena na true AND displayMessage je nastavena na false.
Blok Else
Poslední věc týkající se bloků: blok if může následovat za blokem else. Další blok je užitečný, když je podmínka nepravda, musíte spustit jiný kód. Tady je jednoduchý příklad:
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
Některé příklady najdete v dalších kurzech v této sérii, kde je použití jiného bloku užitečné.
Testování, jestli je žádost odesláním (příspěvek)
Existuje více, ale pojďme se vrátit k příkladu, který má podmínku if(IsPost){ ... }. IsPost je ve skutečnosti vlastností aktuální stránky. Při prvním vyžádání stránky vrátí Funkce IsPost hodnotu false. Pokud však kliknete na tlačítko nebo jinak odešlete stránku , tj. publikujete ji – IsPost vrátí hodnotu true. IsPost vám umožňuje určit, jestli se zabýváte odesláním formuláře. (Pokud jde o příkazy HTTP, pokud je požadavek operace GET, vrátí IsPost hodnotu false. Pokud je požadavek operací POST, vrátí IsPost hodnotu true.) V pozdějším kurzu budete pracovat se vstupními formuláři, kde se tento test stane zvlášť užitečným.
Spusťte stránku. Vzhledem k tomu, že se jedná o první žádost o stránku, zobrazí se text "Toto je poprvé, co jste požádali o stránku". Tento řetězec je hodnota, na kterou jste inicializovali proměnnou zprávy. Existuje test if(IsPost), který ale v tuto chvíli vrátí hodnotu false, takže kód uvnitř bloku if se nespustí.
Klikněte na tlačítko Odeslat . Stránka se znovu vyžádá. Stejně jako předtím je proměnná zprávy nastavená na "Toto je poprvé...". Tentokrát ale test if(IsPost) vrátí hodnotu true, takže kód uvnitř bloku, pokud se spustí. Kód změní hodnotu proměnné zprávy na jinou hodnotu, což je to, co se v kódu vykresluje.
Teď do revizí přidejte podmínku if. <Pod element p>, který obsahuje tlačítko Submit, přidejte následující kód:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Přidáváte kód do revizí, takže musíte začít znakem @. Pak je test podobný testu, který jste přidali dříve v bloku kódu. Uvnitř složených závorek ale přidáváte běžný kód HTML – alespoň je to běžné, dokud se nedostane na @DateTime.Now. Toto je další trochu kódu Razor, takže znovu musíte přidat @ před něj.
Tady je bod, který můžete přidat, pokud podmínky v bloku kódu v horní části i v kódu. Pokud v textu stránky použijete podmínku if, můžou být řádky uvnitř bloku kódem nebo kódem. V takovém případě a stejně jako pravda, kdykoli směšujete kód a kód, musíte použít znak @, aby bylo jasné, že ASP.NET, kde je kód.
Spusťte stránku a klikněte na Odeslat. Tentokrát se při odeslání zobrazí nejen jiná zpráva ("Nyní jste odeslali..."), ale zobrazí se nová zpráva se seznamem data a času.
Testování hodnoty řetězce dotazu
Ještě jeden test. Tentokrát přidáte blok if, který otestuje pojmenovanou hodnotu, která může být předána v řetězci dotazu. (Takto: http://localhost:43097/TestRazorPart2.cshtml?show=true) Stránku změníte tak, aby se zobrazovaná zpráva ("Toto je poprvé..."atd.) zobrazena pouze v případě, že hodnota zobrazení je pravdivá.
V dolní části (ale uvnitř) bloku kódu v horní části stránky přidejte následující:
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Celý blok kódu teď vypadá jako v následujícím příkladu. (Nezapomeňte, že když kód zkopírujete na stránku, může odsazení vypadat jinak. To ale nemá vliv na to, jak se kód spouští.)
@{
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;
}
}
Nový kód v bloku inicializuje proměnnou s názvem showMessage na false. Pak provede test, který vyhledá hodnotu v řetězci dotazu. Při prvním požadavku na stránku má adresa URL podobná této:
http://localhost:43097/TestRazorPart2.cshtml
Kód určuje, zda adresa URL obsahuje proměnnou s názvem show v řetězci dotazu, jako je tato verze adresy URL:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Samotný test se podívá na QueryString vlastnost Request objektu. Pokud řetězec dotazu obsahuje položku s názvem show a pokud je tato položka nastavena na hodnotu true, blok if se spustí a nastaví proměnnou showMessage na true.
Tady je trik, jak vidíte. Stejně jako název říká, řetězec dotazu je řetězec. Pokud je však hodnota, kterou testujete, logická hodnota (true/false), můžete testovat pouze hodnotu true a false. Než budete moct otestovat hodnotu proměnné show v řetězci dotazu, musíte ji převést na logickou hodnotu. To je to, co AsBool metoda dělá – jako vstup vezme řetězec a převede ho na logickou hodnotu. Jasně, pokud řetězec je "true", AsBool metoda převede tuto hodnotu na true. Pokud je hodnota řetězce cokoli jiného, vrátí AsBool hodnotu false.
Tip
Datové typy a metody As()
Zatím jsme řekli, že když vytvoříte proměnnou, použijete klíčové slovo var. To ale není celý příběh. Aby bylo možné manipulovat s hodnotami – pro sčítání čísel nebo zřetězení řetězců nebo porovnání kalendářních dat nebo testování hodnoty true/false – jazyk C# musí pracovat s odpovídající interní reprezentací hodnoty. Jazyk C# obvykle dokáže zjistit, co má být toto vyjádření (to znamená typ dat) na základě toho, co s hodnotami děláte. A pak to ale nejde. Pokud ne, musíte pomoct tím, že explicitně uvedete, jak by jazyk C# měl představovat data. AsBool metoda to dělá – říká C#, že řetězcová hodnota "true" nebo "false" by měla být považována za logickou hodnotu. Existují podobné metody, které představují řetězce jako jiné typy, jako je AsInt (považuje se za celé číslo), AsDateTime (považuje se za datum a čas), AsFloat (považuje se za číslo s plovoucí desetinnou čárkou) atd. Pokud použijete tyto metody As( ), pokud jazyk C# nemůže reprezentovat řetězcovou hodnotu, jak je požadováno, zobrazí se chyba.
V kódu stránky odeberte nebo okomentujte tento prvek (tady je zobrazený komentář):
<!-- <p>@message</p> -->
Na místo, kam jste tento text odebrali nebo zakomentovali, přidejte následující:
@if(showMessage) {
<p>@message</p>
}
Pokud test říká, že pokud je proměnná showMessage pravdivá, vykreslujte <prvek p> s hodnotou proměnné zprávy.
Shrnutí podmíněné logiky
Pokud si nejste úplně jistí, co jste právě udělali, tady je souhrn.
- Proměnná zprávy se inicializuje na výchozí řetězec ("Toto je poprvé...").
- Pokud je žádost o stránku výsledkem odeslání (příspěvku), hodnota zprávy se změní na "Nyní jste odeslali..."
- Proměnná showMessage je inicializována na false.
- Pokud řetězec dotazu obsahuje ?show=true, proměnná showMessage je nastavena na true.
- V kódu, pokud showMessage je true, <p> element je vykreslen, který zobrazuje hodnotu zprávy. (Pokud je showMessage false, nic se v tomto okamžiku v kódu nevykreslí.)
- Pokud je požadavek v kódu příspěvek, vykreslí se prvek p>, <který zobrazí datum a čas.
Spusťte stránku. Neexistuje žádná zpráva, protože showMessage je false, takže v revizí test if(showMessage) vrátí hodnotu false.
Klikněte na Odeslat. Zobrazí se datum a čas, ale stále žádná zpráva.
V prohlížeči přejděte do pole adresy URL a na konec adresy URL přidejte následující: ?show=true a stiskněte Enter.
Stránka se znovu zobrazí. (Protože jste změnili adresu URL, jedná se o nový požadavek, nikoli o odeslání.) Znovu klikněte na Odeslat . Zpráva se znovu zobrazí, stejně jako datum a čas.
V adrese URL změňte ?show=true na ?show=false a stiskněte Enter. Odešlete stránku znovu. Stránka se vrací k tomu, jak jste začali – žádná zpráva.
Jak jsme si poznamenali dříve, logika tohoto příkladu je trochu kontrakce. Pokud se ale objeví na mnoha stránkách, bude to trvat jednu nebo více formulářů, které jste zde viděli.
Instalace pomocné rutiny (zobrazení obrázku Gravatar)
Některé úkoly, které lidé často chtějí na webových stránkách dělat, vyžadují hodně kódu nebo vyžadují dodatečné znalosti. Příklady: zobrazení grafu pro data; vložení tlačítka "To se mi líbí" na stránku; odesílání e-mailů z vašeho webu; oříznutí nebo změna velikosti obrázků; PayPal pro váš web. Aby bylo možné snadno provádět tyto druhy věcí, ASP.NET webové stránky umožňují používat pomocné rutiny. Pomocné rutiny jsou komponenty, které nainstalujete pro lokalitu a umožňují provádět typické úlohy pomocí pouhých několika řádků kódu Razor.
ASP.NET webové stránky obsahuje několik pomocných rutin. Mnoho pomocných rutin je však k dispozici v balíčcích (doplňky), které jsou k dispozici pomocí správce balíčků NuGet. NuGet umožňuje vybrat balíček, který chcete nainstalovat, a pak se postará o všechny podrobnosti o instalaci.
V této části kurzu nainstalujete pomocnou rutinu, která vám umožní zobrazit obrázek Gravatar (globálně rozpoznaný avatar). Naučíte se dvě věci. Jedním z nich je způsob, jak najít a nainstalovat pomocníka. Dozvíte se také, jak pomocník usnadňuje práci s něčím, co byste jinak museli udělat pomocí velkého množství kódu, který byste museli napsat sami.
Vlastní Gravatar můžete zaregistrovat na webu Gravatar na http://www.gravatar.com/adrese , ale není nutné vytvořit účet Gravatar k provedení této části kurzu.
Ve službě WebMatrix klikněte na tlačítko NuGet .
Tím se spustí správce balíčků NuGet a zobrazí se dostupné balíčky. (Ne všechny balíčky jsou pomocné rutiny; některé přidávají funkce do samotného WebMatrixu, některé jsou další šablony atd.) Může se zobrazit chybová zpráva o nekompatibilitě verze. Tuto chybovou zprávu můžete ignorovat kliknutím na OK a pokračováním v tomto kurzu.
Do vyhledávacího pole zadejte "asp.net pomocných rutin". NuGet zobrazuje balíčky, které odpovídají hledanému výrazu.
Knihovna webových pomocných rutin ASP.NET obsahuje kód pro zjednodušení mnoha běžných úloh, včetně použití obrázků Gravatar. Vyberte balíček ASP.NET Knihovna webových pomocných rutin a kliknutím na tlačítko Nainstalovat spusťte instalační program. Vyberte Ano , pokud se zobrazí dotaz, jestli chcete balíček nainstalovat, a přijměte podmínky pro dokončení instalace.
Hotovo. NuGet stáhne a nainstaluje všechno, včetně všech dalších komponent, které můžou být potřeba (závislosti).
Pokud z nějakého důvodu potřebujete pomocnou rutinu odinstalovat, je proces velmi podobný. Klikněte na tlačítko NuGet, klikněte na kartu Nainstalované a vyberte balíček, který chcete odinstalovat.
Použití pomocné rutiny na stránce
Teď použijete pomocnou rutinu, kterou jste právě nainstalovali. Postup přidání pomocné rutiny na stránku je podobný většině pomocných rutin.
V nástroji WebMatrix vytvořte stránku a pojmenujte ji GravatarTest.cshml. (Vytváříte speciální stránku pro otestování pomocníka, ale můžete použít pomocné rutiny na libovolné stránce na vašem webu.)
Uvnitř základního> <prvku přidejte <element div>. Do elementu <div> zadejte tento příkaz:
@Gravatar.
Znak @ je stejný znak, který jste používali k označení kódu Razor. Gravatar je pomocný objekt, se kterým pracujete.
Jakmile zadáte tečku (.), WebMatrix zobrazí seznam metod (funkcí), které pomocník Gravatar zpřístupní:
Tato funkce se označuje jako IntelliSense. Pomůže vám s kódem poskytnutím kontextových možností. IntelliSense pracuje s kódem HTML, CSS, ASP.NET kódem, JavaScriptem a dalšími jazyky podporovanými v nástroji WebMatrix. Je to další funkce, která usnadňuje vývoj webových stránek v nástroji WebMatrix.
Stiskněte klávesu G na klávesnici a uvidíte, že IntelliSense najde metodu GetHtml. Stiskněte klávesu Tab. IntelliSense vloží vybranou metodu (GetHtml) za vás. Zadejte levou závorku a všimněte si, že pravá závorka se automaticky přidá. Zadejte e-mailovou adresu do uvozovek mezi dvěma závorky. Pokud máte účet Gravatar, vrátí se váš profilový obrázek. Pokud nemáte účet Gravatar, vrátí se výchozí obrázek. Až budete hotovi, řádek vypadá takto:
@Gravatar.GetHtml("john@contoso.com")
Teď zobrazte stránku v prohlížeči. V závislosti na tom, jestli máte účet Gravatar, se zobrazí váš obrázek nebo výchozí obrázek.
Pokud chcete získat představu o tom, co za vás pomocník dělá, podívejte se na zdroj stránky v prohlížeči. Spolu s kódem HTML, který jste měli na stránce, uvidíte prvek obrázku, který obsahuje identifikátor. Toto je kód, který pomocník vykresloval na stránce na místě, kde jste měli @Gravatar.GetHtml. Pomocník vzal informace, které jste zadali, a vygeneroval kód, který mluví přímo s Gravatarem, aby získal správný obrázek pro zadaný účet.
GetHtml metoda také umožňuje přizpůsobit obrázek poskytnutím dalších parametrů. Následující kód ukazuje, jak požádat o obrázek o šířku a výšku 40 pixelů a používá zadaný výchozí obrázek s názvem wavatar , pokud zadaný účet neexistuje.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Tento kód vytvoří něco jako následující výsledek (výchozí obrázek se náhodně liší).
Připravujeme další
Abychom tento kurz udrželi krátký, museli jsme se zaměřit pouze na několik základních informací. Samozřejmě, že razor a C# je mnohem více. Při procházení těchto kurzů se dozvíte více. Pokud se teď chcete dozvědět více o programovacích aspektech Razor a C#, můžete si přečíst důkladnější úvod: Úvod do ASP.NET webového programování pomocí syntaxe Razor.
V dalším kurzu se seznámíte s prací s databází. V tomto kurzu začnete vytvářet ukázkovou aplikaci, která vám umožní zobrazit seznam oblíbených filmů.
Kompletní výpis stránky 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>
Kompletní výpis stránky 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>
Complete Listing for GravatarTest Page
@{
}
<!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>