MasterPage w ASP.NET Paulo Gliwa Data opracowania: 23 VI 2017 Wstęp. Podczas tworzenia aplikacji internetowych na platformie ASP.NET mamy do użytku wiele przydatnych narzędzi przyśpieszających i ułatwiających naszą pracę. Jednym z takich narzędzi jest MasterPage. Co to jest MasterPage? MasterPage to swego rodzaju definicja-wzór strony. Szablon, do którego można wkleić uzupełniające elementy, które razem tworzą stronę gotową do wyświetlenia przez użytkownika. Korzystanie z MasterPage nie jest wymagane ale zdecydowanie otwiera nowe możliwości, które opiszę w tym streszczeniu. Tworzenie MasterPage. Aby stworzyć MasterPage należy utworzyć nowy plik z rozszerzeniem.master i dodać do niego kod strony jaki chcemy aby powtarzał się na stronach, które dziedziczą z naszego MasterPage, a następnie w miejscach, które zostaną później uzupełnione na stronach ASP należy umieścić kontrolkę ContentPlaceHolder i nadać jej id. Dodatkowo na górze strony należy dodać dyrektywę <%@ Master Language="C#" AutoEventWireup="true" CodeFile="nazwaMasterPage.cs" Inherits="nazwaMasterPage" %>. Następnie tworzymy plik o takiej samej nazwie, ale z rozszerzeniem.cs, w którym znajdować się będzie kod C# (w moim przypadku, można też użyć Visual Basic) dla naszego MasterPage. ASP.NET dzieli strony ASP i pliki MasterPage na dwa pliki w celu łatwiejszego zarządzania kodem. Każda strona składa się z pliku.aspx (kod xhtml) oraz.cs (kod C#) i podobnie jest z MasterPage, dlatego utworzyliśmy dwa pliki. Cały proces można wykonać również za pomocą kreatora w VisualStudio. Wystarczy kliknąć prawym klawiszem myszy na nazwie projektu i dodać nowy plik MasterPage, a kod zostanie wstawiony automatycznie, po czym my musimy go dostosować do swoich potrzeb. VisualStudio zapewnia nam także widok Design, w którym możemy edytować niektóre elementy strony (tekst, ułożenie paneli i kontrolek, rozmiar paneli itp.) i widzimy jak będzie wyglądać nasza strona po uruchomieniu jej w przeglądarce, a także widok Split, który dzieli obszar roboczy na widok Design i Source, tak aby widzieć podgląd strony i kod źródłowy jednocześnie. Wszystkie zmiany wprowadzone w widoku Design są automatycznie wstawiane w kodzie źródłowym i vice versa. Używanie MasterPage. W celu wykorzystania głównej funkcjonalności MasterPage, należy utworzyć nową stronę ASP z rozszerzeniem.aspx (najlepiej za pomocą kreatora VisualStudio, wtedy utworzy nam 1
dodatkowo plik.aspx.cs i doda do obu plików odpowiedni kod) i wybrać dla niej nasz utworzony MasterPage. Do pliku.aspx zostaną dodane kontrolki Content w ilości oraz o ContentPlaceHolderID odpowiadającym kontrolkom ContentPlaceHolder znajdującym się w pliku.master. Przykładowy plik MasterPage.master: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <asp:contentplaceholder id="contentplaceholderhead" runat="server"> <link href="app_themes/default_theme/style.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <div id="site"> <div id="header"> FORUM C-sharp <div id="site_nav"> <ul> <asp:hyperlink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx" Text="Strona Główna">Strona Główna</asp:HyperLink> <asp:hyperlink ID="accountHyperLink" runat="server" NavigateUrl="~/MyAccount.aspx?view=info">Moje konto (<asp:label ID="accountNameLabel" runat="server"></asp:label>)</asp:hyperlink> <asp:hyperlink ID="loginHyperLink" runat="server" NavigateUrl="~/Login.aspx" Text="Login">Zaloguj</asp:HyperLink> <asp:hyperlink ID="logoutHyperLink" runat="server" NavigateUrl="~/Logout.aspx" Text="Logout">Wyloguj</asp:HyperLink> <asp:hyperlink ID="registerHyperLink" runat="server" NavigateUrl="~/Register.aspx" Text="Zarejestruj">Zarejestruj</asp:HyperLink> </ul> <div id="content"> <asp:contentplaceholder id="contentplaceholdermain" runat="server"> <div id="footer"> <span class="user_count">uzytkownicy: <asp:label ID="userCountLabel" runat="server"></asp:label></span> <span class="creator">paulo Gliwa @ 2017</span> </form> </body> </html> 2
Przykładowy plik uzupełniający zawartość MasterPage, Login.aspx: <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Account_Login" %> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server"> login: <asp:textbox ID="loginTextBox" runat="server" Width="134px"></asp:TextBox> haslo:<asp:textbox ID="passwordTextBox" runat="server" Width="134px" TextMode="Password"></asp:TextBox> <asp:button ID="loginButton" runat="server" OnClick="loginButton_Click" Text="Zaloguj" Width="178px" /> <asp:label ID="loginInfoLabel" runat="server"></asp:label> Dzięki MasterPage każda strona jest o kilkadziesiąt linijek krótsza, przez co łatwiej jest zarządzać kodem, a także pliki zajmują o wiele mniej miejsca. Dodatkowo przy każdej zmianie wyglądu strony wystarczy zmiana treści jednego pliku, a nie mozolna edycja każdego pliku co może doprowadzić do niespójności pomiędzy stronami, na przykład gdy w jednym pliku zapomnimy edytować jeden z elementów. Dodatkowe funkcjonalności MasterPage. MasterPage to nie tylko sprytne kopiowanie zawartości, ale także sposób na zarządzanie nią. W kodzie źródłowym pliku MasterPage możemy przechowywać różne informacje, do których chcemy uzyskać dostęp na wielu stronach. Jeżeli na przykład data ostatniej modyfikacji portalu nie pojawia się w stopce (która często jest umieszczana w MasterPage), ale bardzo często umieszczamy taką informację na podstronach i za każdym razem znajduje się ona w innym miejscu, to ponownie, aby nie zmieniać każdego pliku z osobna, możemy utworzyć publiczną zmienną w pliku MasterPage.master.cs Przykładowy plik MasterPage.master.cs: using System; public partial class MasterPage : System.Web.UI.MasterPage DateTime datamodyfikacji; protected void Page_Load(object sender, EventArgs e) //Page_Load wykonuje się za każdym razem gdy użytkownik uruchamia stronę this.datamodyfikacji = new DateTime(2017, 6, 22); public DateTime DataModyfikacji get return datamodyfikacji; set datamodyfikacji = value; Aby wykorzystać tą zmienną na stronie ASP, należy najpierw dodać do niej dyrektywę <%@ MasterType virtualpath="~/master.master" %>. To pozwala nam na dostęp do funkcji i atrybutów pliku MasterPage. 3
Przykładowy plik Info.aspx: <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Info.aspx.cs" Inherits="Info" %> <%@ MasterType virtualpath="~/master.master" %> <asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server"> <asp:label ID="lastUpdatedLabel" runat="server"></asp:label> Przykładowy plik Info.aspx.cs: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Info : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) //pobranie daty ostatniej modyfikacji portalu z pliku MasterPage i ustawienie jako //tekst etykiety "lastupdatedlabel" lastupdatedlabel.text = Master.DataModyfikacji.toString(); Tak przygotowana strona ASP zostanie połączona z MasterPage i wyświetli etykietę (czyli tekst) z datą 22-06-2017 w miejscu ContentPlaceHolderMain. Co gdy z jakiegoś powodu nie dostarczymy zawartości w kontrolce Content, lub jedna strona różni się nieznacznie od reszty, więc chcielibyśmy zmienić zawartość MasterPage tylko na tej stronie? ASP.NET dostarcza nam w tym przypadku możliwość ustawienia zawartości domyślnej w pliku MasterPage. Aby ustawić zawartość domyślną wystarczy w pliku MasterPage.master dodać ją do kontrolki ContentPlaceHolder. Przykład: <asp:contentplaceholder id="contentplaceholderhead" runat="server"> To jest zawartość domyślna. Dodaj coś w kontrolce Content o ContentPlaceHolderID="ContentPlaceHolderHead" aby ją zmienić. W tym przypadku plik Info.aspx po scaleniu z MasterPage wyświetliłby powyższy tekst, ponieważ nie dodaliśmy nic do pierwszej kontrolki Content: 4
Wybór MasterPage. Jeżeli mamy taką potrzebę, możemy stworzyć dwa lub więcej plików MasterPage i zmieniać je podczas uruchomionej aplikacji (lub użytkownik może wybrać MasterPage jeżeli mu to umożliwimy). Dokonujemy tego za pomocą instrukcji w funkcji Page_PreInit() 1 : this.masterpagefile = nazwamasterpage ; Przy czym musi istnieć MasterPage o nazwie nazwamasterpage. Z mojego doświadczenia dynamiczny wybór pliku MasterPage jest rzadko przydatny. Niektórzy mogą pokusić się o zaimplementowanie w ten sposób funkcjonalności wyboru wyglądu portalu przez użytkownika, jednak jest to błędne podejście i należy w tym celu użyć innego narzędzia ASP.NET jakim jest Motyw (ang. Theme). Motywy to w skrócie zbiór plików.skin oraz plików graficznych i plików CSS, dzięki którym możemy wpłynąć na wygląd portalu. Opisanie tej funkcjonalności zajęłoby kolejny referat, więc w tym skupiłem się tylko na MasterPage. Wnioski. Jak widać z powyższych punktów, MasterPage w ASP.NET daje nam możliwość zaoszczędzenia czasu, kodu (a zatem i zasobów w pamięci przy bardzo rozbudowanych aplikacjach z wieloma podstronami). Podczas mojej pracy nad portalem dyskusyjnym zauważyłem, że bardzo często sięgałem do funkcji dostarczonych przez Microsoft w tej technologii i znacznie przyśpieszały one moją pracę. MasterPage jest tylko jednym z bardzo wielu przydatnych narzędzi frameworka ASP.NET i opisanie szczegółowo każdego z nich wymagałoby napisania obszernej książki, można więc wyobrazić sobie jak bardzo ułatwia on szybkie tworzenie skomplikowanych aplikacji. 1. Funkcja Page_PreInit wykonywana jest w trakcie inicjalizacji strony i należy ją dodać do pliku nazwastrony.aspx.cs jeżeli chcemy z niej skorzystać. 5