13. Tworzenie własnych kontrolek przez użytkowników. Cześć 1.

W procesie tworzenia aplikacji ASP.NET praktycznie cały czas korzystamy z udostępnianych przez środowisko kontrolek. Większość obiektów tego typu, których możemy w danej chwili wykorzystać znajduje się na pasku narzędzi. Aby wykorzystać, obecną tam kontrolkę najczęściej wystarczy po prostu przeciągnąć ją na akutalnie edytowaną formatkę. Kontrolki udostępniane wraz ze środowiskiem Visual Studio mają rozmaite zastosowania. Mogą one reprezentować obiekty znadujące się na stronach internetowych, takie jak: ciągi znakowe, pola tekstowe, pola wyboru i tym podobne. Mogą one również służyć do walidacji danych wejściowych, reprezentować źródła danych, raporty i wiele, wiele innych. Każdy programista .NET po pewnym czasie zaczyna odczuwać potrzebe stworzenia własnych objektów tego typu.

Kontrolki zasadniczo możemy podzielić na klika grup. Pierwsza z nich, to tak zwane „kontrolki użytkowników”. Są one tworzone w trybie wizualnej edycji i zapisywane są w postaci plików *.ascx. Obiekty tego rodzaju wykorzystywane są zazwyczaj tylko w obrębie pojedynczego projektu. Nie można niestety umieszczać ich w pasku narządzi. Druga grupa to kontrolki kompilowane do plików *.dll i tworzone w trybie wizualnym. Kontrolki tego typu mogą być umieszczane w pasku narzędzi, co znacznie ułatwia wykorzystywanie ich w wielu różnych projektach. Binarne kontrolki mogą być również tworzone za  pomocą generowania elementów html w kodzie źródłowym. Obiekty tego typu mogą być również umieszczane w pasku narzędzi, ich tworzenie wymaga jednak stworzenia o wiele większej ilości kodu.

Przygodę z tworzeniem własnyc kontrolek rozpocznijmy od obiektów opisywanych w angielsko-języcznej literaturze, jako: Web User Control. Składają się one z wymieszanych ze sobą elementów html-a oraz kontrolek z kodem wykonywanym po stronie serwera. Kontrolki tego typu reprezenują często pewien fragment strony internetowej pojawiający się na wielu formatkach wchodzących w skład witryny. Kontrolki tego typu nie mogą być umieszczane w pasku narzędzi, ich kod źródłowy musi być więc umieszczany w każdym projekcie, w którym mają być wykorzystywane.

Po stworzeniu nowego projektu w Visual Studio domyślnie otrzymujemy jedną pustą formatkę. Następnie dodajmy do projektu nowy element (Website ->Add New Item). W oknie króre pojawi się po wybraniu powyższej opcji zaznaczny obiekt Web User Control. Po naciśnięciu przycisku „Add” do naszego projektu zostanie dodana nowa, pusta kontrolka. W „Solution Explorerze” w Visual Studio będziemy mogli zobaczyć dwa nowe pliki tworzące kontrolkę. Pierwszy z nich, z rozszerzeniem *.ascx jest odpowiednikiem pliku formatki *.aspx. Natomiast plik z rozszerzeniem *.cs (także podobnie jak w przypadku formatek) zawierać będzie kod, wykonywany po stronie serwera.

Kontrolki użytkownika edytujemy w ten sam sposób jak zwykłe formatki. Możemy umieszczać na nich wszystkie kontrolki udostępniane w tym trybie edycji w pasku narzędzi.

Poniżej przedstawiony jest wygląd przykładowej kontrolki, stworzonej z Visual Studio 2005. znajdują się na niej dwa pola tekstowe, oraz przycisk. Wygląd kontrolki możemy modyfikować w ten sam sposób, co zwykłą formatkę, tzn. przeciągając elementy zamieszczone w pasku narzędzi i modyfikując ich właściwości, bądź też zmieniając bezpośrednio zawartość pliku z rozszerzeniem *.ascx.

Zawartość pliku MyControl.ascx, reprezentującego przedstawioną powyżej formatkę, przedstawia się następująco:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyControl.ascx.cs" Inherits="MyControl" %>

Login: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
Hasło:&nbsp;<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Zaloguj" />

Kliknijmy teraz dwukrotnie na przycisk “Zaloguj”, obecny na kontrolce. Zostaniemy wówczas przeniesieni do pliku MyControl.ascx.cs, zawierającego kod odpowiedzialny za działanie naszej kontrolki.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class MyControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {

    }
}

Łatwo możemy zauważyć, że zawartość tego pliku, jest bardzo podobna do kodu klas, reprezentujących formatki ASP.NET. Podobnie jak ona, nasza klasa zawiera metodę Page_Load, wywoływaną w momencie ładowania formatki. Na ekranie możemy dostrzec również metodę Button1_Click (na razie pustą), zawierającą kod wywoływany w momencie naciśnięcia przycisku „Zaloguj”. Podstawową różnicą w stosunku do „zwykłych” sieciowych formatek jest fakt, że klasa reprezentująca kontrolkę dziedziczy po klasie „System.Web.UI.UserControl” (a nie jak poprzednik, po: System.Web.UI.Page).

Spróbujmy nadać teraz naszej kontrolcę jakąś funkcjonalność. Wyobraźmy sobie, że po naciśnięciu przycisku zostanie sprawdzane podane przez użytkownika login i hasło. Jeżeli wprowadzone dane będą poprawne, na stronie pojawi się stosowny komunikat, w przeciwnym przypadku system poprosi o podanie prawidłowego loginu i hasła.

Kod implementujący powyższą funkcjonalność przedstawiony jest poniżej. Uwaga – w rzeczywistości nigdy nie powinniśmy umieszczać wymaganych haseł bezpośrednio w kodzie języków, w których tworzymy naszą aplikację. Hasła powinny być przechowywane poza aplikacją (na przykład w bazie danych), koniecznie w formie zaszyfrowanej. Szczegółowe informacje na temat procesu logowania i przyznawania użytkownikom uprawnień do określonych zasobów zostanie omówiony w dalszej części kursu.

protected void Button1_Click(object sender, EventArgs e)
{
      if (this.txtLogin.Text == "User1" & this.txtPassword.Text == "MyPassword")
      {
            this.Response.Write("Logowanie poprawne");
      }
      else
      {
            this.Response.Write("Podałeś niepoprawny login lub hasło");
      }
}

Żeby przetestować działanie stworzonej przez nas kontrolki, musimy umieścić ją na formatce *.aspx. Możemy dodać w tym celu do projektu nowy obiekt WebForm, lub wykorzystać w tym celu jeden z już istniejących. Następnie otwieramy edytowaną formatkę (koniecznie w trybie „Desing”), zaznaczamy w „Solution Explorerze” stworzoną przez nas kontrolkę (a dokładnie, reprezentujący ją plik *.ascx) i przeciągamy ją na powierzchnię edytowaną powierzchnię. W oknie Visual Studio powinniśmy ujrzeć wówczas następujący widok.

Przyjrzyjmy się jeszcze zawartości kodu formatki, na której została umieszczona kontrolka. Uważni czytelnicy bez problemu odnajdą nowo dodane do pliku linie.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="MyControl.ascx" TagName="MyControl" TagPrefix="uc1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:MyControl ID="MyControl1" runat="server" />

    </div>
    </form>
</body>
</html>

Na zakończenie tego rozdziału chciałbym pokazać, w jaki sposób w kodzie strony możemy odwoływać się do stworzonych przez nas kontrolek, znajdujących się na tej stronie. Wykorzystamy do tego metodę FindControl.

Wyobraźmy sobie, że chcemy by na przy pierwszym załadowaniu strony nasza kontrolka, o nazwie MyControl1, pozostawała niewidoczna. W tym celu w metodzie Page_Load implementujemy poniższy kod:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Web.UI.Control c = this.Page.FindControl("MyControl1");
        c.Visible = false;
    }
}

Chcąc uzyskać dostęp, do indywidualnych właściwości, czy metod kontrolki, możemy dokonać rzutowania, tak jak przedstawiono to poniżej:

MyControl c = (MyControl)this.Page.FindControl("MyControl1");