ASP.NET Web Pages - sivun asettelu

Web Pagesin avulla on helppo luoda yhtenäistä ulkoasua omaa verkkosivustoa varten.

Yhtenäinen ulkoasu

Internetistä löydät monia verkkosivustoja, joilla on yhtenäinen ulkoasu:

  • Jokaisella sivulla on sama otsikko
  • Jokaisella sivulla on sama alatunniste
  • Jokaisella sivulla on sama tyyli ja asettelu

Web Pagesin avulla voit tehokkaasti toteuttaa nämä. Voit saada toistettavissa olevia koodikappaleita (sisältölohkoja), kuten otsikoita ja alatunnisteita, erillisissä tiedostoissa.

Voit myös määritellä yhtenäisen asettelun kaikille sivuille käyttämällä asettelumallia (asettelutiedostoa).

Sisältölohko

Monet verkkosivustot sisältävät sisältöä, joka näytetään jokaisella sivulla (esim. otsikot ja alatunnisteet).

Web Pagesin avulla voit käyttää @RenderPage() Menetelmät tuovat sisältöä eri tiedostoista.

Sisältölohkot (tulee toisesta tiedostosta) voidaan lisätä verkkosivun mihin tahansa kohtaan, ja ne voivat sisältää tekstiä, merkintöjä ja koodia, aivan kuten tavallisessa verkkosivussa.

Yleisten otsikkojen ja alatunnisteiden käyttö voi säästää paljon työtä. Sinun ei tarvitse kirjoittaa samaa sisältöä jokaisessa sivussa, ja kun muutat otsikko- tai alatunniste tiedostoa, sisältö päivittyy kaikissa sivuissa.

Tämä näyttää koodissa:

Esimerkki

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1> 
<p>Tämä on kappale</p>
@RenderPage("footer.cshtml")
</body>
</html>

Suorita esimerkki

Käytä asettelusivua

Aiemmassa sisällössä näit, että on yksinkertaista viitata saman sisällön useisiin sivuihin.

Toinen tapa luoda yhtenäinen ulkoasu on käyttää asettelusivua. Asettelusivu sisältää sivun rakenteen, ei sisältöä. Kun sisältösivu (sivu) linkittyy asettelusivuun, se näyttää sen mukaisesti.

Asettelusivu on tavallinen verkkosivu, mutta se kutsuu sisältösivuja käyttäessä @RenderBody() menetelmä.

Jokaisella sisältösivulla on oltava Layout-instruktiotalku.

Tämä näyttää koodissa:

Sivuston asettelu:

<html>
<body>
<p>Tämä on teksti.</p>
@RenderBody()
<p>© 2012 CodeW3C.com. Kaikki oikeudet pidätetään.</p>
</body>
</html>

Mikä tahansa sivu:

@{Layout="Layout.cshtml";}
<h1>Tervetuloa CodeW3C.comiin</h1>
<p>
Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti.
Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti.
Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti. Tämä on teksti.
</p>

Suorita esimerkki

Älä toista itseäsi

Kaksi ASP.NET työkalua, sisältölohko ja asettelusivu, mahdollistavat web-sovelluksen yhtenäisen ulkoasun asettamisen.

Nämä työkalut säästävät sinulta paljon työtä, koska sinun ei tarvitse toistaa samoja tietoja kaikilla sivuilla. Keskitä merkinnät, tyylit ja koodi, jotta web-sovellus on helpompi hallita ja ylläpitää.

Estä koodin vuotaminen

ASP.NET:ssä alaviivalla alkavat tiedostot eivät ole katseltavissa webissä.

Jos haluat estää käyttäjien tarkastelemasta sisältölohkoja tai asettelutiedostoja, nimeä tiedostot uudelleen:

  • _header.cshtm
  • _footer.cshtml
  • _Layout.cshtml

Arkaluonteisten tietojen piilottaminen

ASP.NET:ssä yleinen tapa piilottaa arkaluonteisia tietoja (tietokannan salasanat, sähköpostin salasanat jne.) on tallentaa nämä tiedot erilliseen nimeltään "_AppStart" tiedostoon.

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "kayttajanimi@example.com";
WebMail.Password = "sinun-salasanasi";
WebMail.From = "sinun-nimesi-here@example.com";
}