PRESENTATION D'ASP.NET WEB PAGES

Création d'une présentation (layout) cohérente

Ce tutoriel vous montre comment utiliser la mise en page (layout) pour créer une présentation cohérente des pages d'un site qui utilise ASP.NET Web Pages.

8 commentaires

Article lu fois.

Les deux auteur et traducteur

Tom fitzMacken

Traducteur : Herve Taraveau

L'article

Publié le 8 février 2019

Public visé : débutant

Durée : 1/2 heure

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

I. Préface▲

Ce tutoriel vous montre comment utiliser la mise en page (layout) pour créer une présentation cohérente des pages d'un site qui utilise ASP.NET Web Pages. Cela suppose que vous avez étudié la série jusqu'à Présentation d'ASP.NET Web Pages — suppression de données.

Note de la rédaction Développez.com :

- ce tutoriel est basé sur la technologie ASP.NET Web Pages. Si elle est toujours d’actualité et peut continuer d’être utilisée sans aucun souci pour des projets existants, Microsoft recommande l’usage d’ASP.NET Core Razor Pages pour de nouveaux projets ;

- de plus, ce tutoriel est basé sur l’utilisation de WebMatrix comme environnement de développement. Aujourd’hui, cet environnement est considéré comme obsolète et il est préférable d’utiliser un environnement de développement récent comme Visual Studio ou Visual Studio Code. Néanmoins, cela ne devrait pas gêner la lecture de ce tutoriel ;

- précision vis-à-vis de la version anglaise : les liens invalides ont été retirés de la traduction.

I-A. Qu'allez-vous apprendre ?▲

qu'est-ce qu'une mise en page ;
comment combiner la mise en page des pages avec du contenu dynamique ;
comment passer des valeurs à la page de mise en page.

II. À propos de la mise en page (layout)▲

Les pages que vous avez créées jusqu'à maintenant ont toutes été complétées comme des pages autonomes. Elles appartiennent toutes au même site, mais elles n'ont aucun éléments communs ni un aspect standard.

Beaucoup de sites ont une mise en page et un aspect cohérents des pages. Prenons l’exemple de la mise en page suivante :

Une façon inefficace de créer cette disposition serait de définir un en-tête, une barre de navigation et un pied de page séparément sur chacune de vos pages. Vous devriez dupliquer le même balisage à chaque fois. Si vous voulez changer quelque chose (par exemple, mettre à jour le pied de page), vous devrez modifier chaque page séparément.

C'est ici que la mise en page des pages apparaît. Dans ASP.NET web Pages, vous pouvez définir une page de mise en page qui fournit un conteneur global pour l'ensemble des pages de votre site. Par exemple, la page de mise en page peut contenir l'entête, la zone de navigation, et le pied de page. La page de mise en page inclut un emplacement où le contenu principal sera placé.

Vous pouvez ensuite définir le contenu individuel des pages qui contient le balisage et le code pour seulement cette page. Le contenu des pages n'a pas à être des pages HTML complètes ; Elles n'ont même pas besoin d'avoir un élément <body>. Elles ont par contre une ligne de code qui indique à ASP.NET où positionner la page que vous souhaitez afficher. Voici une image qui montre à peu près comment cette relation fonctionne.

Cette interaction est facile à comprendre lorsque vous la verrez en action. Dans ce tutoriel, vous allez changer vos pages de films pour utiliser une mise en page.

III. Ajouter un modèle de mise en page▲

Vous allez commencer par créer une page de mise en page qui définit une page typique (de mise en page) avec un entête, un pied de page, et une zone pour le contenu principal. Dans le site WebPagesMovies, ajoutez une page CSHTML nommée _Layout.cshtml.

Le premier caractère de soulignement (_) est important. Si un nom de page commence par le caractère de soulignement, ASP.NET n'appellera pas directement cette page dans le navigateur. Cette convention vous permet de définir les pages qui sont nécessaires à votre site mais que les utilisateurs ne devraient pas être en mesure d'appeler directement.

Remplacez le contenu de cette page par le code suivant :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

<!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">
          &copy; @DateTime.Now.Year My Movie Site
        </div>
    </div>
  </body>
</html>

Comme vous pouvez le voir, ce balisage est juste du HTML qui utilise des éléments <div> pour définir trois sections dans la page, plus un autre élément <div> qui contient ces trois sections. Le pied de page contient un petit peu de code Razor : @DateTime.Now, ce qui donnera la date courante à cet emplacement de la page.

Remarquez qu'il y a un lien sur une feuille de style nommée Movies.css. C'est dans la feuille de style que les détails de la mise en page physique des éléments seront définis. Vous allez créer cela dans un moment.

La seule fonctionnalité inhabituelle dans cette page _Layout.cshtml est la ligne @Render.Body(). C'est l'emplacement où le contenu d'une autre page sera fusionné avec la mise en page.

IV. Ajouter un fichier .css▲

La meilleure façon de définir l'arrangement actuel (c'est-à-dire, l'apparence) des éléments sur la page, est d'utiliser les règles des feuilles de style (CSS) en cascade. Aussi vous devez créer un fichier .css qui contient ces règles pour votre nouvelle mise en page.

Dans WebMatrix, sélectionner la racine de votre site. Maintenant dans l'onglet Files du ruban, cliquez sur la flèche en dessous du bouton New et puis cliquez sur New Folder.

Nommez le nouveau dossier de styles.

Dans le nouveau dossier de styles, créez un fichier nommé Movies.css.

Remplacez le contenu du nouveau fichier .css avec le code suivant :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

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 seront pas en mesure d'en dire plus sur ces règles CSS, sauf de noter deux choses. Premièrement, en plus de placer la police et la taille, les règles utilisent le positionnement absolu pour établir l'emplacement de l'entête, du pied de page, et de la zone de contenu principal. Si pour vous le positionnement en CSS est nouveau, vous pouvez lire le tutoriel CSS Positioning sur le site de W3Schools.

L'autre chose à noter est qu'en bas vous avez copié les règles de style qui ont été initialement définies individuellement dans le fichier Movies.cshtml. Ces règles sont utilisées dans le tutoriel Introduction à ASP.NET Web Pages — Affichage des Données pour faire en sorte que le WebGrid helper applique le balisage qui ajoute les lignes de la grille (si vous décidez d'utiliser un fichier .css pour les définitions de style, vous pourriez aussi bien mettre les règles de style de l'ensemble de votre site).

V. Mettez à jour votre fichier Movies pour utiliser la mise en page▲

Maintenant vous pouvez mettre à jour les fichiers existants de votre site en utilisant la nouvelle mise en page. Ouvrez le fichier Movies.cshtml. Au début, comme première ligne de code, ajoutez celle-ci :

Sélectionnez

    Layout = "~/_Layout.cshtml";

Maintenant la page commence ainsi :

Sélectionnez

@{
    Layout = "~/_Layout.cshtml";

    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    // Etc.

La première ligne de code indique à ASP.NET que lorsque la page s'exécute, elle doit être fusionnée avec le fichier _Layout.cshtml.

Depuis que le fichier Movies.cshtml utilise une mise en page, vous pouvez retirer le balisage de la page Movies.cshtml qui est pris en charge par le fichier _Layout.csktml. Enlevez les éléments d'ouverture et de fermeture des éléments <!DOCTYPE>,<html> et <body>. Enlevez l'élément <head> entier et son contenu : les règles de style de la grille, puisque maintenant vous avez ces règles dans un fichier .css. Tant que vous y êtes, changez l'élément <h1> par un élément <h2> ; vous avez déjà un élément <h1> dans la page de mise en page. Changez le texte de <h2> en « Liste de films ».

Normalement vous n'auriez pas à faire ce genre de changements dans une page de contenu. Lorsque vous commencez la création de votre site avec une page de mise en page, vous créez le contenu des pages sans tous ces éléments. Dans ce cas, cependant, vous convertissez une page autonome en une qui utilise la mise en page, aussi il y peu de chose à changer.

Lorsque vous avez terminé, le code de la page Movies.cshtml va ressembler à ceci :

Movies.cshtml

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

@{
    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>

V-A. Tester la mise en page▲

Maintenant vous pouvez voir à quoi ressemble la mise en page. Dans WebMatrix, faite un clic-droit sur la page Movies.cshtml et sélectionnez Launch in browse. Lorsque le navigateur affiche la page, elle ressemble à ceci :

ASP.NET a fusionné le contenu de la page Movies.cshtml dans la page _Layout.cshtml où est présent la méthode RenderBody. Et bien sur, la page _Layout.cshtml référence un fichier .css qui définit l'aspect de la page.

VI. Mettez à jour la page AddMovie pour utiliser la mise en page▲

Le réel avantage de la mise en page est que vous pouvez l'utiliser pour toutes les pages de votre site. Ouvrez la page AddMovies.cshtml.

Vous vous souvenez peut-être que la page AddMovies.cshtml d'origine avait plusieurs règles CSS pour définir l'aspect des messages d'erreurs de validation. Puisque maintenant vous avez un fichier .css pour votre site, vous pouvez y déplacer ces règles. Enlevez-les du fichier AddMovies.cshtml et ajoutez-les en bas du fichier Movies.cshtml. Déplacez les règles suivantes :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

.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;
}

Maintenant faites le même genre de changement dans AddMovies.cshtml que ce que vous venez de faire pour Movies.cshtml — ajouter Layout = "~/_Layout.cshtml"; et enlevez le balisage HTML qui est maintenant superflu. Changez l'élément <h1> par un élément <h2>. Lorsque vous êtes prêt, le code de la page ressemble à cet exemple :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.

@{
    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 elle ressemble à cette illustration.

Vous souhaitez apporter des modifications similaires aux pages du site — EditMovies.cshtml et DeleteMovies.cshtml . Cependant, avant de le faire, vous pouvez effectuer un autre changement à la mise en page qui la rendra un petit peu plus flexible.

VII. Passer un titre générique au modèle de page▲

La page _Layout.cshtml que vous avez créée a un élément <title> initialisé avec « My Movie Site ». La plupart des navigateurs affiche le contenu de cet élément comme un texte dans un onglet :

L'information titre est générique. Supposons que vous voulez que le texte du titre soit plus spécifique pour la page courante (le texte du titre est aussi utilisé par les moteurs de recherche afin de déterminer ce à quoi votre page est consacrée). Vous pouvez passer des informations depuis le contenu d'une page comme Movies.cshtml ou AddMovies.cshtml à la page de mise en page, puis utiliser ces informations pour en personnaliser la présentation.

Ouvrez à nouveau la page Movies.cshtml. Dans le code en haut, ajoutez la ligne suivante :

Sélectionnez

Page.Title = "List Movies";

L'objet Page est disponible sur toutes les pages .cshtml et sa raison d'être est le partage d'informations entre la page et sa mise en page.

Ouvrez la page _Layout.cshtml. Changez l'élément <title> afin qu'il ressemble à ce balisage :

Sélectionnez

<title>@Page.Title</title>

Ce code renvoie tout ce qui est dans la propriété Page.Title à la position à droite dans la page.

Exécutez la page Movies.cshtml. Cette fois l'onglet du navigateur montre ce que vous avez passé comme valeur à Page.Title :

Si vous voulez, regardez le source de la page dans le navigateur. Vous pouvez voir que l'élément <title> est renvoyé comme <title>List Movies</title>.

VII-A. L'objet Page▲

Page est un objet dynamique, ce qui est une fonctionnalité utile — la propriété Title n'est pas un nom fixe ou réservée. Vous pouvez utiliser n'importe quel nom pour une valeur de l'objet page. Par exemple, vous pourriez aussi bien avoir passé le titre en utilisant 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 un certain nombre de valeurs en utilisant l'objet Page. Si vous voulez passer des informations de film à la page de mise en page, vous pouvez passer des valeurs en utilisant quelque chose comme Page.MovieTitle, Page.Genre et Page.MovieYear (ou tout autre nom que vous avez inventé pour stocker l'information). La seule condition — qui est probablement évidente — 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 en utilisant l'objet Page ne se limite pas seulement au texte à afficher sur la page de la mise en page. Vous pouvez passer une valeur à la page de mise en page, et le code de celle-ci peut utiliser cette valeur afin de déterminer l'affichage ou non d'une section de la page, quel fichier .css utiliser, et ainsi de suite. Les valeurs que vous passez dans l'objet Page sont comme les autres valeurs que vous utilisez dans le code. C'est simplement que les valeurs proviennent de la page de contenu et sont passées à la page de mise en page.

Ouvrez la page AddMovie.cshtml et ajoutez une ligne en haut du code qui fournit un titre à la page AddMovie.cshtml :

Sélectionnez

Page.Title = "Add a Movie";

Exécutez la page AddMovie.cshtml. Vous voyez le nouveau titre ici :

VIII. Mise à jour des autres pages▲

Maintenant, vous pouvez finir les pages restantes de votre site afin qu'elles utilisent la nouvelle mise en page. Ouvrez EditMovie.cshtml et DeleteMovie.cshtml à leur tour et effectuez les mêmes modifications pour chacun d'eux.

Ajoutez une ligne de code qui relie à la page de mise en page :

Sélectionnez

Layout = "~/_Layout.cshtml";

Ajoutez une ligne pour définir le titre de la page :

Sélectionnez

Page.Title = "Edit a Movie";

ou :

Sélectionnez

Page.Title = "Delete a Movie";

Enlevez tous les autres balisages HTML superflus — en gros, laissez seulement les morceaux qui sont inclus dans l'élément <body> (et le bloc de code en haut).

Changer l'élément <h1> en un élément <h2>.

Lorsque vous faites ces modifications, testez chacune d'elles afin d'être sûr qu'elles s'affichent proprement et que le titre est correct.

IX. Section réflexion sur la présentation des pages▲

Dans ce tutoriel, vous avez créé une page _Layout.cshtml et utilisé la méthode RenderBody pour fusionner le contenu depuis une autre page. C'est le patterm standard pour utiliser les mises en page dans les pages Web.

Les pages de mise en page ont des fonctionnalités supplémentaires que nous n'avons pas couvert ici. Par exemple, vous pouvez imbriquer des pages de mise en page — une page de mise en page peut à son tour en référencer une autre. Des mises en page imbriquées peuvent être utiles si vous travaillez avec des sous-sections d'un site qui nécessitent différentes mises en page. Vous pouvez également utiliser d'autres méthodes (par exemple, RenderSection) pour mettre en place des sections nommées dans la page de mise en page.

La combinaison de pages de mise en page et de fichiers .css est puissante. Comme vous le verrez dans la prochaine série de tutoriel, dans WebMatrix, vous pouvez créer un site basé sur un modèle (template). Lequel vous fournit un site avec des fonctionnalités prédéfinies intégrées. Les modèles permettent un bon usage des pages de mise en page et des CSS pour créer des sites qui se ressemblent beaucoup et qui ont des fonctionnalités comme des menus. Voici une capture d'écran de la page d'accueil d'un site basé sur un modèle montrant des fonctionnalités qui utilisent des pages de mise en page et des CSS :

X. Listings des sources▲

X-A. Listing complet de la page Movie (mise à jour pour utiliser la mise en page)▲

Sélectionnez

@{
    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>

X-B. Listing complet de la page AddMovie (mise à jour de la mise en page)▲

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

@{
    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>

X-C. Listing complet de la page Delete Movie (mise à jour de la mise en page)▲

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.

@{
    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>

X-D. Listing complet de la page Edit Movie (mise à jour de la mise en page)▲

Sélectionnez

@{
    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>

XI. Prochainement▲

Dans le prochain tutoriel, vous apprendrez comment publier votre site sur internet afin que tout le monde puisse le voir.

XII. Ressources supplémentaires▲

Creating a Consistent Look — un article qui fournit des détails pour travailler avec les mises en page. Il décrit aussi comment passer une valeur à la page de mise en page qui permettra d'afficher ou de cacher un peu de contenu ;
Nested Layout Pages with Razor — le blog de Mike Brind, un exemple sur comment emboîter des pages de mise en page (inclut le téléchargement des pages).

XIII. Information sur les auteurs▲

Tom FitzMacken — Tom FitzMacken est un auteur senior dans la programmation de l'équipe suivi du contenu sur la plateforme Web et Outils.

XIV. Postface▲

XIV-A. Remerciements▲

Nous remercions François DORIN pour la relecture et la validation technique et jacques_jean pour la relecture orthographique.

XIV-B. Sources▲

Traduction de l'article de l'équipe de Microsoft ASP.NET — Introducing ASP.NET Web Pages - Creating a Consistent Layout.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Copyright © 2019 Hervé Taraveau. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.