Microsoft.NET: ASP.NET Web Forms + Entity Framework (Database First) Do realizacji ćwiczeń potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2012. Celem ćwiczeń jest konfrontacja dwóch sposobów realizacji komunikacji z bazą danych w aplikacjach ASP.NET Web Forms. Pierwszy, klasyczny, polega na użyciu kontrolek obsługujących komunikację z bazą danych w języku SQL. Cechuje się on przemieszaniem logiki prezentacji z logiką biznesową, co w dużych projektach utrudnia rozwój aplikacji. Drugi sposób opiera się o wyodrębnienie w aplikacji warstwy dostępu do danych (Data Access Layer DAL). Aktualnie preferowaną technologią implementacji DAL w aplikacjach.net jest ADO.NET Entity Framework, oparty o koncepcję odwzorowania obiektoworelacyjnego (O/RM). Ćwiczenie 1 Celem ćwiczenia jest przygotowanie prostej aplikacji ASP.NET, w której warstwa prezentacji komunikuje się bezpośrednio z bazą danych. Podejście to sprawdza się jedynie w prostych aplikacjach, gdyż może prowadzić do duplikowania kodu odpowiedzialnego za komunikację z bazą danych i utrudnia jego pielęgnację, a ponadto ściśle uzależnia warstwę prezentacji od schematu bazy danych. Kroki ćwiczenia: 1. Utworzenie nowej witryny (Web Site). a) Uruchom narzędzie Microsoft Visual Studio.
b) Z menu głównego wybierz File New Web Site. Wybierz szablon ASP.NET Empty Web Site, język Visual C# i lokalizację File System. Zaakceptuj zaproponowany katalog lub zmień go na inny gdy nie masz prawa zapisu w proponowanym katalogu. Kliknij przycisk OK. 2. Utworzenie połączenia z bazą danych w środowisku MS Visual Studio a) W panelu Server Explorer wywołaj prawym klawiszem myszy menu kontekstowe dla węzła Data Connections i wybierz opcję Add Connection.
b) Jako źródło danych wybierz Microsoft SQL Server Database File. Kliknij przycisk Continue. c) Pobierz na dysk lokalny plik bazy danych Instytut.mdf. Wróć do Visual Studio i korzystając z przycisku Browse... zlokalizuj pobrany na dysk plik bazy danych.
d) Przetestuj połączenie przyciskiem Test Connection i w przypadku powodzenia kliknij przycisk OK. e) W panelu Server Explorer rozwiń węzeł reprezentujący utworzone połączenie, następnie rozwiń węzeł Tables aby upewnić się, że w bazie danych dostępna jest tabela PRACOWNICY. (Możesz podejrzeć zawartość tabeli PRACOWNICY wywołując prawym klawiszem myszy menu kontekstowe i wybierając z niego opcję Show Table Data.) 3. Utworzenie formularza do edycji informacji o pracownikach. a) Korzystając z menu kontekstowego w panelu Solution Explorer dodaj do projektu nową stronę (Web Form) i nazwij ją SqlDataSource.aspx. Zwróć uwagę aby zaznaczona była opcja Place code in separate file.
b) Przejdź do edycji strony SqlDataSource.aspx w trybie Design. c) Przejdź do panelu Server Explorer. Rozwiń gałąź reprezentującą utworzone wcześniej połączenie z bazą danych. Następnie rozwiń dla tego połączenia gałąź Tables. Techniką drag-and-drop umieść tabelę PRACOWNICY na stronie SqlDataSource.aspx. d) W menu podręcznym dla umieszczonej przez kreator kontrolki typu GridView zaznacz opcje Enable Editing i Enable Deleting. e) Zapisz wszystkie zmiany (np. File Save All). f) Uruchom stronę wybierając z menu kontekstowego opcję View in Browser. Strona w przeglądarce powinna zawierać tabelkę z danymi wszystkich pracowników z możliwością ich edycji i usuwania.
4. Otwórz stronę w dwóch przeglądarkach. Sprawdź co stanie się w przypadku współbieżnej modyfikacji tego samego wiersza. W tym celu: a) w pierwszej przeglądarce kliknij Edit dla któregoś wiersza b) w drugiej przeglądarce kliknij Edit dla tego samego wiersza c) w obu przeglądarkach zmodyfikuj płacę podstawową tego samego pracownika, ustawiając dwie różne wartości d) kliknij Update najpierw w jednej a potem w drugiej przeglądarce. Ćwiczenie 2 Celem ćwiczenia jest modyfikacja strony z poprzedniego ćwiczenia poprzez konfigurację optymistycznego zarządzania współbieżnością. Kroki ćwiczenia: 1. Kliknij znacznik inteligentny kontrolki SqlDataSource i wybierz opcję Configure Data Source... 2. Przejdź do ekranu Configure the Select Statement, kliknij przycisk Advanced i zaznacz pole wyboru Use Optimistic Concurrency. Następnie kliknij OK i Finish. 3. Obejrzyj zmienione wskutek włączenia optymistycznego zarządzania współbieżnością właściwości kontrolki SqlDataSource: ConflictDetection (CompareAllValues zamiast OverwriteChanges) i DeleteQuery/UpdateQuery, których klauzula WHERE została rozszerzona o warunki odwołujące się do oryginalnych wartości.
4. Przetestuj zachowanie strony przy współbieżnych modyfikacjach (sposobem z pkt.4 poprzedniego ćwiczenia). 5. W obecnej postaci aplikacji nie występuje problem ślepego nadpisywania zmian dokonanych przez inną transakcję. Problemem jest jednak to, że modyfikacje drugiej transakcji są ignorowane bez żadnego komunikatu dla użytkownika. Aby wykryć konflikt operacji i poinformować użytkownika o jego wystąpieniu umieścimy na stronie etykietę z komunikatem o błędzie, która będzie widoczna, gdy operacja UPDATE lub DELETE nie znajdzie żadnego pasującego do warunku WHERE wiersza w bazie danych: a) Umieść na stronie kontrolkę etykiety (Label). Zmień jej identyfikator na ErrorLabel. Wprowadź dla niej stosowny tekst i ustaw jej właściwość widzialności na False. b) W palecie właściwości komponentu GridView przełącz się na zakładkę Events i utwórz procedury obsługi zdarzeń RowDeleted i RowUpdated. c) Wprowadź następującą treść utworzonych metod obsługi zdarzeń: protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e) { if (e.affectedrows == 0) ErrorLabel.Visible = true; else ErrorLabel.Visible = false; } protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e) { if (e.affectedrows == 0) { ErrorLabel.Visible = true; e.keepineditmode = true; GridView1.DataBind(); } else ErrorLabel.Visible = false; } d) Ponownie przetestuj zachowanie strony przy współbieżnych modyfikacjach.
e) Aktualnie komunikat o błędzie staje się widoczny gdy wystąpi błąd, a znika po udanej modyfikacji. Komunikat powinien jednak znikać również wtedy, gdy użytkownik po wystąpieniu błędu zrezygnuje z modyfikacji. Dodaj obsługę zdarzenia RowCancelingEdit w kontrolce GridView polegającą na uczynieniu etykiety z komunikatem o błędzie niewidoczną. Ćwiczenie 3 Celem ćwiczenia jest przygotowanie prostej aplikacji ASP.NET komunikującej się z bazą danych poprzez Entity Framework z przetestowaniem zapytań realizowanych poprzez LINQ To Entities i Entity SQL. W tym ćwiczeniu powiązanie komponentu GridView z wynikiem zapytania zostanie zrealizowane ręcznie tj. bez pomocy kontrolek EntityDataSource / LinqDataSource. Kroki ćwiczenia: 1. Utworzenie nowej witryny (Web Site). a) Uruchom narzędzie Microsoft Visual Studio jeśli nie jest jeszcze uruchomione. b) Z menu głównego wybierz File New Web Site. Wybierz szablon ASP.NET Web Forms Site, język Visual C# i lokalizację File System. Zaakceptuj zaproponowany katalog lub zmień go na inny gdy nie masz prawa zapisu w proponowanym katalogu. Kliknij przycisk OK. 2. Dodanie pliku danych SQL Server Express do projektu a) W panelu Solution Explorer wywołaj prawym klawiszem myszy menu kontekstowe dla folderu App_Data i wybierz opcję Add Existing Item. Wskaż pobrany na dysk lokalny plik Instytut.mdf. b) Po dodaniu pliku do projektu wywołaj dla niego w panelu Solution Explorer prawym klawiszem myszy menu kontekstowe i wybierz opcję Open. Rozwiń gałąź Tables i upewnij się, że plik bazy danych zawiera tabele PRACOWNICY, ZESPOLY, ETATY.
3. Utworzenie modelu encji (Entity Data Model). a) Z menu kontekstowego dla węzła projektu w panelu Solution Explorer wybierz opcję Add New Item. Wybierz szablon ADO.NET Entity Data Model, język Visual C# i pozostaw zaproponowaną nazwę pliku. Kliknij przycisk Add. Zaakceptuj propozycję umieszczenia tworzonego pliku w folderze App_Code projektu. b) W oknie dialogowym kreatora modelu wybierz opcję generacji modelu na podstawie bazy danych i przejdź do kolejnego kroku. c) W następnym kroku kreatora wybierz połączenie z dołączonym do projektu plikiem bazy danych. Pozostaw zaznaczone pole wyboru dodania parametrów połączenia w pliku konfiguracyjnym aplikacji. Przejdź do kolejnego kroku kreatora.
d) W ostatnim kroku kreatora zaznacz wszystkie trzy tabele zawarte w bazie danych, odznacz pole wyboru Include foreign key columns in the model (ze względów ideologicznych nie chcemy kluczy obcych w modelu obiektowym ), pozostaw odznaczone pole wyboru Pluralize or singularize generated object names (używamy nazw tabel w języku polskim, a więc Visual Studio nam przy nazwach nie pomoże) i kliknij Finish. e) Utworzony plik modelu zostanie otwarty do graficznej edycji w Visual Studio. Dokonaj poniższych modyfikacji korzystając z edytora graficznego i palety właściwości: a. Dla każdej encji: Zmień nazwy encji (Name) na liczbę pojedynczą np. ZESPOL. Następnie upewnij się (i ewentualnie dokonaj korekty), że nazwa zbioru encji (Entity Set Name) na poprawną liczbę mnogą np. ZESPOLY. b. Zmień nazwy właściwości nawigacyjnych do zespołu i etatu w encji PRACOWNIK na liczbę pojedynczą. c. W encji PRACOWNIK zmień nazwy obu właściwości nawigacyjnych prowadzących do powiązanych encji PRACOWNIK. Dla właściwości o liczności 0..1 podaj nazwę SZEF, a dla właściwości o liczności * podaj nazwę PODWLADNI.
f) Ostateczna postać diagramu powinna wyglądać jak na poniższym obrazku. Zapisz wszystkie zmiany. g) Podejrzyj dla encji PRACOWNIK i jej właściwości nawigacyjnych szczegóły jej odwzorowania na tabele w bazie danych (okno Mapping details) h) Obejrzyj zawartość wygenerowanego pliku Model.Context.cs). Zwróć uwagę na: a. Klasę bazową kontekstu b. Właściwości w klasie kontekstu zwracające kolekcje poszczególnych encji, poprzez które realizowane będą operacje CRUD na encjach i) Obejrzyj kod źródłowy pliku Model.cs zawierającego klasy encji. Zwróć uwagę na: a. Klasy encji w formie POCO b. Właściwości nawigacyjne liczności 0..1 i * c. Oznaczenie właściwości nawigacyjnych jako wirtualnych, m.in. na potrzeby mechanizmu lazy loading (będzie obsługiwany przez generowane klasy proxy) j) Sprawdź czy nazwy klas i ich właściwości w plikach Model.Context.cs i Model.cs uwzględniają zmiany naniesione na diagramie. Jeśli nie, zleć ich ponowne wygenerowanie opcją menu Build Transform All T4 Templates. 4. Utworzenie formularza do wyświetlania informacji o pracownikach. a) Zmień nazwę utworzonej wraz z projektem strony Default.aspx na EmpsFromDept.aspx wybierając opcję Rename z menu kontekstowego w panelu Solution Explorer (automatycznie powinna zmienić się również nazwa pliku code behind). b) Usuń z kodu strony pierwszy element asp:content i wyczyść zawartość drugiego. c) Przejdź do edycji strony w trybie Design. d) Umieść na stronie w sekcji MainContent kontrolkę GridView. e) Poprzez paletę właściwości ustaw komunikat (EmptyDataText), który będzie się pojawiał gdy kontrolka nie znajdzie danych do wyświetlenia.
5. Powiązanie kontrolki GridView z danymi odczytywanymi przez LINQ to Entities: a) Przejdź do edycji pliku code behind strony i dodaj metodę zwracającą pracowników z zespołu o podanym identyfikatorze (uzupełnij zapytanie LINQ w poniższym kodzie) private void BindEmployeesFromDept(int deptid) { using (var dc = new InstytutEntities()) { var emps = from... where... select...; GridView1.DataSource = emps.tolist(); GridView1.DataBind(); } } b) W ciele metody Page_Load umieść poniższy wywołujący dodaną przed chwilą metodę przekazując jej identyfikator zespołu zawarty w adresie żądania: if (Request.QueryString["zesp"]!= null) BindEmployeesFromDept(Convert.ToInt32(Request.QueryString["zesp"])); else BindEmployeesFromDept(-1); c) Uruchom stronę, a następnie popraw w przeglądarce adres dodając do niego parametr wywołania. 6. Zakomentuj w kodzie zapytanie LINQ To Entities i zastąp je zapytaniem w Entity SQL (Uzupełnij poniższy fragment kodu i korzystając z opcji Resolve zaimportuj potrzebne przestrzenie nazw). Ponownie przetestuj aplikację.... var ctx = ((IObjectContextAdapter)dc).ObjectContext; string querystring = "SELECT... FROM... WHERE... = " + deptid; ObjectQuery<PRACOWNIK> emps = ctx.createquery<pracownik>(querystring);... 7. Wykorzystany powyżej sposób przekazania identyfikatora zespołu do zapytania wybierającego pracowników niestety nie jest bezpieczny. Ponieważ zapytania w EntitySQL mają postać łańcuchów znaków są tak samo podatne na ataki SQL Injection jak zapytania SQL np. w ADO.NET. Rozwiązanie problemu jest takie jak w przypadku zapytań SQL parametryzacja zapytania:... string querystring = "SELECT... WHERE p.zespol.id_zesp = @did"; ObjectQuery<PRACOWNIK> emps = ctx.createquery<pracownik>(querystring); emps.parameters.add(new ObjectParameter("did", deptid));... 8. Sprawdź działanie strony po zmianie zapytania na sparametryzowane.
Ćwiczenie 4 Celem ćwiczenia jest wykorzystanie kontrolki EntityDataSource jako pośrednika między warstwą prezentacji a klasami modelu encji, a także ilustracja sposobu korzystania z optymistycznego zarządzania współbieżnością w ramach ADO.NET Entity Framework. Kroki ćwiczenia: 1. Utwórz w projekcie nową stronę ASP.NET Web Form. Nazwij stronę EmployeesByJob.aspx. 2. Umieść na stronie kontrolkę EntityDataSource. Poprzez jej znacznik inteligentny wybierz opcję Configure Data Source. Wybierz z listy dla Named Connection utworzony wcześniej model encji i kliknij Next. 3. W kolejnym kroku konfiguracji źródła danych wybierz z listy kolekcję encji PRACOWNICY. Pozostaw wybór odczytu wszystkich kolumn (*) i zaznacz pola wyboru aktywujące automatyczną obsługę wstawiania, modyfikacji i usuwania danych. 4. Umieść na stronie kontrolkę GridView i powiąż ją z kontrolką EntityDataSource. 5. Uruchom stronę.
6. Przejdź do konfiguracji kontrolki GridView i uaktywnij możliwość modyfikacji danych. 7. Uruchom stronę w dwóch przeglądarkach i sprawdź jej zachowanie przy współbieżnej modyfikacji tego samego wiersza. 9. Wróć do diagramu encji i poprzez paletę właściwości zmodyfikuj atrybutom NAZWISKO, ZATRUDNIONY, PLACA_POD i PLACA_DOD właściwość Cuncurrency Mode na wartość Fixed. Spowoduje to monitorowanie modyfikacji tych atrybutów w ramach optymistycznego zarządzania współbieżnością. 10. Ponownie uruchom stronę w dwóch przeglądarkach i sprawdź jej zachowanie przy współbieżnej modyfikacji tego samego wiersza. Powinien pojawić się komunikat o wystąpieniu nieobsłużonego wyjątku. 11. Umieść na stronie kontrolkę etykiety i nazwij ją ErrorLabel. Spraw aby kontrolka domyślnie była niewidoczna. 12. Przejdź do edycji obsługi zdarzeń kontrolki GridView i dodaj metodę obsługi zdarzenia RowUpdated z poniższym kodem. if (e.affectedrows == 0) { if (e.exception!= null) { e.exceptionhandled = true; ErrorLabel.Text = "Wiersz został zmodyfikowany przez innego użytkownika!"; } else { ErrorLabel.Text = "Modyfikacja nie powiodła się z nieznanych powodów!"; } ErrorLabel.Visible = true; e.keepineditmode = true; GridView1.DataBind(); } else ErrorLabel.Visible = false;
13. Aktualnie komunikat o błędzie staje się widoczny gdy wystąpi błąd, a znika po udanej modyfikacji. Komunikat powinien jednak znikać również wtedy, gdy użytkownik po wystąpieniu błędu zrezygnuje z modyfikacji. Dodaj obsługę zdarzenia RowCancelingEdit w kontrolce GridView polegającą na uczynieniu etykiety z komunikatem o błędzie niewidoczną. 14. Ponownie uruchom stronę w dwóch przeglądarkach i sprawdź jej zachowanie przy współbieżnej modyfikacji tego samego wiersza. Ćwiczenie 5 Celem ćwiczenia jest wykorzystanie mechanizmu Partial Page Update oferowanego przez ASP.NET AJAX w ramach scenariusza zawężania listy wyświetlanych pracowników poprzez wybór etatu z listy rozwijanej. Kroki ćwiczenia: 1. Umieść na stronie EmployeesByJob.aspx drugą kontrolkę EntityDataSource. Poprzez jej znacznik inteligentny wybierz opcję Configure Data Source. Wykorzystaj to samo połączenie z bazą danych co poprzednio, jako zbiór encji wybierz ETATY, a spośród dostępnych atrybutów encji ETAT wybierz tylko atrybut NAZWA. 2. Powyżej kontrolki GridView umieść kontrolkę DropDownList. Korzystając z jej inteligentnego znacznika powiąż ją z drugą kontrolką EntityDataSource. Zarówno jako wartość wyświetlaną na liście jak i stanowiącą wartość wyboru wskaż nazwę etatu. Uwaga: Jeżeli listy rozwijane z nazwami atrybutów są puste, kliknij link Refresh Schema. 3. Włącz AutoPostBack dla listy rozwijanej.
4. Aby filtrować pracowników względem etatu wybranego z listy rozwijanej, ustaw właściwość Where kontrolki EntityDataSource udostępniającej obiekty encji PRACOWNIK na następujące wyrażenie: it.etat.nazwa = @p_etat 5. W oknie definicji klauzuli WHERE dodaj parametr p_etat podając kontrolkę listy rozwijanej jako źródło jego wartości. 6. Parametr użyty w warunku zapytania kontrolki EntityDataSource musi posiadać informację o jego typie. Aby ustawić typ parametru, wyświetl zaawansowane właściwości parametru (Show Advanced Properties) i dla właściwości Type wybierz String z listy dostępnych typów. 7. Zapisz wszystkie zmiany. Uruchom i przetestuj stronę. 8. Przejdź do edycji źródła strony EmployeesByJob.aspx. 9. Umieść na stronie (w obrębie formularza) element ScriptManager (dostępny w sekcji AJAX Extensions). 10. Umieść na stronie wewnątrz formularza kontrolkę UpdatePanel z zawartymi w niej elementami ContentTemplate i Triggers (te dwa elementy zdefiniuj ręcznie w kodzie). 11. Przenieś kontrolki GridView i Label do wnętrza elementu ContentTemplate. 12. Wskaż listę rozwijaną jako asynchroniczny wyzwalacz dla UpdatePanel (poprzez zagnieżdżony element asp:asyncpostbacktrigger). 13. Zapisz zmiany. Uruchom i przetestuj działanie strony.