UI dialog problem with scriptManger and updatePanel
i call my UI dialog from page which has scriptManager, this way:
function openDialog() {
var $dialog = jQuery('#dialog');
$dialog.load('dialog.aspx');
$dialog.dialog({
autoOpen: false,
title: 'Add New Contact Personel',
modal: true,
height: 200,
width: 400,
show: 'puff',
hide: 'puff',
close: function (event, ui) {
$dialog.html('');
$dialog.dialog('destroy');
}
});
$dialog.dialog('open');
}
body of dialog.aspx looks like this:
<body>
<form id="form1" runat="server">
<%-- <asp:ScriptManagerProxy ID="proxyScriptor" runat="server"></asp:ScriptManagerProxy>
<asp:UpdatePanel ID="upadatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>--%>
<div>
<table border="0">
<tr>
<th>SomeText:</th>
<th><asp:TextBox ID="someTextBox" runat="server"></asp:TextBox></th>
</tr>
</table>
</div>
<asp:Panel ID="updatePanel" runat="server">
<asp:Button ID="UpdateLoger" runat="server" Text="Update" onclick="Update_Click" />
</asp:Panel开发者_如何学Go>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</form>
</body>
now: if i click updateBtn i want to update text in postback, close UI dialog and do refresh like this:
UpdateText(someTextBox.Text);
string script = @"jQuery('#dialog').html('');jQuery('#dialog').dialog('destroy');window.location.reload()";
ScriptManager.RegisterClientScriptBlock(this, typeof(UpdatePanel), "jscript", script, true);
so if add another script manager on this page for UI dialog, very very wird things have happend (like __doPostBack doesn't work), if i remove scriptManager, updatePanel doesnt show it contents, if i put scriptMangerProxy , updatePanel doesn't show it contents either. So how i should do it?
You've got a lot going on here. One problem you're running into is that you're treating dialog.aspx like it's loading into it's own window or iframe. In reality, its just being inserted as a document fragment into the page's DOM. I suspect if you inspect the source, you'll find multiple <body> tags.
There's several ways of doing this. My dialogs are typically unique to a particular page, so I'll handle the dialog somewhat like this:
Page.aspx
<html>
<head>...</head>
<body>
<!-- page content -->
<asp:Button ID="btnOpenDialog" runat="server" OnClick="btnOpenDialogClick" Text="Open Dialog" />
<asp:UpdatePanel ID="upDialogs" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDialog" runat="server" CssClass="pnlDialog" Visible="false">
<!-- Dialog form -->
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostbackTrigger ControlID="btnOpenDialog" />
</Triggers>
</asp:UpdatePanel>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
$("div.pnlDialog").dialog({
autoOpen: true,
title: 'Add New Contact Personel',
modal: true,
height: 200,
width: 400,
show: 'puff',
hide: 'puff',
close: function (event, ui) {
$dialog.html('');
$dialog.dialog('destroy');
}
});
}
</script>
</body>
</html>
Page.aspx.cs
...
protected void btnOpenDialogClick(object sender, EventArgs e)
{
pnlDialog.Visible = true;
upDialogs.Update();
}
protected void btnSubmitClick(object sender, EventArgs e)
{
... save values ...
pnlDialog.Visible = false;
upDialogs.Update();
}
...
Basically, we register a JS function to fire every time the page performs an asynchronous postback. This functions looks for the dialog box code. If it finds it, it wires it up with jQueryUI. If it doesn't find anything, it just finishes silently. If you have multiple dialogs on the page, this can easily be refactored to flexibly handle them.
加载中,请稍侯......
精彩评论