Page d'accueil>Tutoriel de programmation réseau>Tutoriel ASP.NET

Explication détaillée de la page maître dans ASP.NET 2.0

Auteur：Eve Cole Date de mise à jour：2009-06-30 16:37:05
Afin de réduire le problème de la modification de l'ensemble du site lors de la modification d'une page lors de la conception Web, le concept de maître a été ajouté après la mise à niveau de vs2003 vers vs2005.

Vous pouvez le considérer comme un « modèle de page Web ». La différence est que vous n'avez plus besoin de mettre à jour chaque page. Une fois que vous la modifiez, toutes les pages Web seront modifiées une fois pour toutes.

Commençons par une simple démonstration d'utilisation principale :

1. Ouvrez d’abord Visual Studio 2005, créez un nouveau site Web asp.net, un système de fichiers, C#.

2. Dans l'Explorateur de solutions, cliquez avec le bouton droit pour créer un nouvel élément :



3. Sélectionnez la page maître :



4. Ouvrez MasterPage.master, il y a un contrôle contentplaceholder à l'intérieur, veillez à ne rien écrire dans le contrôle.

Nous passons en mode conception et ajoutons du texte d’en-tête et de pied de page en dehors de ce contrôle.



5. Après avoir enregistré, nous pouvons l’utiliser pour créer d’autres pages. Il existe deux méthodes. 1. Cliquez avec le bouton droit n'importe où sur la page maître et cliquez sur Ajouter une page de contenu ; 2. Créez un nouvel élément dans l'Explorateur de solutions et cochez « Sélectionner la page maître » lors de la génération de la page aspx.



6. Sélectionnez la page maître correspondante



7. Il n'y a que ces quelques phrases dans le code source de la page nouvellement générée :


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%＞
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"＞
  3. ＜/asp:Content＞

Nous pouvons voir un contrôle de contenu, qui correspond au contrôle ContentPlaceHolder1 de la page maître et est converti en page d'affichage :



8. Le texte de l'en-tête et du pied de page est gris et nous ne pouvons le modifier que dans le contenu.

Après avoir enregistré, visitez la page default2.aspx, F5., nous voyons la page :


9. Comme prévu, jetons un œil au code source :


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
    12. ceci est l'en-tête
  12. de
    13. la
  13. page＜br/＞
  14. le contenu de cette page : bonjour le monde !＜br/＞ ceci est le pied de page de la page
  15. ＜/div＞ ＜ /forme＞
  16. ＜/corps＞
  17. ＜/html＞

Le contenu principal est placé dans un div, mais la page de contenu n'est pas placée dans un div séparé, ce qui signifie qu'aucun code redondant ne sera ajouté aux sous-pages du maître. Cela nous apporte une grande flexibilité dans la programmation et la mise en page des pages Web. Nous pouvons utiliser pleinement le positionnement CSS+DIV, et nous pouvons également utiliser le positionnement des tableaux. Il n'est pas nécessaire de modifier chaque page lors de la modification.

10. Pour un master qui n'est pas un élément de contenu fixe, nous pouvons utiliser plusieurs ContentPlaceHolder1 pour la mise en page. L'exemple suivant utilise un tableau pour le positionnement :



11. Il y aura deux contenus dans la sous-page correspondante :



Code généré :


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/＞
  10. ＜/div＞
  11. ＜div＞
    12. ceci est l'en-tête de
  12. la page＜br/＞
  13. ＜table＞
  14. ＜tr＞
  15. ＜td＞
  16. ohmyContent1
  17. ＜/td＞
  18. ＜td＞
  19. himyContent2
  20. ＜/td＞
  21. ＜/tr＞
  22. ＜ /table＞
  23. ceci est le pied de page de la page
  24. ＜/div＞
  25. ＜/form＞
  26. ＜/body＞
  27. ＜/html＞

12. Utilisez-le de manière flexible. Bien que CSS puisse également utiliser DIV pour résoudre ce problème, l'apparence de certains contrôles non standard est difficile à contrôler avec CSS. Si vous créez un autre ensemble de maîtres, MasterPage2.master, vous pouvez définir des paramètres dynamiques moyens :

protected void Page_PreInit (expéditeur de l'objet, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

Allons-y d'abord. On dit que les applications imbriquées peuvent également être utilisées, mais c'est suffisant pour l'instant. Utilisons-le en conjonction avec le thème. Parlons-en la prochaine fois.
Articles connexes