Это первый раз, когда я использую диалоги jQuery, поэтому этот вопрос может быть несколько простым, но я пока не нашел ответов на этот вопрос.
Я использую ASP.Net Ajax для выполнения асинхронной обратной передачи, когда пользователь вводит что-то в текстовое поле (фактически сканируя штрих-код). Это работает как шарм.
Теперь мне нужно позволить пользователю выбирать между двумя вариантами при определенных условиях. Поэтому мне нужен постбэк, чтобы решить, нужно ли показывать этот диалог и какое у него содержимое.
Q: Как открыть диалоговое окно jQuery UI (модальный) со стороны сервера, позволить пользователю выбрать опцию, выполнить повторную передачу на сервер и обработать это решение.
Я думаю, мне нужно AjaxControlToolkit.ToolkitScriptManager.RegisterClientScriptBlock, чтобы зарегистрировать скрипт, который открывает диалог, я прав? Если да, то какой скрипт открывает диалог загрузки?
Могу ли я затем отправить обратно на сервер, установив AutoPostback=true в элементе управления (например, RadioButtons или DropDownList) внутри диалогового окна и обработав соответствующие события?
Какой самый лучший / самый простой способ выполнить то, что я пытаюсь?
Редактировать : Я решил заключить диалог в пользовательский элемент управления ASP.Net и показать / скрыть его. Этот подход рекомендуется или он каким-либо образом конфликтует с jQuery?
Ваша помощь очень важна по любому из этих вопросов.
Мое решение (спасибо Каппа):
Также полезной была эта ссылка: Использование JQuery UI Dialog с ASP.Net и AJAX Update Panel и комментарий от Ричарда.
Я создал UserControl в качестве контейнера для jQuery-Dialog:
Диалог-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()
В моем случае это было немного сложно, потому что здесь использовался Dialog-ascx:
MasterPage -> Page -> TabContainer-Panel -> UserControl -> UserControl -> Dialog
Но это сработало как шарм:)