Tip: per far funzionare controlli server all’interno di un dialog jQuery UI e’ necessario un piccolo trick.
<script type="text/javascript">
$().ready(function () {
$('#<%=pnlDialog.ClientID%>').dialog({
autoOpen: false,
height: 270,
width: 570,
modal: true
});
});
$(document).on("click", '#<%=btnApriPopup.ClientID%>', function () {
$('#<%=pnlDialog.ClientID%>').dialog("open");
return false;
});
</script>
e il markup di riferimento:
<asp:Button ID="btnStampaConNote" runat="server" Text="Stampa" />
<asp:Panel runat="server" ID="pnlDialog" title="Annotazioni">
[...]
<asp:Button ID="btnOk" runat="server" Text="Ok" OnClick="btnOk_Click" />
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
</asp:Panel>
In questo caso, tutto ciò che è all’interno del pannello pnlDialog non scatenerà postback in quanto jQuery si farà carico di wrappare il div (panel) contenente il dialog e lo spostera’ alla fine del markup, appena prima di </Body>, quindi all’esterno del Form (l’unico Form) della pagina ASP.Net. In questo modo ASP.Net non sarà più in grado di gestire gli eventi ed i postback.
Per ovviare a questo inconveniente bisogna “forzare” lo spostamento del dialog all’interno del Form ASP.Net e lo si puo’ fare in questo modo:
<script type="text/javascript">
$().ready(function () {
var dlg = $('#<%=pnlDialog.ClientID%>').dialog({
autoOpen: false,
height: 270,
width: 570,
modal: true
});
dlg.parent().appendTo(jQuery("form:first"));
});
$(document).on("click", '#<%=btnApriPopup.ClientID%>', function () {
$('#<%=pnlDialog.ClientID%>').dialog("open");
return false;
});
</script>
Con l’istruzione dlg.parent().appendTo(jQuery("form:first")); si specifica di agganciare il dialog al primo (nonche’ unico in ASP.Net) form della pagina