Présentation de pages Web ASP.NET - Création d’une disposition cohérente
par Tom FitzMacken
Ce tutoriel vous montre comment utiliser des dispositions pour créer une apparence cohérente pour les pages d’un site qui utilise pages Web ASP.NET. Il suppose que vous avez terminé la série en supprimant les données de base de données dans pages Web ASP.NET.
Ce que vous allez apprendre :
- Qu’est-ce qu’une page de mise en page?
- Comment combiner des pages de mise en page avec du contenu dynamique.
- Comment passer des valeurs à une page de mise en page.
À propos des dispositions
Les pages que vous avez créées jusqu’à présent sont toutes des pages autonomes complètes. Ils appartiennent tous au même site, mais ils n’ont pas d’éléments communs ou d’apparence standard.
La plupart des sites ont une apparence et une disposition cohérentes. Par exemple, si vous accédez au site Microsoft.com/web et que vous regardez autour de vous, vous voyez que les pages respectent toutes une disposition globale et un thème visuel :
Un moyen inefficace de créer cette disposition consiste à définir un en-tête, une barre de navigation et un pied de page séparément sur chacune de vos pages. Vous dupliqueriez le même balisage à chaque fois. Si vous souhaitez modifier quelque chose (par exemple, mettre à jour le pied de page), vous devez modifier chaque page séparément.
C’est là que les pages de mise en page entrent en vigueur. Dans pages Web ASP.NET, vous pouvez définir une page de mise en page qui fournit un conteneur global pour les pages de votre site. Par exemple, la page de mise en page peut contenir l’en-tête, la zone de navigation et le pied de page. La page de mise en page comprend un espace réservé dans lequel le contenu main va.
Vous pouvez ensuite définir des pages de contenu individuelles qui contiennent le balisage et le code de cette page uniquement. Les pages de contenu n’ont pas besoin d’être des pages HTML complètes ; ils n’ont même pas besoin d’avoir un <body> élément. Ils ont également une ligne de code qui indique ASP.NET la page de mise en page dans laquelle vous souhaitez afficher le contenu. Voici une image qui montre à peu près le fonctionnement de cette relation :
Cette interaction est facile à comprendre quand vous la voyez en action. Dans ce tutoriel, vous allez modifier vos pages de films pour utiliser une disposition.
Ajout d’une page de mise en page
Vous allez commencer par créer une page de mise en page qui définit une mise en page classique avec un en-tête, un pied de page et une zone pour le contenu main. Dans le site WebPagesMovies, ajoutez une page CSHTML nommée _Layout.cshtml.
Le caractère de trait de soulignement de début ( _ ) est significatif. Si le nom d’une page commence par un trait de soulignement, ASP.NET n’envoie pas directement cette page au navigateur. Cette convention vous permet de définir des pages qui sont requises pour votre site, mais que les utilisateurs ne doivent pas être en mesure de demander directement.
Remplacez le contenu de la page par les éléments suivants :
<!DOCTYPE html>
<html>
<head>
<title>My Movie Site</title>
<link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>My Movie Site</h1>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
© @DateTime.Now.Year My Movie Site
</div>
</div>
</body>
</html>
Comme vous pouvez le voir, ce balisage est simplement du code HTML qui utilise <div> des éléments pour définir trois sections dans la page plus un élément de plus <div> pour contenir les trois sections. Le pied de page contient un peu de code Razor : @DateTime.Now.Year, qui affiche l’année en cours à cet emplacement dans la page.
Notez qu’il existe un lien vers une feuille de style nommée Movies.css. La feuille de style est l’endroit où les détails de la disposition physique des éléments seront définis. Vous allez le créer dans un instant.
La seule fonctionnalité inhabituelle de cette page _Layout.cshtml est la @Render.Body() ligne. Il s’agit de l’espace réservé où le contenu va aller lorsque cette disposition est fusionnée avec une autre page.
Ajout d’un fichier .css
La méthode recommandée pour définir la disposition réelle (c’est-à-dire l’apparence) des éléments de la page consiste à utiliser des règles de feuille de style en cascade (CSS). Vous allez donc créer un fichier .css qui contient les règles de votre nouvelle disposition.
Dans WebMatrix, sélectionnez la racine de votre site. Ensuite, sous l’onglet Fichiers du ruban, cliquez sur la flèche sous le bouton Nouveau , puis sur Nouveau dossier.
Nommez le nouveau dossier Styles.
Dans le nouveau dossier Styles , créez un fichier nommé Movies.css.
Remplacez le contenu du nouveau fichier .css par les éléments suivants :
html{ height:100%; margin:0; padding:0; }
body {
height:60%;
font-family:'Trebuchet MS', 'Arial', 'Helvetica', 'sans-serif';
font-size:10pt;
background-color: LightGray;
line-height:1.6em;
}
h1{ font-size:1.6em; }
h2{ font-size:1.4em; }
#container{
min-height:100%;
position:relative;
left:10%;
}
#header{
padding:8px;
width:80%;
background-color:#4b6c9e;
color:White;
}
#main{
width:80%;
padding: 8px;
padding-bottom:4em;
background-color:White;
}
#footer{
width:80%;
height:2em;
padding:8px;
margin-top:-2em;
background-color:LightGray;
}
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}
Nous ne dirons pas grand-chose sur ces règles CSS, sauf à noter deux choses. La première est qu’en plus de définir des polices et des tailles, les règles utilisent un positionnement absolu pour établir l’emplacement de l’en-tête, du pied de page et de main zone de contenu. Si vous débutez dans le positionnement dans CSS, vous pouvez lire le tutoriel Positionnement CSS sur le site W3Schools.
L’autre chose à noter est qu’en bas, nous avons copié les règles de style qui ont été définies individuellement dans le fichier Movies.cshtml . Ces règles ont été utilisées dans le didacticiel Présentation de l’affichage des données à l’aide de pages Web ASP.NET pour rendre le WebGrid balisage d’assistance qui a ajouté des bandes à la table. (Si vous envisagez d’utiliser un fichier .css pour les définitions de style, vous pouvez aussi bien y placer les règles de style pour l’ensemble du site.)
Mise à jour du fichier Movies pour utiliser la disposition
Vous pouvez maintenant mettre à jour les fichiers existants dans votre site pour utiliser la nouvelle disposition. Ouvrez le fichier Movies.cshtml . En haut, en tant que première ligne de code, ajoutez les éléments suivants :
Layout = "~/_Layout.cshtml";
La page commence maintenant comme suit :
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
Cette ligne de code indique ASP.NET que lorsque la page Films s’exécute, elle doit être fusionnée avec le fichier _Layout.cshtml .
Étant donné que le fichier Movies.cshtml utilise désormais une page de mise en page, vous pouvez supprimer le balisage de la page Movies.cshtml qui est prise en charge par le fichier _Layout.cshtml . Retirez les <!DOCTYPE>balises , <html>, et <body> ouverture et fermeture. Retirez l’ensemble <head> de l’élément et son contenu, qui inclut les règles de style pour la grille, car vous avez maintenant ces règles dans un fichier .css . Pendant que vous y êtes, remplacez l’élément existant <h1> par un <h2> élément ; vous disposez déjà d’un <h1> élément dans la page de mise en page. Remplacez le <h2> texte par « Lister les films ».
Normalement, vous n’avez pas besoin d’apporter ce genre de modifications dans une page de contenu. Lorsque vous démarrez votre site avec une page de mise en page, vous créez des pages de contenu sans tous ces éléments pour commencer. Dans ce cas, cependant, vous convertissez une page autonome en une page qui utilise une mise en page, afin qu’il y ait un peu de nettoyage.
Lorsque vous avez terminé, la page Movies.cshtml se présente comme suit :
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
searchTerm = Request.QueryString["searchGenre"];
}
if(!Request.QueryString["searchTitle"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
}
var selectedData = db.Query(selectCommand, searchTerm);
var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<h2>List Movies</h2>
<form method="get">
<div>
<label for="searchGenre">Genre to look for:</label>
<input type="text" name="searchGenre"
value="@Request.QueryString["searchGenre"]" />
<input type="Submit" value="Search Genre" /><br/>
(Leave blank to list all movies.)<br/>
</div>
<div>
<label for="SearchTitle">Movie title contains the following:</label>
<input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
<input type="Submit" value="Search Title" /><br/>
</div>
</form>
<div>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year"),
grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
)
)
</div>
<p><a href="~/AddMovie">Add a movie</a></p>
Test de la disposition
Vous pouvez maintenant voir à quoi ressemble la disposition. Dans WebMatrix, cliquez avec le bouton droit sur la page Movies.cshtml et sélectionnez Lancer dans le navigateur. Lorsque le navigateur affiche la page, elle ressemble à cette page :
ASP.NET a fusionné le contenu de la page Movies.cshtml dans la page _Layout.cshtml à l’emplacement où se trouve la RenderBody méthode. Et bien sûr, la page _Layout.cshtml fait référence à un fichier .css qui définit l’apparence de la page.
Mise à jour de la page AddMovie pour utiliser la disposition
Le véritable avantage des dispositions est que vous pouvez les utiliser pour toutes les pages de votre site. Ouvrez la page AddMovie.cshtml .
Vous pouvez vous rappeler que la page AddMovie.cshtml comportait à l’origine des règles CSS pour définir l’apparence des messages d’erreur de validation. Étant donné que vous disposez maintenant d’un fichier .css pour votre site, vous pouvez déplacer ces règles vers le fichier .css . Supprimez-les du fichier AddMovie.cshtml et ajoutez-les au bas du fichier Movies.css . Vous déplacez les règles suivantes :
.field-validation-error {
font-weight:bold;
color:red;
background-color:yellow;
}
.validation-summary-errors{
border:2px dashed red;
color:red;
background-color:yellow;
font-weight:bold;
margin:12px;
}
Apportez maintenant les mêmes types de modifications dans AddMovie.cshtml que pour Movies.cshtml : ajoutez Layout="~/_Layout.cshtml; et supprimez le balisage HTML qui est désormais superflu. Remplacez l’élément <h1> par <h2>. Lorsque vous avez terminé, la page ressemble à cet exemple :
@{
Layout = "~/_Layout.cshtml";
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");
var title = "";
var genre = "";
var year = "";
if(IsPost){
if(Validation.IsValid()){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
var db = Database.Open("WebPagesMovies");
var insertCommand =
"INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);
Response.Redirect("~/Movies");
}
}
}
<h2>Add a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
@Html.ValidationMessage("title")
</p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
</p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
</p>
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
Exécutez la page. Maintenant, il ressemble à cette illustration :
Vous souhaitez apporter des modifications similaires aux pages du site : EditMovie.cshtml et DeleteMovie.cshtml. Toutefois, avant de le faire, vous pouvez apporter une autre modification à la disposition qui la rend un peu plus flexible.
Passage d’informations de titre à la page de mise en page
La page _Layout.cshtml que vous avez créée a un <title> élément défini sur « Mon site de film ». La plupart des navigateurs affichent le contenu de cet élément sous forme de texte dans un onglet :
Ces informations de titre sont génériques. Supposons que vous souhaitiez que le texte du titre soit plus spécifique à la page active. (Le texte de titre est également utilisé par les moteurs de recherche pour déterminer l’objet de votre page.) Vous pouvez transmettre des informations à partir d’une page de contenu telle que Movies.cshtml ou AddMovie.cshtml à la page de mise en page, puis utiliser ces informations pour personnaliser ce que la page de mise en page affiche.
Ouvrez à nouveau la page Movies.cshtml . Dans le code en haut, ajoutez la ligne suivante :
Page.Title = "List Movies";
L’objet Page est disponible sur toutes les pages .cshtml et est à cet effet, à savoir pour partager des informations entre une page et sa mise en page.
Ouvrez la page _Layout.cshtml . Modifiez l’élément <title> pour qu’il ressemble à ce balisage :
<title>@Page.Title</title>
Ce code restitue tout ce qui se trouve dans la Page.Title propriété à cet emplacement dans la page.
Exécutez la page Movies.cshtml . Cette fois, l’onglet du navigateur affiche ce que vous avez passé comme valeur de Page.Title:
Si vous le souhaitez, affichez la source de la page dans le navigateur. Vous pouvez voir que l’élément <title> est rendu en tant que <title>List Movies</title>.
Conseil
Objet Page
Une fonctionnalité utile de Page est qu’il s’agit d’un objet dynamique . La Title propriété n’est pas un nom fixe ou réservé. Vous pouvez utiliser n’importe quel nom pour une valeur de l’objet Page . Par exemple, vous pourriez aussi facilement passer le titre à l’aide d’une propriété nommée Page.CurrentName ou Page.MyPage. La seule restriction est que le nom doit suivre les règles normales pour les propriétés qui peuvent être nommées. (Par exemple, le nom ne peut pas contenir d’espace.)
Vous pouvez passer n’importe quel nombre de valeurs à l’aide de l’objet Page . Si vous souhaitez transmettre des informations de film à la page de mise en page, vous pouvez transmettre des valeurs en utilisant quelque chose comme Page.MovieTitle et et Page.GenrePage.MovieYear. (Ou tout autre nom que vous avez inventé pour stocker les informations.) La seule exigence, ce qui est probablement évident, est que vous devez utiliser les mêmes noms dans la page de contenu et la page de mise en page.
Les informations que vous transmettez à l’aide de l’objet Page ne se limitent pas au texte à afficher sur la page de mise en page. Vous pouvez passer une valeur à la page de mise en page, puis le code dans la page de mise en page peut utiliser la valeur pour décider s’il faut afficher une section de la page, quel fichier .css utiliser, etc. Les valeurs que vous transmettez à l’objet Page sont comme toutes les autres valeurs que vous utilisez dans le code. C’est simplement que les valeurs proviennent de la page de contenu et sont transmises à la page de mise en page.
Ouvrez la page AddMovie.cshtml et ajoutez une ligne en haut du code qui fournit un titre pour la page AddMovie.cshtml :
Page.Title = "Add a Movie";
Exécutez la page AddMovie.cshtml . Le nouveau titre s’affiche ici :
Mise à jour des pages restantes pour utiliser la disposition
Vous pouvez maintenant terminer les pages restantes de votre site afin qu’elles utilisent la nouvelle disposition. Ouvrez à leur tour EditMovie.cshtml et DeleteMovie.cshtml et apportez les mêmes modifications dans chacun d’eux.
Ajoutez la ligne de code qui est liée à la page de mise en page :
Layout = "~/_Layout.cshtml";
Ajoutez une ligne pour définir le titre de la page :
Page.Title = "Edit a Movie";
ou :
Page.Title = "Delete a Movie";
Supprimez tout le balisage HTML superflu. En gros, laissez uniquement les bits qui se trouvent à l’intérieur de l’élément <body> (plus le bloc de code en haut).
Remplacez l’élément <h1> par un <h2> élément.
Une fois ces modifications effectuées, testez chacune d’elles et vérifiez qu’elle s’affiche correctement et que le titre est correct.
Réflexions partantes sur les pages de mise en page
Dans ce tutoriel, vous avez créé une page _Layout.cshtml et utilisé la méthode pour fusionner le RenderBody contenu d’une autre page. Il s’agit du modèle de base pour l’utilisation de dispositions dans pages web.
Les pages de mise en page ont des fonctionnalités supplémentaires que nous n’avons pas couvertes ici. Par exemple, vous pouvez imbriquer des pages de mise en page . Une page de mise en page peut à son tour référencer une autre. Les dispositions imbriquées peuvent être utiles si vous utilisez des sous-sections d’un site qui nécessitent des dispositions différentes. Vous pouvez également utiliser des méthodes supplémentaires (par exemple, RenderSection) pour configurer des sections nommées dans la page de mise en page.
La combinaison de pages de disposition et de fichiers .css est puissante. Comme vous le verrez dans la série de tutoriels suivante, dans WebMatrix, vous pouvez créer un site basé sur un modèle, ce qui vous donne un site qui contient des fonctionnalités prédéfinies. Les modèles utilisent bien les pages de mise en page et css pour créer des sites qui ont l’apparence et qui ont des fonctionnalités telles que des menus. Voici une capture d’écran de la page d’accueil d’un site basé sur un modèle, montrant les fonctionnalités qui utilisent des pages de mise en page et CSS :
Liste complète pour la page vidéo (mise à jour pour utiliser une page de mise en page)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "List Movies";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
searchTerm = Request.QueryString["searchGenre"];
}
if(!Request.QueryString["searchTitle"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
}
var selectedData = db.Query(selectCommand, searchTerm);
var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
<h2>List Movies</h2>
<form method="get">
<div>
<label for="searchGenre">Genre to look for:</label>
<input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />
<input type="Submit" value="Search Genre" /><br/>
(Leave blank to list all movies.)<br/>
</div>
<div>
<label for="SearchTitle">Movie title contains the following:</label>
<input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
<input type="Submit" value="Search Title" /><br/>
</div>
</form>
<div>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
grid.Column("Title"),
grid.Column("Genre"),
grid.Column("Year"),
grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
)
)
</div>
<p><a href="~/AddMovie">Add a movie</a></p>
Liste complète des pages pour ajouter une page vidéo (mise à jour pour la mise en page)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Add a Movie";
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");
var title = "";
var genre = "";
var year = "";
if(IsPost){
if(Validation.IsValid()){
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
var db = Database.Open("WebPagesMovies");
var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
db.Execute(insertCommand, title, genre, year);
Response.Redirect("~/Movies");
}
}
}
<h2>Add a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@Request.Form["title"]" />
@Html.ValidationMessage("title")
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@Request.Form["genre"]" />
@Html.ValidationMessage("genre")
<p><label for="year">Year:</label>
<input type="text" name="year" value="@Request.Form["year"]" />
@Html.ValidationMessage("year")
<p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>
Liste complète des pages pour supprimer la page vidéo (mise à jour pour la mise en page)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Delete a Movie";
var title = "";
var genre = "";
var year = "";
var movieId = "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].AsInt() > 0){
movieId = Request.QueryString["ID"];
var db = Database.Open("WebPagesMovies");
var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
var row = db.QuerySingle(dbCommand, movieId);
if(row != null) {
title = row.Title;
genre = row.Genre;
year = row.Year;
}
else{
Validation.AddFormError("No movie was found for that ID.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was found for that ID.");
}
}
else{
Validation.AddFormError("No movie was found for that ID.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was found for that ID.");
}
}
if(IsPost && !Request["buttonDelete"].IsEmpty()){
movieId = Request.Form["movieId"];
var db = Database.Open("WebPagesMovies");
var deleteCommand = "DELETE FROM Movies WHERE ID = @0";
db.Execute(deleteCommand, movieId);
Response.Redirect("~/Movies");
}
}
<h2>Delete a Movie</h2>
@Html.ValidationSummary()
<p><a href="~/Movies">Return to movie listing</a></p>
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><span>Title:</span>
<span>@title</span></p>
<p><span>Genre:</span>
<span>@genre</span></p>
<p><span>Year:</span>
<span>@year</span></p>
<input type="hidden" name="movieid" value="@movieId" />
<p><input type="submit" name="buttonDelete" value="Delete Movie" /></p>
</fieldset>
</form>
Liste complète des pages pour modifier la page vidéo (mise à jour pour la mise en page)
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Edit a Movie";
var title = "";
var genre = "";
var year = "";
var movieId = "";
if(!IsPost){
if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()) {
movieId = Request.QueryString["ID"];
var db = Database.Open("WebPagesMovies");
var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
var row = db.QuerySingle(dbCommand, movieId);
if(row != null) {
title = row.Title;
genre = row.Genre;
year = row.Year;
}
else{
Validation.AddFormError("No movie was selected.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was selected.");
}
}
else{
Validation.AddFormError("No movie was selected.");
// If you are using a version of ASP.NET Web Pages 2 that's
// earlier than the RC release, comment out the preceding
// statement and uncomment the following one.
//ModelState.AddFormError("No movie was selected.");
}
}
if(IsPost){
Validation.RequireField("title", "You must enter a title");
Validation.RequireField("genre", "Genre is required");
Validation.RequireField("year", "You haven't entered a year");
Validation.RequireField("movieid", "No movie ID was submitted!");
title = Request.Form["title"];
genre = Request.Form["genre"];
year = Request.Form["year"];
movieId = Request.Form["movieId"];
if(Validation.IsValid()){
var db = Database.Open("WebPagesMovies");
var updateCommand = "UPDATE Movies SET Title=@0, Genre=@1, Year=@2 WHERE Id=@3";
db.Execute(updateCommand, title, genre, year, movieId);
Response.Redirect("~/Movies");
}
}
}
<h2>Edit a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
<legend>Movie Information</legend>
<p><label for="title">Title:</label>
<input type="text" name="title" value="@title" /></p>
<p><label for="genre">Genre:</label>
<input type="text" name="genre" value="@genre" /></p>
<p><label for="year">Year:</label>
<input type="text" name="year" value="@year" /></p>
<input type="hidden" name="movieid" value="@movieId" />
<p><input type="submit" name="buttonSubmit" value="Submit Changes" /></p>
</fieldset>
</form>
<p><a href="~/Movies">Return to movie listing</a></p>
À venir
Dans le tutoriel suivant, vous allez apprendre à publier votre site sur Internet afin que tout le monde puisse le voir.
Ressources supplémentaires
- Création d’une apparence cohérente : article qui fournit des détails supplémentaires sur l’utilisation des dispositions. Il décrit également comment passer une valeur à une page de mise en page qui affiche ou masque une partie du contenu.
- Pages de mise en page imbriquées avec Razor : Mike Brind blog un exemple de la façon d’imbriquer des pages de mise en page. (Inclut un téléchargement des pages.)