Programowanie w asp. Net. Ćwiczenie praktyczne №2(2 godz.)



Pobieranie 56.54 Kb.
Data01.05.2016
Rozmiar56.54 Kb.
Programowanie w ASP .NET.

Ćwiczenie praktyczne №2(2 godz.)
Cele pracy:

1.Tworzenie stron ASP.Net. Wykorzystanie formularzy oraz kontrolki serwerowe ASP.NET: Panel, Table, ImageButton, LinkButton.

2. Projektowanie aplikacji ASP.NET wykorzystujące połączenie z bazą danych ACCESS. Opracowanie wiązania danych z kontrolkami DataGrid, GridView. Badanie właściwości DataGrid, GridView.
Zadania wykonywane przed przystąpieniem do realizacji p.1 :


  • Zapoznać się z pojęciami i podstawami wykorzystania kontrolek ASP.NET

  • Czym różnią się kontrolki ASP.NET od kontrolek HTML (Interfejs, Właściwości, Browser)?

  • Aplikacje typu „code-behind” (oddzielenie kodu języka programowania od języka HTML)

  • Bloki deklarowania kodu ASP.NET i kontrolek.

  • Zdarzenia i właściwości kontrolek ASP.NET.

  • Stosowanie kontrolek serwerowych ASP.NET: Panel, Table, ImageButton, LinkButton.

Kolejność wykonania ćwiczenia dla realizacji p.1:

1.1 .Stworzenie stron z wykorzystaniem kontrolki Panel.

Kontrolka Panel jest potrzebna dla reprezentowania określonego obszaru okna przeglądarki, w celu przechowywania, dynamicznego dodawania lub ukrywania innych kontrolek. Metoda ADD() kolekcji CONTROLS umożliwia dodanie dynamiczne utworzonej kontrolki do panelu.

Utwórz kontrolkę Panel, której tłem jest dowolny rysunek. Następnie utwórz 3 przyciski Button. Pierwszy przycisk ma wyświetlać napis: „To jest kontrolka” (rys.1.1), drugi przycisk - wyświetlać bądź ukrywać kontrolkę Panel, trzeci przycisk – dynamicznie dodać dwie kontrolki Label i jedną kontrolkę TextBox (rys.1.2).


Rys.1.1


Rys.1.2


Okno projektu w środowisku VisualStudio .NET z właściwościami kontrolki Panel jest pokazane na rys. 1.3.

Rys1.3.


Okno projektu z właściwościami klawisza Button jest pokazane na rys. 1.4.

Rys.1.4


Fragmenty kodu pliku WebForm1.aspx.vb dla obrabiania zdarzeń są pokazane na rys.1.5.

Public Class WebForm1

Inherits System.Web.UI.Page

Protected WithEvents Panel1 As System.Web.UI.WebControls.Panel

Protected WithEvents Button1 As System.Web.UI.WebControls.Button

Protected WithEvents Button2 As System.Web.UI.WebControls.Button

Protected WithEvents Button3 As System.Web.UI.WebControls.Button

Protected WithEvents Label2 As System.Web.UI.WebControls.Label

Protected WithEvents Label1 As System.Web.UI.WebControls.Label

Protected WithEvents LablPanel As System.Web.UI.WebControls.Label

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As _

System.EventArgs) Handles Button1.Click

Label2.Text = "

To jest kontrolka:Panel

"

End Sub


Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As _

System.EventArgs) Handles Button3.Click

LablPanel = New Label()

LablPanel.Text = "

To Jest Panel

"

LablPanel.ID = "Labl_1Panel"

Panel1.Controls.Add(LablPanel)


Dim TBoxPanel As New TextBox()

TBoxPanel.Text = "Kontrolka nr 2"

TBoxPanel.ID = "TBox_1Panel"

Panel1.Controls.Add(TBoxPanel)


Dim Label2Panel As New Label()

Label2Panel.Text = "

Sa: " + Panel1.Controls.Count.ToString()+ _

" Kontrolki

"

Label2Panel.ID = "Lab_2Panel"

Panel1.Controls.Add(Label2Panel)

End Sub


End Class
Rys.1.5
1.2.Stworzenie stron z wykorzystaniem kontrolki Table.

Kontrolka Table służy do budowania statycznych lub dynamicznych tablic zawierających statyczny tekst.

Utwórz kontrolkę Table. Następne dopisz do niej dynamicznie wiersz zawierający dwie kontrolki Label. Utwórz wie kontrolki Button – pierwsza ma wyświetlać bądź ukrywać kontrolkę Table, druga – dynamicznie dodać nowe kontrolki Label. Wygląd przeglądarki jest pokazany na rys.1. 6

Rys.1.6


Na rys. 1.7 jest pokazany wygląd przeglądarki przy naciśnięciu klawisza „Dopisz wiersz”.

Rys.1.7
Kod klasy WebForm1 jest pokazany na rys. 1.8.

Public Class WebForm1

Inherits System.Web.UI.Page

Protected WithEvents Tab As System.Web.UI.WebControls.Table

Protected WithEvents But1 As System.Web.UI.WebControls.Button

Protected WithEvents Label1 As System.Web.UI.WebControls.Label

Protected WithEvents But2 As System.Web.UI.WebControls.Button


#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.

Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init

'CODEGEN: This method call is required by the Web Form Designer

'Do not modify it using the code editor.

InitializeComponent()

End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

'Put user code to initialize the page here

End Sub
Private Sub But2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles But2.Click

Dim S() As String = {"CLR", "CTS"}

Dim RW As TableRow = New TableRow()

Dim C1 As TableCell = New TableCell()

Dim Lab1 As Label = New Label()

Lab1.Text = S(0)

Lab1.ID = "L1"

C1.Controls.Add(Lab1)

RW.Cells.Add(C1)
Dim C2 As TableCell = New TableCell()

Dim Lab2 As Label = New Label()

Lab2.Text = S(1)

Lab2.ID = "L2"

C2.Controls.Add(Lab2)

RW.Cells.Add(C2)

Tab.Rows.Add(RW)

End Sub
Private Sub But1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles But1.Click

If (Tab.Visible) Then

Tab.Visible = False

Else

Tab.Visible = True



End If

End Sub


End Class

Rys.1.8


1.3. Stworzenie stron z wykorzystaniem kontrolki ImageButton

Kontrolka ImageButton reprezentuje przycisk Button, którego tłem jest rysunek zapisany w oddzielnym pliku. Kontrolka ImageButton ma metodę OnClick, która może być użyteczna w praktycznych zastosowaniach. Z tą kontrolką jest związane zdarzenie System.Web.UI.ImageClickEventArgs, które zwraca pozycję wskaźnika myszy na rysunku kontrolki.

Utworzyć kontrolkę Labal oraz ImageButton która ma wyświetlać współrzędne kliknięcia myszką na obrazku tła kontrolki. Utworzyć przycisk Button, który ma wyświetlać bądź ukrywać kontrolkę imageButton. Ewentualny wygląd kontrolki w przeglądarce jest pokazany na rys. 1.9

Rys.1.9


Kod klasy jest pokazany na rys.1.10.

Public Class WebForm1

Inherits System.Web.UI.Page

Protected WithEvents ImgBut As System.Web.UI.WebControls.ImageButton

Protected WithEvents But As System.Web.UI.WebControls.Button

Protected WithEvents Label1 As System.Web.UI.WebControls.Label

Protected WithEvents Lab As System.Web.UI.WebControls.Label

Private Sub But_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles But.Click

If (ImgBut.Visible) Then

ImgBut.Visible = False

Else

ImgBut.Visible = True



End If

End Sub
Private Sub ImgBut_Click(ByVal sender As System.Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImgBut.Click

Lab.Text = "Wspólrzedne klikniecia : " + _

e.X.ToString() + " x " + e.Y.ToString() + ""

If ((e.X > 87) And (e.X < 118) And (e.Y > 44) And (e.Y < 67)) Then

Lab.Text += "


Trafiles w srodek obrazka!
"

Else


Lab.Text += "
Nie trafiles w srodek obrazka!
"

End If
End Sub


End Class


Rys.1.10

1.4. Stworzenie stron z wykorzystaniem kontrolki LinkButton

Kontrolka LinkButton reprezentuje łącze, którego kliknięcie myszą powoduje wywołanie wybranej metody. Kontrolki LinkButton i ImageButton zawierają zdarzenie OnCommand, dzięki któremu możliwe jest, na podstawie właściwości CommandName i/lub CommandArgument, określenie wybranej przez użytkownika kontrolki i przeprowadzenie stosownej akcji wraz z wyświetleniem odpowiedniego komunikatu. Zdarzenie OnMouseOut = „alert(‘Dziękujemy’)” jest przykładem zdarzenia wykonywanego po stronie klienta(IE) w języku JavaScript.

Wygląd IE po naciśnięciu klawisza ImageButton jest pokazany na rys. 1.11


Rys.1.11


Kod klasy WebForm1 jest pokazany na rys. 1.12

ublic Class WebForm1

Inherits System.Web.UI.Page

Protected WithEvents LinkBut1 As System.Web.UI.WebControls.LinkButton

Protected WithEvents LinkBut2 As System.Web.UI.WebControls.LinkButton

Protected WithEvents ImgBut As System.Web.UI.WebControls.ImageButton

Protected WithEvents Lab2 As System.Web.UI.WebControls.Label

Protected WithEvents Lab As System.Web.UI.WebControls.Label

Sub Wybierz(ByVal sender As System.Object, ByVal e As CommandEventArgs)

Select Case e.CommandName

Case "Where"

Lab.Text = "

Prosze czekac. Wyszykiwanie danych z 2004 roku...

"

Case "Select"

Lab.Text = "

Prosze czekac. Wyszykiwanie Autorów...

"

Case Else

Lab.Text = "

Prosze czekac. Usuwanie danych!...

"

End Select

End Sub


End Class

Rys. 1.12


2. Projektowanie aplikacji ASP.NET wykorzystujące połączenie z bazą danych ACCESS. Opracowanie wiązania danych z kontrolkami DataGrid, GridView. Badanie właściwości DataGrid, GridView.

Zadania wykonywane przed przystąpieniem do realizacji p.2:

Zapoznać się z następnymi podstawami połączenia z bazą danych w środowisku .NET:



  • Przeznaczenia obiektu DataSet.

  • Przeznaczenia obiektu OleDbConnection.

  • Przeznaczenia obiektu OleDbDataAdapter.

  • Wiązanie danych z kontrolkami ASP.NET.

  • Właściwości kontrolki DataGrid

  • Właściwości kontrolki GridView

  • Główne etapy uzyskiwania dostępu do danych w ASP.NET: 1-Ustanowienie połączenia z BD, 2- Otwarcie połączenia z BD, 3-Zapisywanie odpowiednich danych w obiekcie DataSet, 4- Skonfigurowanie obiektu DataView, aby wyświetlać dane, 5-Powiązanie serwerowego obiektu sterującego z obiektem DataView.

Kolejność wykonania ćwiczenia w p.2:

2.1 Stwórz aplikacje poszukującą dani w bazie danych w środowisku ACCESS i odwzorowującej te dani na stronie internetowej. Aplikacja musi zawierać bazę danych, kontrolkę DataGrid, Label, Button.



Rys.2.1
Projekt wykorzysta bazę w środowisku ACCESS. Baza zawiera jedną tabele „EmployeeBirthdays” z nazwami i formatami kolumn wyznaczonymi na rys.2.2.



Rys.2.2.


Przykład uzupełnienia pól tabeli „EmployeeBirthdays” jest pokazany na rys. 2.3.

Rys.2.3.
Uwaga! Kontrolka DataGrid nie ma odpowiedniej ikony graficznej w Toolbox VS2005. Dla wpisania kontrolki DataGrid do panelu DESIGN trzeba przełączyć się do panelu SOURCE oraz wpisać w sposób ręczny następujące znaczniki:





W tym przypadku kontrolka DataGrid zostaje utworzona i jest widoczna na panelu DESIGN . Wszystkie inne parametry DataGrid można wpisywać z utworzonej kontrolki w panelu DESIGN.


W listingu jest pokazany kod strony INDEX.ASPX.

Top of Form









    1. Stwórz podobną stronę za dopomogą kontrolki GridView oraz kontrolki źródła danych AccessDataSource. Właściwość DataSourceID kontrolki GridView musi odwołać się do kontrolki AccessDataSource. Kontrolka AccessDataSource zawiera swój kreator do wyznaczenia bazy danych i formowania polecenia SQL. Ten sposób tworzenia aplikacji Internetowej nie potrzebuje od programisty wpisania żadnej linii kodu.

Uwaga! Wyznaczenie kolumn w kontrolce GridView przebiega w sposób podobny do kontrolki DataGrid ale z wyznaczonymi rozbieżnościami.

    • Z początku, w kontrolce GridView, ustal AutoGenerateColumns = False.

    • Dodaj do listy odwzorowanych kolumn dwie kolumny: typu Bound Field oraz HyperLinkField.

    • W kolumnie BoundField ustal właściwość DataField=EmailAddress.

    • W kolumnie HyperLinkField :DataNavigateFields=EmailAddress, DataNavigateURLFormatString=mailto:{0}, DataTextField=FullName.

    • Kolumna HyperlinkField kontrolki GriedView w odróżnieniu od DataGried będzie prawidłowo odwzorowywać format mailto:{0} tylko wtedy, kiedy będzie przetworzona do formatu TemplateField. Dlatego wybierz stworzoną kolumnę HyperLinkField oraz naciśnij link: Convert this field into a TemplateField.

    1. Stwórz aplikacje odwzorowującą dani z bazy danych za dopomogą kontrolki „DataGrid”. Napisz kod, który włączy i ustawi paginację wyświetlanych wierszy tabeli w kontrolce DataGrid. Rozmiar przewijanej strony ma wynosić dwa wierszy tabeli w kontrolce DataGrid. Rozmiar przewijanej strony ma wynosić dwa wierszy tabeli. Aplikacja musi wykorzystać bazę danych w środowisku ACCESS, kontrolki Label, Button . Obiekty OleDbDataConnection, OleDbDataAdapter, OleDbDataSet muszą być stworzone za dopomogą wizardów VisualStudio.

Na rys.2.4 jest pokazany ewentualny wygląd aplikacji przy uruchomieniu w przeglądarce.

Rys.2.4


Na rys. 2.5. jest pokazany wygląd aplikacji po kliknięjciu następnej strony.

Rys.2.5

Na rys.2.6 jest pokazane okno projektu „Design” oraz właściwości kontrolki „DataGrid”.



Rys.2.6


Na rys. 2.7 jest pokazana zakładka „Paging” właściwości DataGrid.

Rys.2.7


Na rys. 2.8. jest pokazana zakładka Columns, gdzie są wyznaczone kolumny odwzorowane w DataGrid. Format odwzorowania danych jest wyznaczony na zakładce Format.

Rys. 2.8


W listingu są pokazane fragmenty kodu które zostali wpisane do pliku z klasą tego projektu.

Listing.


‘ część kodu do wyznaczenia obiektów DataSet, DataAdapter i in. , podobna do p.1

...


Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Me.OleDbDataAdapter1.Fill(DataSet11)

DataBind()

End Sub
Private Sub DataGrid1_PageIndexChanged(ByVal source As Object, _

ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _

Handles DataGrid1.PageIndexChanged

DataGrid1.CurrentPageIndex = e.NewPageIndex

Me.OleDbDataAdapter1.Fill(DataSet11)

DataGrid1.DataBind()

Label1.Text = "

Zostala wybrana strona(CurrentPage) i= " + _

(e.NewPageIndex + 1).ToString + "

"

Label2.Text = "

Ilosc stron(PageCount)= " + _

DataGrid1.PageCount.ToString + "

"

Label3.Text = "

PageSize = " + _

DataGrid1.PageSize.ToString + _

" rekordów

"



End Sub

2.4. Zrealizuj zadania w p.2.3 stosowne kontrolki GridView.



Literatura.

  1. Chris Payne. ASP.NET dla każdego, Helion, 2002

  2. Paweł Chłosta. ASP.NET i kolekcje C#, MIKOM, 2004-10-01

  3. Scott Worley. ASP.NET Vademecum profesjonalisty, Helion, 2003

  4. Jose Mojica. C# I ASP.NET, Helion, 2004

  5. Bill Evjen, Scott Hanselman, Devin Rader. ASP.NET 3.5 z wykorzystaniem C# I VB. Helion 2010

  6. Jesse Liberty, Dan Hurwitz. ASP.NET . Programowanie, Helion, 2007.

  7. Jesse Liberty. C#. Programowanie, Helion, 2006.

  8. Kevin Hoffman. Visual C# 2005, Helion, 2007.


Pobieranie 56.54 Kb.





©absta.pl 2020
wyślij wiadomość

    Strona główna