Strony Wzorcowe (Master Pages) - Przykład [PL]

W ramach kontynuacji tematu Stron Wzorcowych, dziś utworzymy projekt o nazwie "MyMasterPage", w którym zaprezentowane zostaną:

• witryna z dwoma stronami wzorcowymi
• użytkownik ma do wyboru, z której strony wzorcowej chce korzystać
• strona zawartości modyfikuje dane w kontrolkach strony wzorcowej

W tym celu należy wykonać następujące kroki:

1. Tworzymy projekt MyMasterPage
2. Usuwamy Default.aspx - nie jest potrzebna taka strona, według domyślnego szablonu
   
3. Dodajemy stronę wzorcową Add->New Item->Master Page->nazywamy go Main.Master
4. Na górze strony dodajemy sobie napis w nagłówku z tytułem strony, oraz jakieś linki jako menu:

   <h1>Moja strona</h1>
       <hr />
       <div style="width:auto; clear:both;">
       <p>Menu: <a href="~/Default.aspx">Home</a>, <a href="http://www.google.com">Wyszukiwarka</a></p>
       <hr />
       </div>
   

5. Na dole dodajemy stopkę:
   

   <div style="width:auto; clear:both;"><hr /><p>Footer</p></div>

6. Dodajemy stronę zawartości Add->New Item->Web Content Form->nazywamy Default.aspx i wybieramy Main.Master jako strona wzorcowa dla tej strony
7. Na stronie dodajemy DopDownList i wypełniamy go elementami Master (o wartości Master.Master) oraz Secondary (o wartości Secondary.Master)
8. Dodajemy przycisk "Submit" (ustawiamy mu właściwość UseSubmitBehavior=true)
9. Pierwszy test - powinniśmy zobaczyć stronę złożoną ze strony wzorcowej i zawartości
10. Dodajemy drugą stronę wzorcową o nazwie Secondary:
• w której nagłówek jest następujący:

      <h1>Moja strona</h1>
      <hr />
      <div style="width: 200px; float: left; height: auto;">
          <p>Menu: <a href="~/Default.aspx">Home</a>, <a href="http://www.google.com">Wyszukiwarka</a></p>
      </div>

• stopka jest taka sama jak poprzednio
• a główny ContentPlaceHolder znajduje się wewnątrz obszaru:

  <div style="width: auto; float: left;">

11. Dla DropDownList'y obsługujemy zdarzenie "SelectedIndexChanged":

Session["master"] = this.DropDownList1.SelectedValue;

12. Dla strony Default.aspx obsługujemy zdarzenie "Page_PreInit":

    protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Session["master"] != null)
        {
            MasterPageFile = (string)Session["master"];
        }
    }

13. Teraz możemy już przetestować jak działa zmiana szablonu strony wzorcowej po kliknięci na przycisk Submit (uwaga po zmianie trzeba na niego kliknąć dwa razy)
14. Teraz dodatkowo jeszcze mały przykład w dostępie do strony wzorcowej z poziomu strony zawartości:
15. Dodajemy etykietę Label do obydwu stron wzorcowych:

    <asp:Label ID="Label1" runat="server"></asp:Label>
    

16. Na stronie zawartości dodajemy TextBox:

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

17. obsługujemy zdarzenie Page_Load:

    ((Label)Master.FindControl("Label1")).Text = this.TextBox1.Text;

18. Co w efekcie daje możliwość wyświetlenie w etykiecie znajdującej się na stronie wzorcowej informacji ze strony zawartości.

Na końcu chciałbym dodać, że kod z przykładu dostępny jest tutaj.