編集可能なリストビューを表示する「testMain.aspx」ページがあります。さらに、「testModal.aspx」を動的にロードするjqueryUIモーダルダイアログをトリガーするボタンが含まれています。このモーダルには、ユーザーが選択してボタンをクリックしてサーバーに送信するドロップダウンリストが含まれています。モーダルを(testModal.aspxに)送信してから閉じて、testMain.aspxを表示します。
私が遭遇した問題は、モーダルを送信して閉じた後、クリック(つまり、リストビューを編集するためのリンクボタン)がmain.aspxではなくmodal.aspxに送信されるようになったことです。
注意:
- testMain.aspxはマスターページ(フォーム要素を含む)を使用します
- リストビューはasp:updatepanelに含まれています
- モーダルをロード(.load())するまで問題は発生しません。ロードする前に、クリックしてtestMain.aspxにポストバックします(予想どおり)
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>
jqueryダイアログで.load()を呼び出すと、updatepanel(つまりポストバックパス)で大混乱が発生するように思われます。.netページ全体をモーダルにロードし、モーダルのボタンをクリックしてサーバーに(非同期で)ポストバックし、モーダルが閉じられた後もメインページで作業を続行できるようにするにはどうすればよいですか?
これも可能ですか?もっと良い方法はありますか?