70 – 562: Using Master Pages

24. March 2010 07:23 przez Daniel Jarzynka 0 w 70-562 | Techniczne

Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.

W dzisiejszej lekcji mowa będzie o dwóch rzeczach a mianowicie: Master Pages oraz Content Pages.

Czym jest Master Page

Najprościej mówiąc Master Page jest to jakaś główna część naszej strony, która pozostaje niezmienna, w której możemy umieścić jakąś wspólną funkcjonalność strony. Np. layout, który ma jakiś top, stopkę i menu. Wrzucamy to w master page bo jest to część która nie zmienia się na naszej stronie. Wymienny jest tylko środek layoutu czyli strony typu Content, o których powiemy sobie później.
Master page definiujemy w pliku z rozszerzeniem *.master. Plik ten jest bardzo podobny do zwykłej strony .aspx. Jedną z różnic pomiędzy tymi plikami jest to, że master page dziedziczy po klasie MasterPage.

Tworzenie Master Page

Aby stworzyć nowy master page wybieramy: Add New Item –> Master Page.
Przykładowy kod takiego pliku może wyglądać tak:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   3: <html xmlns="http://www.w3.org/1999/xhtml">
   4:   <head runat="server">
   5:     <title>Contoso Inc.</title>
   6:     <asp:ContentPlaceHolder id="head" runat="server">
   7:     </asp:ContentPlaceHolder>
   8:     <link href="SiteStyles.css" rel="stylesheet" type="text/css" />
   9:   </head>
  10: <body>
  11:   <form id="form1" runat="server">
  12:    <div class="header">
  13:     <img src="images/contoso.jpg" alt="Contoso" />
  14:     <a href="products.aspx" class="topNav"> Products</a>
  15:     <a href="services.aspx" class="topNav"> Services</a>
  16:     <a href="about.aspx" class="topNav"> About</a>
  17:     <a href="contact.aspx" class="topNav"> Contact</a>
  18:    <hr /> </div>
  19:    <asp:ContentPlaceHolder id="ContentPlaceHolderMain" runat="server">
  20:     </asp:ContentPlaceHolder>
  21:    <div class="footer">Copyright <%= DateTime.Now.Year.ToString() %> 
  22:        Contoso </div>
  23: </form>
  24: </body>
  25: </html>

W tym przykładzie dołączyliśmy do master page style css, zrobiliśmy za ich pomocą nawigację, cały top oraz stopkę strony. Pomiędzy górną nawigacja a stopką strony widzimy miejsce, w którym umieszczane będą strony z treścią.
image

Tworzenie stron z zawartością

Tworzenie stron z treścią/zawartością (ang. content pages) tworzy się praktycznie identycznie jak zwykłe strony. Jedyną rzeczą, którą dodatkowo musimy zrobić podczas tworzenia, jest zaznaczenie checkboxa “Select Master Page”.  W projekcie asp .net web application nie będzie checkboxa ale inny typ widoku: content web form. Tam również zostaniemy poproszeni o wybranie pliku z master page.
Po stworzeniu strony zobaczymy mniej więcej coś takiego:

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" 
   2:    AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
   3:    Inherits="test.Web.WebForm1" %>
   4: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   5: </asp:Content>
   6:  
   7: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain"
   8:     runat="server">
   9: </asp:Content>

Widzimy, że w dyrektywach dodana jest MasterPageFile. Dalej mamy dwa ContentPlaceHolder’y. Odpowiadają one tym samym, które są w master page. Jeśli np. wstawimy naszą zawartość w ContentPlaceHolderMain, wtedy pojawi się ona (bazując na przykładzie pokazywanym wyżej) między nawigacją na górze a stopką.

Tworzenie właściwości w Master Page

W master page możemy tworzyć właściwości w celu udostępnienia jakiś specyficznych ustawień itp. Np. jeśli wiele stron z zawartością potrzebuje Id użytkownika, możemy stworzyć właściwość wewnątrz master page i udostępnić ją do różnych stron. W poniższym przykładzie tworzymy właściwość UserId, do której będziemy mieli dostęp jak tylko będziemy mieli referencję w stronie z zawartością:

   1: public string UserId
   2: {
   3:     get { return (String)Session["UserId"]; }
   4:     set { Session["UserId"] = value; }
   5: }

 

Aby teraz skorzystać z niej w stronie z zawartością należy dodać nową dyrektywę:

   1: <%@ MasterType VirtualPath="~/SiteMaster.Master" %>

Po dodaniu dyrektywy przechodzimy do code behind strony i tam odwołujemy się do naszej właściwości poprzez klasę master np. tak:

   1: Login1.UserName = Master.UserId;


To tyle z grubsza o Master Page :) Zapraszam w piątek na kolejną część z naszej serii :)

Tagi: , , ,

E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Post RSSRSS comment feed

70 - 562: Performing Site Navigation

17. March 2010 08:21 przez Daniel Jarzynka 0 w 70-562 | Techniczne

Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.

W dzisiejszym artykule powiemy sobie o nawigacji na stronie, używaniu SiteMap, przekierowywaniu użytkowników itp.

Wybór metody nawigacji po stronie

Istnieje kilka sposobów nawigacji między stronami ASP .NET

Nawigacja po stronie klienta

Chyba najprostszym sposobem nawigacji między stronami jest użycie kontrolki HyperLink i ustawienie właściwości NavigateUrl na adres, do którego chcemy dotrzeć.
Kontrolka HyperLink w naszym kodzie przyjmuje taką postać:

   1: <asp:HyperLink ID="Hyperlink1" runat="server" 
   2:     NavigateUrl="~/Navigate.aspx">Idz do navigate</asp:HyperLink>

Kontrolka generuje taki kod html:

   1: <a id="HyperLink1" href="Navigate.aspx">Idz do navigate</a>

Powyższy efekt możemy również uzyskać za pomocą java scriptu i buttona. Aby to osiągnąć tworzymy na formatce button i w zdarzeniu onclick wywołujemy funkcję napisaną w javascript.
Kod przycisku:

   1: <input id="Button1" type="button"
   2:        value="Idz do navigate"
   3:        onclick="return Button1_onclick()" />

Kod funkcji javascript, który umieszczamy w sekcji <head>:

   1: <script language="javascript" type="text/javascript">
   2: function Button1_onclick()
   3: {
   4:     document.location = "Navigate.aspx";
   5: }
   6: </script>

Cross-Page Posting

“Cross-page posting” jest pożądany gdy dane są zgromadzone na jednej stronie a wyświetlane i przetwarzane na innej (np. kiedy chcemy przesłać dane z formularza na inną stronę itp.).
W poniższym przykładzie strona nazwana DataCollection.aspx zawiera TextBox nazwany TextBox1 oraz przycisk, który zawiera właściwość PostBackUrl ustawioną na “~/ProcessingPage.aspx”. Właściwość PostBackUrl wskazuje na stronę, do której zostaną przesłane dane w celu późniejszego przetworzenia.
Po wysłaniu danych, strona która przetwarza dane wywołuje kod i wstawia dane w etykiete (która nazywa się LabelData):

   1: protected void Page_Load(object sender, EventArgs e)
   2:   {
   3:       if(Page.PreviousPage == null)
   4:       {
   5:           LabelData.Text = "No previous page in the post";
   6:       }
   7:       else
   8:       {
   9:           LabelData.Text = 
  10:                     ((TextBox)PreviousPage.FindControl("TextBox1")).Text;
  11:           
  12:       }
  13:   }

Przekierowywanie użytkowników

Często zachodzi potrzeba przekierowania użytkownika na inną stronę np. kiedy użytkownik wyśle jakieś dane, które zostaną poprawnie przetworzone, przekierowujemy go na stronę główną itp.
Aby skorzystać z przekierowania w ASP .NET musimy użyć metody Redirect, którą zawiera Page.Response.
Poniższy kod pokazuje jak przekierować użytkownika na stronę “OrderDetails.aspx”, po kliknięciu w przycisk:

   1: protected voit ButtonSubmit_Click(object sender, EventArgs e)
   2: {
   3:   Response.Redirect("OrderDetails.aspx");
   4: }

Używanie kontrolki SiteMap

Site map jest to plik XML posiadający rozszerzenie .sitemap. Zawarta w nim jest struktura, mapa nawigacji naszej strony. Aby dodać węzły, dodajemy elementy <siteMapNode>. Posiadają one atrybuty title (który jest wyświetlany użytkownikowi), url (który mówi do jakiej strony będzie nawigacja) oraz description (który posiada informację na temat strony). SiteMap może wyglądać np. tak:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <siteMap>
   3:   <siteMapNode title="Menu" description="Menu strony">
   4:     <siteMapNode title="Aktualnosci" description="Aktualnosci" url="~/Aktualnosci/default.aspx" />
   5:     <siteMapNode title="Kadra" description="Kadra" url="~/Kadra/Kadra.aspx" />
   6:     <siteMapNode title="asd" description="asd" url="~/asd\asd.aspx" />
   7:   </siteMapNode>
   8: </siteMap>

Używanie klasy SiteMap

Dzięki klasie SiteMap mamy dostęp do pliku z nawigacją z poziomu Code-behind. W klasie tej mamy dwie główne właściwości: RootNode oraz CurrentNode. Obie zwracają instancję SiteMapNode. Obiekt SiteMapNode reprezentuje więzły z site map oraz posiada właściwości Title, Url oraz Description. W celu uzyskania dostępu do węzłów musimy skorrzystać z właściwośći ParentNode, ChildNodes, NextSibling, PreviousSibling. Poniżej przykład użycia klasy SiteMap:

   1: protected void Button1_Click(object sender, EventArgs e)
   2: {
   3:   Response.Redirect(SiteMap.CurrentNode.ParentNode.Url);
   4: }

Wyświetlanie mapy strony

Aby wyświetlić informacje zawarte w pliku XML naszej mapy strony, musimy umieścić kontrolkę nawigacji na stronie. Kontrolka ta potrafi używać pliku site map bądź kontrolki SiteMapDataSource.
SimpleMapDataSource jest kontrolką stworzoną do programowego dostępu do pliku site map. Po przeciągnięciu na formatkę, kontrolka połączy się automatycznie z plikiem site mapy.

Do zobrazowania naszej mapy strony możemy użyć gotowych kontrolek np.
Menu:

clip_image001

TreeView:

image 

SiteMapPath:

image

Tagi: , ,

E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Post RSSRSS comment feed

70-562: Exploring Common Server Controls

10. March 2010 06:44 przez Daniel Jarzynka 0 w 70-562 | Techniczne

Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.

W ASP .NET mamy do dyspozycji wiele gotowych kontrolek serwerowych. W dzisiejszym artykule opiszemy 5:

  • Label
  • TextBox
  • Button
  • CheckBox
  • RadioButton

Etykieta

Etykieta (ang. Label), wyświetla tekst w określonym miejscu na stronie. Etykiety używamy, kiedy w pewnym momencie chcemy zmienić jakiś tekst na stronie (który jest wyświetlany właśnie w postaci etykiety). Nie powinno używać się etykiety, kiedy wiemy że nasz tekst nie będzie się zmieniał.

Kontrolki do formatki możemy dodawać na dwa sposoby. Albo przeciągamy je z tool boxa albo piszemy w źródle ręcznie. Aby dodać ręcznie etykietę należy napisać:

   1: <asp:Label ID="Label1" runat="server" style="color: Blue" Text="Some Text"></asp:Label>

Teraz aby zmienić właściwość text musimy wejść do Code behind i napisać:

   1: Label1.Text="Inny tekst"

Pole tekstowe

Pole tekstowe (ang. text box) jest to kontrolka, dzięki której użytkownik może komunikować się z aplikacją za pomocą wpisywanych danych (np. może wpisać login, hasło itp). Pole tekstowe ma bardzo dużo fajnych właściwości. Np. zmieniając wartość właściwości TextMode z SingleLine na MultiLine, otrzymujemy duże pole tekstowe z możliwością wpisania kilku wierszy. Innym przykładem właściwości jest MaxLength, która służy do określania maksymalnej ilości znaków wpisanych do pola.

image

Przycisk

Kontrolka przycisku (ang. button control), wyświetla na stronie przycisk, który po naciśnięciu wysyła Post Back do serwera. Przycisk może być stworzony jako submit button lub command button. Submit button wykonuje prosty Post Back do serwera. Możemy go obsłużyć w zdarzeniu Click.
Przycisk użyty jako command button, jest jednym z zestawu przycisków, które pracują razem jako grupa takich jak toolbar. Aby zdefiniować ze nas przycisk ma być command, należy przypisać wartość do właściowści CommandName. W poniższym przykładzie zdefiniujemy sobie Command Button’y, które symulują odtwarzacz. Kiedy użytkownik kliknie na jeden z nich, zdarzenie Command wywoła się na serwerze. To zdarzenie przyjmuje instancje CommandEventArgs jako parametr:

image

   1: protected void Playback_Command(object sender, CommandEventArgs e)
   2: {
   3:  switch (e.CommandName)
   4:  {
   5:     case "Back":
   6:       Response.Write("back");
   7:       break;
   8:     case "Pause":
   9:       Response.Write("pause");
  10:       break;
  11:     case "Play":
  12:       Response.Write("play");
  13:       break;
  14:     case "Forward":
  15:       Response.Write("forward");
  16:       break;
  17:  }
  18: }

Pole wyboru

Pole wyboru (ang. check box), zwraca true jeśli zaznaczone i false jeśli odznaczone. Ciekawym zdarzeniem w check boxie jest CheckedChanged, który zostaje wywołany w momencie zmiany stanu pola. Wtedy należy też zmienić właściwość AutoPostBack na  true, żeby po zmianie stanu postback się wykonał.

Przycisk opcji

Podobny do check boxa jednak można go grupować. Dzięki grupowaniu można zaznaczyć tylko jedną opcję. Aby pogrupować opcję należy ustawić we właściwości GroupName wszędzie tę samą nazwę.

Tagi: , ,

E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Post RSSRSS comment feed

70-562: Creating a Web Site and Adding New Web Pages

3. March 2010 07:51 przez Daniel Jarzynka 0 w 70-562 | Techniczne

Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.

Witajcie w moim pierwszym artykule, w nowej serii wpisów. Dziś troszkę podstaw. Powiemy o tworzeniu nowego projektu w Visual Studio, dodawaniu nowych stron itp.

Tworzenie strony internetowej

Visual Studio 2008 pozwala nam stworzyć projekt typu Web Site, z rozróżnieniem tego w jaki sposób chcemy mieć dostęp do zawartości strony. Możemy stworzyć projekt Web podłączony do systemu plików na naszym komputerze, na serwerze IIS lub FTP. Wybór odpowiedniej opcji zależy od tego w jaki sposób chcemy uruchomić, zarządzać i wdrażać nasz projekt WWW. Poniżej krótki opis tych opcji:

File System – pliki naszego projektu Web trzymamy w wybranym przez nas katalogu. Web Site używa wtedy lekkiego serwera ASP.NET, który dostarczany jest razem z Visual Studio. Ta opcja dobra jest wtedy, kiedy chcemy uruchomić i debugować nasz projekt Web lokalnie.

FTP – ta opcja przydatna jest wtedy, gdy chcemy łączyć się do naszej strony za pośrednictwem FTP w celu zarządzania plikami, na zdalnym serwerze.

HTTP – używany, kiedy pracujemy ze stroną umieszoną wewnątrz IIS (lokalnie bądź na zdalnym serwerze).

Tworzenie projektu Web Site

Poniżej opis tworzenia nowego projektu typu Web Site w Visual Studio:

1. W Visual Studio wchodzimy w File->New->Website. Spowoduje to otwarcie okienka jak na obrazku poniżej:

image

2. Wybieramy typ Web Site, ścieżkę w której chcemy zapisać oraz zostawiamy domyślny język.
3. Możemy wybrać również wersję frameworka, w której będziemy pisali naszą aplikację. Do wyboru mamy wersję 2.0, 3.0 oraz 3.5.
4. Naciskamy ok i cieszymy się nowo powstałym projektem :)

Jak pisałem wcześniej, podczas tworzenia nowego projektu możemy wybrać 3 opcję, o których pisałem wyżej: File System, FTP oraz HTTP. W zależności od tego, którą opcję wybierzemy, możemy być poproszeni o dodatkowe informację np. login i hasło do serwera.

Tworzenie projektu Web Application

Poza projektem typu Web Site, Visual studio dostarcza nam jeszcze jeden typ projektu, który stworzy nam stronę internetową. Ten typ to ASP .NET Web Application. Projekt tego typu jest użyteczny w momencie, gdy chcemy dodać aplikację do już istniejącego solution, które zawiera już inne projekty, bądź wtedy gdy chcemy nasz projekt traktować mniej jak typowa strona a bardziej jak standardowy projekt visual studio.

Plik solution w projekcie typu Web Site

W momencie utworzenia projektu Web site, Visual Studio tworzy “solution file” (.sln) oraz ukryty plik “solution user options” (.suo). Plik solution jest tekstowym plikiem, który zawiera informacje o:

  • liście projektów, które będą załadowane w Visual Studio i stworzą całe Solution
  • wersji frameworka, w której solution jest stworzone
  • domyślnym języku dla solution
  • liście zależnych projektów
  • kontroli źródła takiej jak Microsoft Visual SourceSafe
  • liście dodatków, które są dostepne

Plik .suo jest plikiem binarnym, który zawiera różne ustawienia użytkownika takich jak:

  • zadania użytkownika
  • Break pointy oraz ustawienia “watch’y”
  • położenie okien Visual Studio

     

Tworzenie stron ASPX

Po tym, jak utworzyliśmy nasz projekt, wypadałoby dodać do niego jakąś podstronę :) Aby to osiągnąć należy:

1.Kliknąć prawym przyciskiem na naszym projekcie i wybrać Add->New Item
2.Jako rodzaj nowego elementu wybieramy Web Form oraz domyślny język

image

 

 

Budowa strony ASPX

Strona w ASP.NET zawiera interfejs użytkownika, kod, który wykonuje się na serwerze oraz dyrektywy do łączenia interfejsu z kodem. Standardowa strona ASP.NET posiada rozszerzenie .ASPX i zawiera 3 sekcje:

  • Dyrektywy strony – ta sekcja używana jest do ustawiania środowiska oraz określa jak strona powinna być przetwarzana.
  • Kod – zawiera kod do obsługiwania zdarzeń, które wykonywane są na serwerze. Domyślnie Visual Studio tworzy oddzielny plik, który trzyma kod. Plik nazywany “Code-behind” jest dołączany do pliku .ASPX. Jego rozszerzenie do .cs bądź .vb.
  • Wygląd strony – pisany w htmlu. Zawiera tagi html, css, kontrolki, text itp.

Kompilacja strony

Większość aplikacji Web nie jest prekompilowana. Zamiast tego, strona i kod są kopiowane na serwer, i tam, przez niego, dynamicznie kompilowane.

Tagi: , ,

E-mail | Kick it! | DZone it! | del.icio.us | Permalink | Post RSSRSS comment feed