title: Show jQuery modal Dialog from serverside
body: <p>this is the first time i'm using jQuery dialogs so this question might be somewhat simple but i haven't found answers on this yet.</p>
  
  <p>I'm using ASP.Net Ajax to perform an asynchronous postback when user enters something into a Textbox(actually scanning a barcode). This is working like a charm.
  Now i need to let the user decide between two options under certain conditions. Therefore i need the postback to decide if this dialog must be shown and what content it has.</p>
  
  <p><strong>Q:</strong> How to open a jQuery UI (modal) dialog from serverside, let the user choose an option, postback again to server and handle this decision.</p>
  
  <p>I think i need <code>AjaxControlToolkit.ToolkitScriptManager.RegisterClientScriptBlock</code> to register the script that opens the dialog, am i right? If yes, what script opens the dialog onload?</p>
  
  <p>Can i then postback to server by setting <code>AutoPostback=true</code> on the control(f.e. RadioButtons or a DropDownList)inside the dialog and handling the appropriate events?</p>
  
  <p>What is the best/easiest way to accomplish what i'm trying?</p>
  
  <p><strong>Edit</strong>: I considered to encapsulate the dialog into an ASP.Net UserControl and show/hide it. Is this approach recommendable or will it conflict with jQuery in any way?</p>
  
  <p>Your help is greatly appreciated on any of these questions.</p>
  
  <hr>
  
  <hr>
  
  <p><strong>My Solution</strong>(thanks Kappa):</p>
  
  <p>Also helpful was this link: <a href="http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html" rel="nofollow">Using JQuery UI Dialog with ASP.Net and AJAX Update Panel</a> and the comment there from Richard.</p>
  
  <p>I have created a UserControl as Container for the jQuery-Dialog:</p>
  
  <p>Dialog-ASCX:</p>
  
  <pre><code>&lt;%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DialogRecurringRMA.ascx.vb" Inherits="ERP.DialogRecurringRMA" %&gt;
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  &lt;script type="text/javascript"&gt;
      function createDialog() {
          //setup dialog
          var source = $('#Dialog_RecurringRMA').parent();
          $('#Dialog_RecurringRMA').dialog({
              modal: true,
              resizable: false,
              autoOpen: true,
              draggable: true,
              width: 420,
              height: 200,
              title: '&lt;%= Title %&gt;',
              open: function (type, data) {
                  $(this).parent().appendTo(source);
              }
          });
      }
  
      function showDialog() {
          $('#Dialog_RecurringRMA').dialog("open");
      }
  
      function closeDialog() {
          $('#Dialog_RecurringRMA').dialog("close");
      }
  
      &lt;/script&gt;
  
  &lt;asp:UpdatePanel ID="UpdDialog" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server"&gt;
      &lt;ContentTemplate&gt;
      &lt;div id='Dialog_RecurringRMA' style="display:none"&gt;
              &lt;asp:RadioButtonList ID="RblApplyRmaToCharge" ValidationGroup="Dialog" runat="server"&gt;
                  &lt;asp:ListItem Value="1"&gt;Create new RMA and add it to current Charge&lt;/asp:ListItem&gt;
                  &lt;asp:ListItem Value="2"&gt;Do not create new RMA&lt;/asp:ListItem&gt;
              &lt;/asp:RadioButtonList&gt;
              &lt;asp:RequiredFieldValidator ID="NothingSelected" Display="None" ControlToValidate="RblApplyRmaToCharge" ValidationGroup="Dialog" runat="server" ErrorMessage="You have to decide whether RMA should be applied to current charge or not"&gt;*&lt;/asp:RequiredFieldValidator&gt;
              &lt;asp:ValidatorCalloutExtender ID="NothingSelectedExtender" BehaviorID="NothingSelectedExtender" runat="server" TargetControlID="NothingSelected" Width="250px"  PopupPosition="BottomRight"  HighlightCssClass="highlight" WarningIconImageUrl="~/images/warning.gif" CloseImageUrl="~/images/close.gif" /&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;asp:Button ID="BtnApply" runat="server" OnClientClick="javascript:Page_ClientValidate();if(Page_IsValid)closeDialog();" CausesValidation="true" ValidationGroup="Dialog" Text="apply selection" /&gt;
      &lt;/div&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;
  </code></pre>
  
  <p>Dialog-Codebind:</p>
  
  <pre><code>Public Class DialogRecurringRMA
      Inherits System.Web.UI.UserControl
  
      Public Enum DialogResult As Int32
          NoResult = 0
          CreateRma = 1
          DoNotCreateRma = 2
      End Enum
  
      Public Event DialogClosed(ByVal dialog As DialogRecurringRMA)
  
      Public Property Title As String
          Get
              If ViewState("Title") Is Nothing Then
                  ViewState("Title") = "RMA with this IMEI found, create anyway?"
              End If
              Return DirectCast(ViewState("Title"), String)
          End Get
          Set(ByVal value As String)
              ViewState("Title") = value
          End Set
      End Property
  
      Public Property CreateRmaText As String
          Get
              Return Me.RblApplyRmaToCharge.Items(0).Text
          End Get
          Set(ByVal value As String)
              Me.RblApplyRmaToCharge.Items(0).Text = value
          End Set
      End Property
  
      Public Property DoNotCreateRmaText As String
          Get
              Return Me.RblApplyRmaToCharge.Items(1).Text
          End Get
          Set(ByVal value As String)
              Me.RblApplyRmaToCharge.Items(1).Text = value
          End Set
      End Property
  
      Public ReadOnly Property Result() As DialogResult
          Get
              If Me.RblApplyRmaToCharge.SelectedIndex &lt;&gt; -1 Then
                  Return If(Me.RblApplyRmaToCharge.SelectedIndex = 0, DialogResult.CreateRma, DialogResult.DoNotCreateRma)
              Else
                  Return DialogResult.NoResult
              End If
          End Get
      End Property
  
      Public Sub Reset()
          Me.RblApplyRmaToCharge.SelectedIndex = -1
      End Sub
  
      Private Sub CloseDialog()
          ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), UniqueID, "closeDialog()", True)
      End Sub
  
      Private Sub ShowDialog()
          ScriptManager.RegisterStartupScript(Me, GetType(Page), UniqueID, "createDialog();showDialog()", True)
      End Sub
  
      Public Sub OpenDialog()
          Reset()
          ShowDialog()
          Me.UpdDialog.Update()
      End Sub
  
      Protected Sub BtnApply_Click(ByVal sender As Object, ByVal e As EventArgs) Handles BtnApply.Click
          Page.Validate()
          If Me.Page.IsValid Then
              CloseDialog()
              RaiseEvent DialogClosed(Me)
          End If
      End Sub
  End Class
  </code></pre>
  
  <p>Its as simple as possible to show the dialog now from where it is used:</p>
  
  <pre><code>Me.DialogRecurringRMA1.OpenDialog()
  </code></pre>
  
  <p>In my case it was a little complicated, because the Dialog-ascx was used here:</p>
  
  <pre><code>MasterPage -&gt; Page -&gt; TabContainer-Panel -&gt; UserControl -&gt; UserControl -&gt; Dialog
  </code></pre>
  
  <p>But that worked like a charm :)</p>