ASP.NET Razor - C# ja VB-koodisanasto

Razor tukee sekä C# (C sharp) että VB (Visual Basic).

C#-n pää Razor-syntaksisäännöt

  • Razor-koodi sijoitetaan @{ ... } -merkkien väliin
  • Sisäiset ilmentymät (muuttujat ja funktiot) alkavat @-merkillä
  • Koodilauseet päättymään semikolmella
  • Merkkijonot suljetaan lainausmerkeillä
  • C# on case-sensitive
  • C#-tiedoston laajennus on .cshtml

C#-esimerkki

<!-- Yksirivinen koodiblokkikoodi -->
@{ var myMessage =	"Hello World"; }
<!-- Sisäiset ilmentymät tai muuttujat -->
<p>myMessage-arvon arvo on: @myMessage</p> 
<!-- Monirivinen koodiblokkikoodi -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>Tervehdys on: @greetingMessage</p>

Aja esimerkki

VB:n pää Razor-syntaksisäännöt

  • Razor-koodiblokit sijoitetaan @Code ... End Code -merkkien väliin
  • Sisäiset ilmentymät (muuttujat ja funktiot) alkavat @-merkillä
  • Muuttujia määritellään Dim-kielellä
  • Merkkijonot suljetaan lainausmerkeillä
  • VB ei ole case-sensitive
  • VB-tiedoston laajennus on .vbhtml

Esimerkki

<!-- Yksirivinen koodiblokkikoodi -->
@Code dim myMessage = "Hello World" End Code
<!-- Sisäiset ilmentymät tai muuttujat -->
<p>myMessage-arvon arvo on: @myMessage</p> 
<!-- Monirivinen koodiblokkikoodi -->
@Code
dim greeting = "Welcome to our site!" 
dim weekDay = DateTime.Now.DayOfWeek 
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
Lopeta koodi 
<p>Tervehdys on: @greetingMessage</p>

Aja esimerkki

Miten se toimii?

Razor on yksinkertainen ohjelmointikieli, jota käytetään palvelinpuolisen koodin sisällyttämiseen sivuille.

Razor-kieli perustuu ASP.NET-rakenteeseen, joka on Microsoftin .NET-rakenteen osa ja on suunniteltu erityisesti web-sovellusten kehittämistä varten.

Razor-kieli tarjoaa sinulle kaikki ASP.NET:n mahdollisuudet, mutta yksinkertaistetulla syntaksilla, mikä tekee siitä helpommin oppimaan aloittelijoille ja tuottavampaa asiantuntijoille.

Razor-sivut voidaan kuvata HTML-sivuiksi, joissa on kaksi sisältöä: HTML-sisältö ja Razor-koodi.

Kun palvelin lukee tällaisen sivun, ennen kuin HTML-sivu lähetetään selaimelle, Razor-koodi suoritetaan ensin. Tämä palvelimella suoritettava koodi voi suorittaa tehtäviä, joita selaimessa ei voida suorittaa, kuten palvelimen tietokannan käyttö. Palvelincoodeilla voidaan luoda dynaamista HTML-sisältöä ennen kuin sivu lähetetään selaimelle. Selaimen näkökulmasta katsoen palvelincoodella luodut HTML-sisällöt eivät eroa staattisesta HTML-sisällöstä.

Razor-kirjoituskiellon käyttäminen ASP.NET-sivuilla on erityinen tiedostopääte cshtml (C# Razor-kirjoituskielillä) tai vbhtml (VB Razor-kirjoituskielillä).

Objektien kanssa työskentely

Palvelincoodeissa käytetään usein objekteja.

"Date"-objekti on tyypillinen ASP.NET:n sisäänrakennettu objekti, mutta voit myös määritellä omia objekteja, kuten sivua, tekstikenttää, tiedostoa tai tietokantatietuetta jne.

Objekti voi myös olla omaa ominaisuuttaan suorittava. Tietokantatietue voi tarjota "tallenna"-menetelmän, kuvatietue voi olla "käännä"-menetelmä, sähköpostitietue voi tarjota "lähetä"-menetelmän ja niin edelleen.

Objekti voi myös olla omaa ominaisuuttaan kuvaava. Tietokantatietueella voi olla FirstName- ja LastName-ominaisuudet.

ASP.NET Date-objekti omaa Now-ominaisuutta (kirjoitettuna Date.Now), Now-ominaisuudella on Day-ominaisuus (kirjoitettuna Date.Now.Day). Seuraava esimerkki näyttää, miten voit tarkastella Date-objektin tiettyjä ominaisuuksia:

Esimerkki

<table border="1">
<tr>
<th width="100px">Name</th>
<td width="100px">Value</td>
</tr>
<tr>
<td>Day</td><td>@DateTime.Now.Day</td>
</tr>
<tr>
<td>Hour</td><td>@DateTime.Now.Hour</td>
</tr>
<tr>
<td>Minute</td><td>@DateTime.Now.Minute</td>
</tr>
<tr>
<td>Second</td><td>@DateTime.Now.Second</td>
</tr>
</td>
</table>

Aja esimerkki

If ja Else -ehdot

Dynaamisen verkkosivun tärkeä ominaisuus on ehdollisuuden perusteella määritetty toiminta.

Yksi tapa toteuttaa tämä on käyttää if ... else -lausekkeita:

Esimerkki

@{
var txt = "";
if(DateTime.Now.Hour > 12)
  {txt = "Hyvää iltaa";}
else
  {txt = "Hyvää aamua";}
}
<html>
<body>
<p>Tiedote on @txt</p>
</body>
</html>

Aja esimerkki

Lue käyttäjän syöte

Dynaamisen verkkosivun toinen tärkeä ominaisuus on käyttäjän syötteen lukeminen.

Lue syöte Request[]-funktiolla ja testaa IsPost-ehdon avulla:

Esimerkki

@{
var totalMessage = "";
if(IsPost)
    {
    var num1 = Request["text1"];
    var num2 = Request["text2"];
    var total = num1.AsInt() + num2.AsInt();
    totalMessage = "Yhteensä = " + total;
    }
}
<html>
<body style="background-color: beige; font-family: Verdana, Arial;">
<form action="" method="post">
<p><label for="text1">Ensimmäinen numero:</label><br>
<input type="text" name="text1" /></p>
<p><label for="text2">Toinen numero:</label><br>
<input type="text" name="text2" /></p>
<p><input type="submit" value="Lisää" /></p>
</form>
<p>@totalMessage</p>
</body>
</html>

Aja esimerkki