I have a “testMain.aspx” page showing an editable listview. In addition, it contains a button that triggers a jquery UI modal dialog, which dynamically loads “testModal.aspx”. This modal contains a dropdownlist which the user chooses and clicks a button to submit back to the server. I want the modal to submit (to testModal.aspx) and then close so I’m viewing testMain.aspx.
The issue I’ve run into is after submit & close of modal, any clicks (ie. linkbuttons to edit listview) now submit to the modal.aspx rather than main.aspx.
Of Note:
- testMain.aspx uses a masterpage (which contains a form element)
- The listview is contained in an asp:updatepanel
- The problem doesn’t occur until I load (.load()) the modal, before doing so, my clicks postback to testMain.aspx (as expected)
Masterpage.master
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="page">
<form id="form1" runat="server">
<table summary="" class="pageTable">
<tr>
<td class="contentArea">
<asp:ContentPlaceHolder ID="ContentPage" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
testMain.aspx
<script type="text/javascript">
$(document).ready(function () {
var $dialog = $('#foo').dialog({
autoOpen: false,
modal: true
});
$("#foo").parent().appendTo($("form:first"));
$('#fooBtn').click(function () {
$dialog.load('testModal.aspx');
$dialog.dialog('open');
return false;
});
});
</script>
<ajax:UpdatePanel runat="server" ID="updPanelGrid" UpdateMode="Conditional" RenderMode="Inline"
ChildrenAsTriggers="false">
<ContentTemplate>
<asp:ListView ID="ListView1" runat="server" EnableModelValidation="True"
...
</asp:ListView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="listview1" EventName="ItemEditing" />
<ajax:AsyncPostBackTrigger ControlID="listview1" EventName="ItemDeleting" />
<ajax:AsyncPostBackTrigger ControlID="listview1" EventName="ItemCanceling" />
<ajax:AsyncPostBackTrigger ControlID="listview1" EventName="ItemUpdating" />
<ajax:AsyncPostBackTrigger ControlID="listview1" EventName="ItemInserting" />
</Triggers>
</ajax:UpdatePanel>
testModal.aspx
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</asp:ToolkitScriptManager>
<div>
<ajax:UpdatePanel ID="updPnl" runat="server">
<ContentTemplate>
<asp:LinkButton ID="btnModalSubmit" runat="server" Text="Modal Server Submit" />
<div>
The current time is:
<%= Now.ToString%></div>
</ContentTemplate>
</ajax:UpdatePanel>
</div>
</form>
It seems to me that by calling .load() on the jquery dialog, it causes havoc with the updatepanel (ie. postback path). How can I load an entire .net page in a modal, click a button in said modal, that posts back to server (asynchronously), and allows me to continue working in my Main page once the modal is dismissed?
Is this even possible? Is there a better way?
You can have only one Form runat=server in a aspx file.
Make you modal to load in an iframe and this should solve a problem. (Assuming it already does not load it like that)