ASP.NET Web Pages - Σχεδιασμός Σελίδας

Με τα Web Pages, είναι εύκολο να δημιουργήσετε ιστοσελίδες με συνεπή layout.

Συνεπής εμφάνιση

Στο Διαδίκτυο, θα βρείτε πολλές ιστοσελίδες με συνεπή εμφάνιση:

  • Κάθε σελίδα έχει τα ίδια κεφαλίδα
  • Κάθε σελίδα έχει τα ίδια υποσέλιδο
  • Κάθε σελίδα έχει τα ίδια στυλ και layout

Με τα Web Pages, μπορείτε να υλοποιήσετε αυτά με ευκολία. Μπορείτε να πάρετε επαναχρησιμοποιήσιμους κώδικες (τομείς περιεχομένου), όπως κεφαλίδες και υποσέλιδα, σε ανεξάρτητα αρχεία.

Μπορείτε επίσης να ορίσετε συνεπή布局 για όλες τις σελίδες χρησιμοποιώντας το μοτίβο layout (αρχείο layout).

Τομείς περιεχομένου

Πολλές ιστοσελίδες έχουν περιεχόμενο που πρέπει να εμφανίζεται σε κάθε σελίδα (π.χ. κεφαλίδες και υποσέλιδα).

Με τα Web Pages, μπορείτε να χρησιμοποιήσετε @RenderPage() Μέθοδοι εισαγωγής περιεχομένου από διαφορετικά αρχεία.

Οι τομείς περιεχομένου (από άλλο αρχείο) μπορούν να εισαχθούν σε οποιαδήποτε τοποθεσία της ιστοσελίδας και μπορούν να περιέχουν κείμενο, σήματα και κώδικα, όπως οποιαδήποτε κανονική ιστοσελίδα.

Η χρήση κοινών κεφαλίδων και υποσέλιδων μπορεί να εξοικονομήσει πολύ χρόνο. Δεν χρειάζεται να γράφετε το ίδιο περιεχόμενο σε κάθε σελίδα και όταν αλλάζετε τα αρχεία κεφαλίδας ή υποσέλιδων, το περιεχόμενο ενημερώνεται σε όλες τις σελίδες.

Πώς είναι αυτό στο κώδικα:

Παράδειγμα

<html>
<body>
@RenderPage("header.cshtml")
<h1>Γειά σου Web Σελίδες</h1> 
<p>Αυτό είναι ένα παράγραφος</p>
@RenderPage("footer.cshtml")
</body>
</html>

Εκτέλεση παραδείγματος

Χρήση σελίδας layout

Στο προηγούμενο περιεχόμενο, είδατε πώς είναι εύκολο να αναφέρετε το ίδιο περιεχόμενο σε πολλές ιστοσελίδες.

Εναλλακτική μέθοδος δημιουργίας συνεπούς εμφάνισης είναι η χρήση της σελίδας layout. Η σελίδα layout περιέχει τη δομή της ιστοσελίδας, όχι το περιεχόμενο. Όταν η ιστοσελίδα (σελίδα περιεχομένου) συνδέεται με τη σελίδα layout, εμφανίζεται σύμφωνα με τη σελίδα layout (μοτίβο).

Η σελίδα layout είναι όπως μια κανονική ιστοσελίδα, αλλά θα καλείται στην τοποθεσία αναφοράς της σελίδας περιεχομένου. @RenderBody() Μέθοδος.

Κάθε σελίδα περιεχομένου πρέπει να ξεκινά με Οδηγίες LayoutΑρχή.

Πώς είναι αυτό στο κώδικα:

Σχεδιασμός ιστοσελίδας:

<html>
<body>
<p>Αυτό είναι κείμενο.</p>
@RenderBody()
<p>© 2012 CodeW3C.com. All rights reserved.</p>
</body>
</html>

Κάποια ιστοσελίδα:

@{Layout="Layout.cshtml";}
<h1Καλωσορίσατε στο CodeW3C.com</h1>
<p>
Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.
Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.
Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο. Αυτό είναι κείμενο.
</p>

Εκτέλεση παραδείγματος

Μην επαναλαμβάνετε τον εαυτό σας

Με δύο εργαλεία ASP.NET, τα bloκια περιεχομένου και οι σελίδες διάταξης, μπορείτε να ορίσετε μια συνεπή εμφάνιση για την εφαρμογή web σας.

Αυτά τα εργαλεία θα σας εξοικονομήσουν πολύ χρόνο, καθώς δεν χρειάζεται να επαναλαμβάνετε την ίδια πληροφορία σε όλες τις σελίδες. Συγκεντρώστε τα σημάδια, τα στυλ και τον κώδικα, ώστε να γίνει η διαχείριση και η συντήρηση της εφαρμογής web πιο εύκολη.

Πρόληψη έκλυσης κώδικα

Στην ASP.NET, τα αρχεία που ξεκινούν με κάτω παύλα δεν μπορούν να περιηγηθούν μέσω web.

Αν θέλετε να απαγορεύσετε στους χρήστες να δουν το περιεχόμενο του bloκου ή το αρχείο διάταξης, επανανομεύστε το αρχείο:

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

Αποκάλυψη ευαίσθητων πληροφοριών

Στην ASP.NET, η συνήθης μέθοδος για τη αποκάλυψη ευαίσθητων πληροφοριών (παραβιάσεις κωδικών, κωδικών ηλεκτρονικού ταχυδρομείου κ.λπ.) είναι να αποθηκεύσετε αυτές τις πληροφορίες σε ένα ανεξάρτητο αρχείο με το όνομα "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "username@example.com";
WebMail.Password = "your-password";
WebMail.From = "your-name-here@example.com";
}