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.