從服務器端顯示jQuery模態對話框

Question

這是我第一次使用jQuery對話框，所以這個問題可能有點簡單，但我還沒有找到答案。

我使用ASP.Net Ajax執行異步回發時，用戶輸入的東西到一個文本框（實際上掃描條形碼）。這是一種魅力。 現在我需要讓用戶在特定條件下決定兩個選項。因此，我需要回發來決定是否必須顯示此對話框以及它具有哪些內容。

問：如何從服務器端打開一個jQuery UI（模態）對話框，讓用戶選擇一個選項，再次回發到服務器並處理這個決定。

我想我需要AjaxControlToolkit.ToolkitScriptManager.RegisterClientScriptBlock註冊打開對話框的腳本，對不對？如果是，那麼哪個腳本會打開onload對話框？

我可以再由對話框內的控制（f.e。單選按鈕或者一個DropDownList）設置AutoPostback=true和處理相應的事件回發到服務器？

什麼是最好/最簡單的方法來完成我想要的？

編輯：我認爲將對話框封裝到一個ASP.Net UserControl並顯示/隱藏它。這種方法是值得推薦的嗎？還是會以任何方式與jQuery發生衝突？

您對任何這些問題的幫助都非常感激。

---

---

我的解決方案（感謝卡帕）：

也是有幫助的是此鏈接：Using JQuery UI Dialog with ASP.Net and AJAX Update Panel和註釋有來自理查德。

我創建了一個用戶控件作爲容器的jQuery的對話框：

對話框的ASCX：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DialogRecurringRMA.ascx.vb" Inherits="ERP.DialogRecurringRMA" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
<script type="text/javascript"> 
    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: '<%= Title %>', 
      open: function (type, data) { 
       $(this).parent().appendTo(source); 
      } 
     }); 
    } 

    function showDialog() { 
     $('#Dialog_RecurringRMA').dialog("open"); 
    } 

    function closeDialog() { 
     $('#Dialog_RecurringRMA').dialog("close"); 
    } 

    </script> 

<asp:UpdatePanel ID="UpdDialog" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server"> 
    <ContentTemplate> 
    <div id='Dialog_RecurringRMA' style="display:none"> 
      <asp:RadioButtonList ID="RblApplyRmaToCharge" ValidationGroup="Dialog" runat="server"> 
       <asp:ListItem Value="1">Create new RMA and add it to current Charge</asp:ListItem> 
       <asp:ListItem Value="2">Do not create new RMA</asp:ListItem> 
      </asp:RadioButtonList> 
      <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">*</asp:RequiredFieldValidator> 
      <asp:ValidatorCalloutExtender ID="NothingSelectedExtender" BehaviorID="NothingSelectedExtender" runat="server" TargetControlID="NothingSelected" Width="250px" PopupPosition="BottomRight" HighlightCssClass="highlight" WarningIconImageUrl="~/images/warning.gif" CloseImageUrl="~/images/close.gif" /> 
      <br /><br /><br /><br /> 
      <asp:Button ID="BtnApply" runat="server" OnClientClick="javascript:Page_ClientValidate();if(Page_IsValid)closeDialog();" CausesValidation="true" ValidationGroup="Dialog" Text="apply selection" /> 
    </div> 
    </ContentTemplate> 
</asp:UpdatePanel> 

對話框的Codebind：

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

它儘可能的簡單展示從現在開始使用的對話框：

Me.DialogRecurringRMA1.OpenDialog() 

在我的情況有點複雜，因爲對話框的ASCX用在這裏：

MasterPage -> Page -> TabContainer-Panel -> UserControl -> UserControl -> Dialog 

但是，這工作就像一個魅力:)

Answer 1

要打開一個已經創建的jQuery UI的對話框中，你有撥打$("#elementId").dialog("open");命令。

因此，您的服務器端代碼必須找出是否必須顯示對話框，然後它必須註冊JavaScript以使用該命令打開它。

編輯：

關於AutoPostback="true"問題：到ASP.NET如果您的命令是一個jQuery UI的對話框內與否並不重要，對話本身只是一個div與display: none;。

當心：

我不知道你是否知道，但是當你應用的對話框，元素接收它被移動到body元素的結尾。

這意味着，這將是外的form元素，裏面的一切將永遠不會被回發到服務器（我打我的這個頭前兩天）。

爲了克服這個問題，你必須這樣聲明的對話框：$("#elementId").dialog().parent().appendTo("#formId");，這樣的形式後，對話框依然會被移動，但.parent().appendTo("#formId")部分移回

Answer 2

你可能需要一些標誌在你的頁面。 （存儲在一個隱藏的領域或者是一個服務器控件）。您可以在$（document）.ready（）或鏈接中檢測到這一點，並執行任何操作。這必須在服務器端進行設置。

但如果你試圖執行回發不同的腳本（再次這裏假設它是一個完整的回發）使用ClientScriptManager.RegisterStartupScript

對於第二個問題，我想有按鈕這是我的網頁，其中對應於服務器控件用戶單擊「確定」或「取消」（假定對話框有兩個按鈕）。所以我會有兩個服務器端按鈕;並且在代碼隱藏方面也有他們各自的事件處理程序。

它只是回發後，我不得不隱藏這兩個按鈕適合使用客戶端JavaScript。但我可以通過其他JavaScript代碼在其上引發事件。