Ausführliche Erläuterung der Masterseite in ASP.NET 2.0
Autor:Eve Cole
Aktualisierungszeit:2009-06-30 16:37:05
Um das Problem der Änderung der gesamten Website beim Ändern einer Seite während des Webdesigns zu verringern, wurde nach dem Upgrade von vs2003 auf vs2005 das Konzept des Masters hinzugefügt.
Sie können es sich als „Webseitenvorlage“ vorstellen. Der Unterschied besteht darin, dass Sie nicht mehr jede Seite aktualisieren müssen. Sobald Sie sie ändern, werden alle Webseiten ein für alle Mal geändert.
Beginnen wir mit einer einfachen Master-Verwendungsdemonstration:
1. Öffnen Sie zunächst Visual Studio 2005 und erstellen Sie eine neue asp.net-Website, ein neues Dateisystem und C#.
2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste, um ein neues Element zu erstellen:
3. Wählen Sie die Masterseite aus:
4. Öffnen Sie MasterPage.master. Darin befindet sich ein Contentplaceholder-Steuerelement. Achten Sie darauf, nichts in das Steuerelement zu schreiben.
Wir gehen zur Entwurfsansicht und fügen Kopf- und Fußzeilentext außerhalb dieses Steuerelements hinzu.
5. Nach dem Speichern können wir damit weitere Seiten erstellen. Es gibt zwei Methoden. 1. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Masterseite und klicken Sie auf „Inhaltsseite hinzufügen“. 2. Erstellen Sie ein neues Element im Projektmappen-Explorer und aktivieren Sie „Masterseite auswählen“, wenn Sie die ASPX-Seite erstellen.
6. Wählen Sie die entsprechende Masterseite aus
7. Der neu generierte Seitenquellcode enthält nur diese wenigen Sätze:
- <%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%> - <asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
- </asp:Content>
|
Wir können ein Inhaltssteuerelement sehen, das dem ContentPlaceHolder1-Steuerelement der Masterseite entspricht und in die Ansichtsseite konvertiert wird:
8. Der Text in der Kopf- und Fußzeile ist grau und wir können ihn nur im Inhalt bearbeiten.
Besuchen Sie nach dem Speichern die Seite default2.aspx, F5. Wir sehen die Seite:
9. Wie erwartet werfen wir einen Blick auf den Quellcode:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www .w3.org/1999/xhtml">
- <head><title>
- UntitledPage
- </title></head>
- <body>
- <formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm ">
- <div>
- <inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/> - </div>
- <div>
- thisisthepage'sheader<br/>
- thispage'scontent:hello,world!<br/>
- thisisthepage'sfooter </div>
- </Form>
- <
/Körper> - </html>
|
Der Masterinhalt wird in einem Div platziert, aber die Inhaltsseite wird nicht in einem separaten Div platziert, was bedeutet, dass den Unterseiten im Master kein redundanter Code hinzugefügt wird. Dies bringt uns große Flexibilität bei der Programmierung und dem Webseitenlayout. Wir können die CSS+DIV-Positionierung voll ausnutzen und auch die Tabellenpositionierung nutzen. Es ist nicht erforderlich, beim Ändern jede Seite zu ändern.
10. Für einen Master, der kein fester Inhalt ist, können wir mehrere ContentPlaceHolder1 für das Layout verwenden. Das folgende Beispiel verwendet eine Tabelle zur Positionierung:
11. Auf der entsprechenden Unterseite gibt es zwei Inhalte:
Generierter Code:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www .w3.org/1999/xhtml">
- <head><title>
- UntitledPage
- </title></head>
- <body>
- <formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm ">
- <div>
- <inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/> - </div>
- <div>
- thisisthepage'sheader<br/>
- <table>
- <tr>
- <td>
- ohmyContent1
- </td >
- <td>
- himyContent2
- </td>
- </tr>
- <
- /
- table>
- thisisthepage'sfooter
- &
- nbsp
- ;
|
12. Obwohl CSS auch DIV verwenden kann, um dieses Problem zu lösen, ist das Erscheinungsbild einiger nicht standardmäßiger Steuerelemente mit CSS schwer zu steuern. Wenn Sie einen anderen Satz von Mastern erstellen, MasterPage2.master, können Sie mittlere dynamische Einstellungen vornehmen:
protected void Page_PreInit(object sender, EventArgs e) { MasterPageFile = "~/MasterPage2.master"; } |
Lassen Sie uns zuerst darauf eingehen. Es wird gesagt, dass auch verschachtelte Anwendungen verwendet werden können, aber das reicht für den Moment. Lassen Sie uns das nächste Mal darüber sprechen.