Maciej Grabek

jQuery jak zapewne każdy wie jest bardzo przydatnym i użytecznym narzędziem. jQuery UI to zestaw wtyczek (możemy je nazwać kontrolkami), które pozwalają na szybkie “upiększenie” naszej strony. Okazuje się jednak, że bywają pewne kolizje na drodze jQuery UI i ASP.NET. Przykładem może tu być wykorzystanie pluginu “dialog” dla kontenerów (np. div) zawierających przyciski ASP:Button.

<div id="dialogDiv">
   Dialog content
   <asp:Button id="btnDoSomething" runat="server" Text="Do something" onclick="btnDoSomething_click"/>
</div>

Okazuje się, że gdy chcemy wykonać $(“#dialogDiv”).dialog(‘open’); to niestety przycisk, który się znajduje w wyskakującym okienku przestaje działać. Aby tego uniknąć musimy dodać wykorzystać poniższy kawałek kodu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function showjqdialog(){
   jQuery(document).ready(function() {
      var dlg = $("#dialogDiv").dialog({
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
             },
           width:500
      });
      dlg.parent().appendTo(jQuery("form:first"));
      dlg.dialog('open');
   });
}

Najważniejszy fragment to ustawienie rodzica naszego okienka na formularz dokumentu tak, aby mógł on przejąć akcję przycisku. Chodzi tu oczywiście o fragment:

1

dlg.parent().appendTo(jQuery("form:first"));

Dodatkowo pokazanie okna dialogowego najlepiej jest wykonać w momencie gdy dokument jest już w pełni załadowany. Chodzi tu oczywiście o fragment jQuery(document).ready(function() {…});

Dla dopełnienia informacji na temat jQuery UI dialog i działania z ASP.NET kilka słów na temat jak go uruchomić warunkowo z code behind. Otóż w metodzie obsługującej kliknięcie przycisku dodajemy:

1
2
3

if(showDialogCondition){
   ClientScript.RegisterStartupScript(Page.GetType(), "dialogscript", "<script type="\"text/javascript\""><!--mce:0--></script>");
}

Dzięki temu podczas ładowania strony zostanie doładowany kawałek skryptu odpowiedzialny za pokazanie okna dialogowego. Pamiętając o tym, że czekamy w funkcji showjqdialog() na załadowanie dokumentu mamy pewność o poprawnym działaniu kodu.

Dziś na temat korzystania z jQuery i ciasteczek. Jako scenariusz przyjmijmy proste zliczenie kliknięć, gdzie licznik przechowujemy jako wartość ciastka.

W tym celu tworzymy aplikację ASP.NET MVC wraz z testowym kontrolerem i dwoma widokami – Indeks, który jest widokiem bazowym i Modify, który zwraca kawałek html’a z zawartością ciastka.

Kotroler inicjujemy w następujący sposób:

Indeks ma za zadanie po kliknięciu przycisku wywołać akcję Modify w kontrolerze TestsController a następnie wstrzyknąć jej wynik do diva o id=”resultContainer”

Dla pełnego obrazu poniżej widnieje zawartość widoku Modify:

Skoro mamy już bazę do doświadczeń pora przejść do sedna problemu, a mianowiscie do obsługi ciastek. Jak zapewne zauważyliście kontroler w linii 25 ustawia czas wygaśnięcia ciastka na DateTime.MaxValue, czyli ciastko nigdy nie wygaśnie. Na pierwszy rzut oka nie widać problemu: wywołujemy akcję, akcja zmienia wartość ciastka, ciastko wraca do przeglądarki, klikamy ponownie, wartość wzrasta – super! Jednakże spójżmy jak faktycznie wygląda ciastko, które otrzymujemy:

Pierwsze wywołanie strony – tworzymy ciastko

Kolejne wywołanie strony – niestety jak widać poniżej czas wygaśnięcia ciastka przypadnie na koniec sesji:

Przez to po zamknięciu i ponownym uruchomieniu przeglądarki ciastko zostanie usuniete a tym samym licznik zostanie zresetowany…

Przyjrzyjmy się jak wygląda request i response. Korzystając z Fiddlera można podejrzeć treść nagłówka Cookies, w którym widać wszystko jak na dłoni:

Odpowiedź po pierwszym wywołaniu (ustawiamy ciastko)

Request przy kojelnych kliknięciach przycisku – jak widać brak przy żądaniu informacji o ekspiracji ciastka, co skuktuje opisanym zachowaniem.

Jak to ominąć? W przypadku, który miałem jako zadanie postanowiłem przy każdym takim wywołaniu ustawiać czas życia ciastka na DateTime.MaxValue, dzięki  czemu po ponownym uruchomieniu przeglądarki ciastko nadal tam jest…

W wyniku tej modyfikacji informacja o ciastkach znajdująca się w odpowiedzi wygląda następująco

dzięki czemu przy kolejnym uruchomieniu przeglądarki ciastko nadal tam będzie gotowe do użycia

Na Smashing Magazine pojawił się artykuł na temat ciekawych pluginów oraz wtyczek dotyczących jQuery. Mi osobiście do gustu najbardziej przypadły cztery z nich:

Contextual Slideout Tips, który pozwala na tworzenie animowanych warstw zawierających treści np tooltipów (jak wskazuje nazwa) ale również jest to ciekawy sposób na realizację menu…

Selectmenu jako alternatywa dla standardowego <asp:DropDownList> (lub jak kto woli <select>). Sami na pewno wiele razy spotkaliście się z koniecznością “upiększenia” tych elementów, lub też stworzenia kontrolek, które mają wyglądać jak użyty na stronie <select> ale działających w inny sposób. jQuery przychodzi tu z pomocą i wieloma gotowymi “podmieniaczami” (jeżeli takie słowo nie istnieje, to już istnieje :), a Selectmenu jest jedną z ciekawszych propozycji w tej materii.

Captify – dzięki tej wtyczce możemy w prosty, a przede wszystkim efektowny sposób dodać opisy do naszych galerii.

Opis pojawia się, a właściwie “wjeżdża” na zdjęcie, dzięki czemu nie przesłania treści graficznej, a w odpowiednim momencie daje pełną informację dotyczącą konkretnego zdjęcia…

Na koniec coś, co lubię, czyli gadżety – to też dodaje stylu i usability dla naszych stron:

Quicksand – coś, co wywołało u mnie tzw. efekt WOW – uwielbiam gadżety i ta wtyczka zalicza się do jednego z nich. Animowane sortowanie i filtrowanie, dodatkowe przedstawione w sposób

Tego nie można oddać na screenach – to trzeba zobaczyć i “przeklikać”