Witam w kolejnym wpisie z cyklu wprowadzającego do ASP .NET. Dziś pokaże jak obsługiwać proste kontrolki oraz jak przygotować własną kontrolkę, która przyda nam się w następnym wpisie 
W ASP .NET kontrolki możemy sobie obsługiwać prawie tak samo jak w WinForms. Wystarczy że przeciągniemy je z toolboxa na formatkę a później oprogramujemy. Dziś pokażę jak obsługiwać kontrolki Label, Literal, HyperLink, Panel oraz Button. Zrobimy sobie wyświetlanie aktualności na naszej stronie. Zaczynamy:)
Otwieramy nasz projekt i wchodzimy do Default.aspx, ponieważ to tu będziemy wyświetlali aktualności. Będą one wyświetlane w postaci: Nagłówek i wycinek aktualności. Po kliknięciu w nagłówek zostaniemy przekierowani na stronę, gdzie zobaczymy całą treść aktualności oraz będziemy mogli ją skomentować.
Do nagłówka użyjemy kontrolki HyperLink. Otwieramy toolboxa i przeciągamy kontrolkę do naszego kodu:
ToolBox i HyperLink
Po przeciągnięciu kontrolki wygeneruje nam się taki kod:
<asp:HyperLink runat="server">HyperLink</asp:HyperLink>
Żeby to teraz jakoś działało należy ustawić właściwości kontrolki. My póki co ustawimy wszystko ręcznie. Ustawmy jej jakieś ID oraz właściwość NavigateUrl, dzięki której po kliknięciu na kontrolkę, zostaniemy przekierowani, do podanej przez nas, strony:
<asp:HyperLink ID="Header" NavigateUrl="News.aspx" runat="server">Jestem pierwszym wpisem</asp:HyperLink>
Jak widzimy chcemy zostać przekierowani na stronę News.aspx. Stwórzmy ją sobie, wybierając naszego MasterPage. Teraz stworzymy treść wpisu, zapisując ją do kontrolki Literal. Możemy to zrobić na dwa sposoby. Albo przypisując tekst do właściwości Text:
<asp:Literal Id="Content" runat="server" Text="Jakiś tekst" />
Albo tak:
<asp:Literal Id="Content" runat="server" > Jakiś tekst</asp:Literal>
W zasadzie nie ma różnicy jak to wpiszemy bo w każdym przypadku tekst jest zapisywany do właściwości Text No i to tyle od strony wyświetlania aktualności.
W stronie News.aspx umieszczamy sobie jako nagłówek kontrolkę Label i ustawiamy jej właściwość Text. Pod spodem umieszczamy Literal z tekstem wpisu. Ta część nie różni się od poprzedniej ale chcemy jeszcze dodać możliwość komentarzy, więc musimy umieścić 3 kontrolki TextBox oraz Button. TextBox służy do wprowadzania tekstu, Button to zwykły przycisk Pierwsze dwa textboxy zostawiamy praktycznie bez zmian. Nadajemy im tylko ID:
<asp:TextBox ID="Nick" runat="server" /><br /> <asp:TextBox ID="Email" runat="server" /><br />
W trzecim TextBoxie oprócz ID zmieniamy również właściwości Width, Height oraz TextMode. Szerokość i wysokość jest jasna a cóż to takiego TextMode? Jest to właściwość, dzięki której możemy ustawić np. tryb, w którym kontrolka będzie mogła przyjąć wiele wierszy (ustawiamy jej wtedy Multiline):
<asp:TextBox ID="Comment" runat="server" Width="200" Height="100" TextMode="MultiLine" />
Teraz pozostaje nam umieścić przycisk, dzięki któremu wyślemy dane z TextBoxów np. do bazy. Przeciągamy kontrolkę z ToolBoxa i nadajemy jej ID oraz Text:
<asp:Button runat="server" ID="SendButton" Text="Wyślij" />
Żeby oprogramować przycisk wejdźmy w tryb Design naszej strony i kliknijmy na przycisk dwa razy.
Tryb design
Po kliknięciu dwa razy na button, zostanie wygenerowana metoda
protected void SendButton_Click(object sender, EventArgs e)
Póki co nie interesują nas jej parametry Zostanie również dodane zdarzenie onClick do Buttona, dzięki któremu po kliknięciu na przycisk wywoła się powyższa metoda.
<asp:Button runat="server" ID="SendButton" Text="Wyślij" onclick="SendButton_Click" />
W dzisiejszym wpisie nie zaprezentuje zapisywania danych. Opiszę to w następnej części. Dziś chcę pokazać jeszcze jedną ważną rzecz, dzięki której będziemy mogli generować nasze aktualności na podstawie bazy danych. Stworzymy naszą własną kontrolkę, którą później będziemy powielać w zależności od tego ile np. mamy wpisów w bazie. Aby to zrobić tworzymy nowy obiekt w naszym projekcie (PPM na projekcie -> new item) i wybieramy WebUserControl. Jest to plik, w którym będziemy trzymali naszą kontrolkę. Teraz kopiujemy do niej to co stworzyliśmy w Default.aspx, tylko nie uzupełniamy właściwości Text
i NavigateUrl. Następnie musimy wejść do tzw. CodeBehind. Klikamy prawym przyciskiem w puste pole gdzieś w kodzie i wybieramy View Code:
View Code
Przełączyliśmy się do widoku kodu C#. Musimy teraz stworzyć właściwości, które następnie będziemy wykorzystywali do dynamicznego ustawiania kontrolek (czyli ich właściwości Text, NavigateUrl itp). Będzie potrzeby również pusty konstruktor. Kod:
public ControlNews() { }
public string Head
{
set { Header.Text = value; }
}
public string NavigateUrl
{
set { Header.NavigateUrl = value; }
}
public string ShortContent
{
set { Content.Text = value; }
}
Jak widzimy w powyższym kodzie odnosimy się, we właściwości, do poszczególnych kontrolek, za pomocą ich ID i ustawiamy im wartość. I już Mamy stworzoną własną kontrolkę. Teraz umieścimy ją w Default.aspx. Wchodzimy do Default.aspx, kasujemy to co tam mieliśmy napisane i przeciągamy kontrolkę Panel. Jest to taka przestrzeń, w której umieścimy naszą kontrolkę. Nadajmy mu id np. ControlPanel. Musimy jeszcze zarejestrować naszą kontrolkę. W tym celu dodajemy nową dyrektywę, która wygląda tak:
<%@ Register Src="ControlNews.ascx" TagName="NewsControl" TagPrefix="uc2" %>
Jak widzimy podajemy po prostu ścieżkę do kontrolki oraz ustawiamy tag, dzięki któremu można się do niej odnosić. Teraz przechodzimy do CodeBehind pliku Default.aspx. Dziś tylko pokażę jak ustawić kontrolkę na przykładowe dane. Aby to zrobić w metodzie Page_Load dodajmy kod:
//pobieranie kontrolki var newsControll = (ControlNews)LoadControl(@"ControlNews.ascx"); //dodawanie kontrolki do panelu ControlPanel.Controls.Add(newsControll); //ustawianie właściwości kontrolki newsControll.NavigateUrl = "News.aspx"; newsControll.Head = "Naglowek"; newsControll.ShortContent = "skrócony opis";
Myślę że opis w komentarzach wystarczy do zrozumienia powyższego kodu
Na dziś to tyle. Jeśli chcecie to w ramach treningu możecie stworzyć własną kontrolkę do widoku Aktualności ale tego szczegółowego. Kod do dzisiejszego wpisu można pobrać STĄD.
Do “usłyszenia” niebawem
