ASP.NET MVC - Στυλ και Διάταξη
- Προηγούμενη Σελίδα Φάκελοι MVC
- Επόμενη Σελίδα Ελεγκτές MVC
Για να μάθουμε ASP.NET MVC, θα κατασκευάσουμε μια εφαρμογή Internet.
Μέρος 3:Προσθήκη στυλ και ενιαίας εμφάνισης (διάταξη).
Προσθήκη διάταξης
Το αρχείο _Layout.cshtml αντιπροσωπεύει τη διάταξη κάθε σελίδας της εφαρμογής. Βρίσκεται στον φάκελο Shared του φακέλου Views.
Ανοίξτε αυτό το αρχείο και αντικαταστήστε το περιεχόμενο του με:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
@Html.ActionLink("Home", "Index", "Home")
@Html.ActionLink("Movies", "Index", "Movies")
<li>@Html.ActionLink("Σχετικά", "Σχετικά", "Home")</li>
</ul>
<section id="main">
@RenderBody()
<p>Πνευματικά δικαιώματα W3school 2012. Όλα τα δικαιώματα διατηρούνται.</p>
</section>
</body>
</html>
Βοηθοί HTML
Στο παραπάνω κώδικα, οι βοηθοί HTML χρησιμοποιούνται για να τροποποιήσουν την έξοδο HTML:
@Url.Content() - Εδώ εισάγετε το περιεχόμενο URL.
@Html.ActionLink() - Εδώ εισάγετε το σύνδεσμο HTML.
Θα εξηγήσουμε τους βοηθούς HTML σε μια μεταγενέστερη ενότητα του οδηγού.
Γλώσσα Γραμματοσειράς Razor
Στο παραπάνω κώδικα, το κώδικα που σημειώνεται με κόκκινο είναι γραμμένος με σημειώσεις Razor C#.
@ViewBag.Title - Εδώ εισάγετε τον τίτλο της σελίδας.
@RenderBody() - Εδώ παρουσιάζεται το περιεχόμενο της σελίδας.
Μπορείτε να βρείτε τα μαθήματα μας στο Εκμάθηση Razorμαθαίνετε C# και VB (Visual Basic) γραμμένα με Razor σημειώσεις.
Προσθήκη στυλ
Το αρχείο στυλ της εφαρμογής είναι Site.css. Βρίσκεται στον φάκελο Content.
ανοίξτε το αρχείο Site.css και αντικαταστήστε το περιεχόμενό του με:
σώμα
{
τυπογραφία: "Trebuchet MS", Verdana, sans-serif;
χρώμα φόντου: #5c87b2;
χρώμα: #696969;
}
h1
{
χαράκι: 3px solid #cc9900;
τυπογραφία: Georgia, serif;
χρώμα: #996600;
}
#main
{
παράθυρο: 20px;
background-color: #ffffff;
κυκλική ακτίνα: 0 4px 4px 4px;
}
a
{
χρώμα: #034af3;
}
/* Στυλ μενού ------------------------------*/
ul#menu
{
παράθυρο: 0px;
θεματική τοποθεσία: relative;
μαργίνα: 0;
}
ul#menu li
{
παρουσίαση: inline;
}
ul#menu li a
{
χρώμα φόντου: #e8eef4;
παράθυρο: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/* Ιδιότητες CSS3*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Στυλ Φόρμας ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Στυλ Δεδομένων ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
_ViewStart αρχείο
Το αρχείο _ViewStart στον φάκελο Shared (τοποθετημένος στον φάκελο Views) περιέχει το εξής περιεχόμενο:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
Αυτός ο κώδικας προστίθεται αυτόματα σε όλες τις προβολές που εμφανίζονται από την εφαρμογή.
Αν διαγράψετε το αρχείο αυτό, πρέπει να προσθέσετε αυτό το κώδικα σε όλες τις προβολές.
Θα μάθετε περισσότερα για τις προβολές σε αργότερες ενότητες αυτού του σεμιναρίου.
- Προηγούμενη Σελίδα Φάκελοι MVC
- Επόμενη Σελίδα Ελεγκτές MVC
