Maciej Grabek » jQuery https://blog.maciejgrabek.com /* Make it See Sharp - Windows Phone, C#, .NET i nie tylko */ Mon, 27 Oct 2014 11:18:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.2.38 ASP.NET Button i jQuery dialog https://blog.maciejgrabek.com/2010/12/07/asp-net-button-i-jquery-dialog/ https://blog.maciejgrabek.com/2010/12/07/asp-net-button-i-jquery-dialog/#comments Tue, 07 Dec 2010 16:37:50 +0000 http://maciejgrabek.com/?p=10395 Read the Rest...
]]> 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.

]]> https://blog.maciejgrabek.com/2010/12/07/asp-net-button-i-jquery-dialog/feed/ 0 Problem z HttpCookie.Expires i jQuery https://blog.maciejgrabek.com/2010/08/24/problem-z-httpcookie-expires-i-jquery/ https://blog.maciejgrabek.com/2010/08/24/problem-z-httpcookie-expires-i-jquery/#comments Tue, 24 Aug 2010 22:53:00 +0000 http://maciejgrabek.com/maciek_blog/?p=9995 Read the Rest...
]]> 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:

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Web;
  5 using System.Web.Mvc;
  6
  7 namespace CookieAndJQuery.Controllers
  8 {
  9     [HandleError]
10     public class TestsController : Controller
11     {
12         private static string CookieName = “TestCookie”;
13
14         public ActionResult Index()
15         {
16             return View();
17         }
18
19         public ActionResult Modify()
20         {
21             HttpCookie cookie = Request.Cookies[CookieName];
22             if (cookie == null)
23             {
24                 cookie = new HttpCookie(CookieName, “0”);
25                 cookie.Expires = DateTime.MaxValue;
26             }
27
28             int v = int.Parse(cookie.Value);
29             cookie.Value = (++v).ToString();
30             Response.Cookies.Add(cookie);
31             ViewData[“itemValue”]= cookie.Value;
32             return View();
33         }
34     }
35 }

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”

  1 <%@ Page Language=“C#” Inherits=“System.Web.Mvc.ViewPage” %>
  2 <html>
  3 <head runat=“server”>
  4     <title>Index</title>
  5     <script src=“Scripts/jquery-1.4.1.min.js” type=“text/javascript”></script>
  6 </head>
  7 <body>
  8     <div>
  9         <input type=“button” id=“btnTestCookies” value=“ClickMe” />
10         <div id=“resultContainer”></div>
11     </div>
12     <script type=“text/javascript”>
13         $(“#btnTestCookies”).click(function () {
14             $.ajax(
15                 {
16                     url: “/Tests/Modify”,
17                     success: function (data) {
18                         $(“#resultContainer”).html(data);
19                     },
20                     cache: false,
21                     dataType: “html”
22                 }
23             );
24         });
25     </script>
26 </body>
27 </html>

 

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

  1 <%@ Page Language=“C#” Inherits=“System.Web.Mvc.ViewPage” Buffer=“false” %>
  2 <div>
  3     <%= ViewData[“itemValue”] %>
  4 </div>

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…

  1 public ActionResult Modify()
  2 {
  3     HttpCookie cookie = Request.Cookies[CookieName];
  4     if (cookie == null)
  5     {
  6         cookie = new HttpCookie(CookieName, “0”);
  7         cookie.Expires = DateTime.MaxValue;
  8     }
  9
10     cookie.Expires = DateTime.MaxValue;
11     int v = int.Parse(cookie.Value);
12     cookie.Value = (++v).ToString();
13     Response.Cookies.Add(cookie);
14     ViewData[“itemValue”] = cookie.Value;
15     return View();
16 }

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 :)

]]> https://blog.maciejgrabek.com/2010/08/24/problem-z-httpcookie-expires-i-jquery/feed/ 0 jQuery – ciekawe pluginy https://blog.maciejgrabek.com/2010/04/28/jquery-ciekawe-pluginy/ https://blog.maciejgrabek.com/2010/04/28/jquery-ciekawe-pluginy/#comments Wed, 28 Apr 2010 21:08:00 +0000 http://maciejgrabek.com/maciek_blog/?p=9978 Read the Rest...
]]> 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ć”

]]> https://blog.maciejgrabek.com/2010/04/28/jquery-ciekawe-pluginy/feed/ 0