W poprzednich rozdziałach kursu omówione zostały niektóre metody prezentowania na stronach internetowych informacji, pobranych z bazy danych. Celem przyświecającym projektantom i twórcom technologii ASP.NET było uczynienie procesu tworzenia aplikacji internetowych możliwie prostym. W rozdziale tym postaram się zaprezentować działanie przykładowych kontrolek, wprowadzonych w najnowszej wersji środowiska .NET Framework, dzięki którym aplikacje internetowe możemy tworzyć szybciej i prościej niż kiedykolwiek dotąd.
Większość tworzonych obecnie aplikacji internetowych w swoim działaniu wykorzystuje bazę danych. Źródłem informacji mogą być zarówno zaawansowane systemy bazodanowe, takie jak: Oracle czy SQL Server, mniejsze bazy z rodzaju MySql’a, czy też w końcu fizyczne pliki umieszczone na dysku, wykorzystujące na przykład format XML. Do operowania na danych pochodzących z wymienionych źródeł programiści ASP.NET 2.0 mogą wykorzystać dwie grupy kontrolek. Pierwsza z nich - data-source controls – to jak sama nazwa wskazuje obiekty reprezentujące źródła danych. Druga grupa kontrolek pozwala natomiast na prezentowanie na formatce, pobranych z bazy informacji.
Spróbujmy wyświetlić w oknie przeglądarki zawartość tabeli z bazy danych. Wykorzystamy do tego kontrolkę o nazwie GridView. Kontrolka ta umożliwia dynamiczną generację tabeli, odpowiadającej schematowi danych pobranych ze źródła. W ASP.NET 2.0 zastąpiła ona używaną wcześniej powszechnie kontrolkę DataGrid. Kontrolkę typu GridView odnajdziemy w pasku narzędzi w grupie „Data” po przeciągnięciu jej na powierzchnie formatki będziemy musieli wybrać źródło danych. Ponieważ nie zdefiniowaliśmy do tej pory żadnego obiektu tego typu wybieramy opcję „New Data Source”. Na ekranie powinnyśmy wówczas ujrzeć poniższe okienko.
Do wyboru mamy sześć podstawowych źródeł danych:
- AccessDataSource – umożliwiają korzystanie w prosty sposób z informacji, zapisanych w bazach Microsoft Access
- SqlDataSource – umożliwia dostęp do systemów takich jak: MS SQL Server, czy Oracle oraz innych, do których możliwość połączenia gwarantuje platforma .NET
- DataSetDataSource – dane pobierane są z obiektu typu DataSet.
- ObjectDataSource – jako źródła danych wykorzystywane są obiekty biznesowe
- XmlDataSource – umożliwia odczytanie informacji z plików XML
- SiteMapDataSource – daje możliwość wykorzystania jako źródła danych hierarchicznej mapy witryny.
My wybierzemy oczywiście SqlDataSource. Kolejnym krokiem będzie wybranie połączenia z bazą lub zdefiniowanie nowego. Proces ten został omówiony w rozdziale 16. kursu. Następnie możemy zdecydować się na zapisanie parametrów połączenia w pliku konfiguracyjnym aplikacji. Kolejnym krokiem, będzie zdefiniowanie zapytania w języku SQL, pobierającego z bazy odpowiednie dane. Na początku zdecydujmy się na najprostsze: „SELECT * FROM [Customers]”.
Klikamy przycisk „Next”. W oknie, które teraz ujrzymy na ekranie możemy przetestować nasze zapytanie. Jeżeli wszystko przebiegło pomyślnie, po naciśnięciu przycisku „Test Query”, powinniśmy zobaczyć pożądane informacje.
Kończymy edycję obiektów. Na ekranie powinny widoczne być teraz dwa obiekty. Pierwszy z nich, klasy DataView, powinien posiadać widoczne już nazwy kolumn, odpowiadające kolumnom w stosownej tabeli bazy danych. Drugim widocznym na formatce obiektem jest obiekt klasy SqlDataSource.
Po uruchomieniu naszej strony w przeglądarce powinnyśmy otrzymać następujący efekt.
W przypadku wybrania tabeli „Customers” w oknie przeglądarki nie mieszczą się wszystkie wyświetlane wiersze tabeli. Obiekt DataView pozwala w bardzo prosty sposób wprowadzić stronicowanie wyników zapytania. W tym celu w oknie Visual Studio klikamy prawym przyciskiem myszy na obiekcie DataView, wyświetlamy okno „GridView Task”, w którym zaznaczamy opcję: „Enable Paging”. Domyślnie na ekranie wyświetlane będzie teraz jednocześnie tylko dziesięć pierwszych wierszy z tabeli. Chcąc zmienić ich ilość musimy ustawić odpowiednią wartość pola PageSize (na przykład za pośrednictwem okna „Properties”).
Tabela, którą ujrzeliśmy poprzednio na ekranie wyświetla pobrane dane w najprostszy możliwy sposób. Często pracując nad stroną graficzną serwisu internetowego będziemy musieli zmienić wygląd tego obiektu. Oczywiście możemy zrobić to ręcznie, edytując plik w rozszerzeniem *.aspx.. Dzięki Visual Studio możemy jednak wybrać jeden z kilkunastu zdefiniowanych szablonów. W tym celu klikamy ponownie prawym przyciskiem myszy na obiekcie DataView i wybieramy opcję: „Auto Format”.
Efekt naszej pracy powinien prezentować się następująco:
Kolejną funkcjonalnością, którą udostępnia obiekt DataView, jest możliwość zmiany za jego pośrednictwem zawartości wyświetlanej tabeli. W tym celu musimy ponownie skonfigurować nasze źródło danych (prawy przycisk myszy na obiekcie SqlDataSource1, następnie opcja: Configure Data Source”). W oknie, zatytułowanym „Configure Select Statement” klikamy tym razem na przycisku„Advanced”. Następnie zaznaczamy opcję „Generale INSERT, UPDATE, and DELETE statements”.
Zmodyfikujmy teraz kolejny raz właściwości obiektu DataView w następujący sposób:
AutoGenerateDeleteButton = true
AutoGenerateUpdateButton = true;
Teraz otwierając formatkę w oknie przeglądarki będziemy mogli usuwać i edytować wiersze w tabeli, wykorzystując dwie nowe kolumny, zawierające przyciski „Delete” oraz „Edit”.
Do wstawiania nowych wpisów do tabeli może posłużyć nam kontrolka DetailsView. Podobnie jak poprzednia, daje nam ona możliwość przeglądania zawartości bazy danych, ale także dodawania w prosty sposób nowych wpisów do tabeli. Po przeciągnięciu na formatkę obiektu DetailsView, jako źródło danych podajemy istniejący już obiekt SqlDataSource1. Następnie zaznaczamy opcje „Enable Inserting”. Jest to już cała praca, którą musimy wykonać. Poniżej przytaczam kod, wygenerowany przez Visual Studio.
<asp:DetailsView ID="DetailsView1" runat="server"
AllowPaging="True" AutoGenerateRows="False"
BackColor="White" BorderColor="#999999"
BorderStyle="Solid" BorderWidth="1px"
CellPadding="3" DataKeyNames="CustomerID"
DataSourceID="SqlDataSource1" ForeColor="Black"
GridLines="Vertical" Height="50px"
Width="125px">
<FooterStyle BackColor="#CCCCCC" />
<PagerStyle BackColor="#999999" ForeColor="Black"
HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID"
ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName"
HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="ContactName"
HeaderText="ContactName" SortExpression="ContactName" />
<asp:BoundField DataField="ContactTitle"
HeaderText="ContactTitle" SortExpression="ContactTitle"
/>
<asp:BoundField DataField="Address" HeaderText="Address"
SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City"
SortExpression="City" />
<asp:BoundField DataField="Region" HeaderText="Region"
SortExpression="Region" />
<asp:BoundField DataField="PostalCode"
HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" />
<asp:BoundField DataField="Phone" HeaderText="Phone"
SortExpression="Phone" />
<asp:BoundField DataField="Fax" HeaderText="Fax"
SortExpression="Fax" />
<asp:CommandField ShowDeleteButton="True"
ShowEditButton="True" ShowInsertButton="True" />
</Fields>
<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White"
/>
<EditRowStyle BackColor="#000099" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle
BackColor="#CCCCCC" />
</asp:DetailsView>
Kontrolka ta wyświetla w tym przypadku na ekranie szczegółowe informacje związane z konkretnym wierszem w bazie danych. Klikając na udostępniany przez nią przycisk „New” możemy także w prosty sposób dodać nowy wpis do bazy.
