Question

我有一个对话框，我正在使用jQuery .dialog()函数显示，此对话框包含一个按钮，我想将其发回到另一个页面，但它不起作用。我无法使用PostBackUrl属性集或OnClick（这永远不会触发）来发布。但是，当我单击其中一个Calendar日期时，我想这会导致默认情况下发回帖子，页面会回发到我在按钮PostBackUrl属性中设置的网址！我想使用asp:Calendar，但在选择时禁用默认回发行为，并且仅在用户选择按钮时才发布发布，但显然仍然可以在帖子上显示Calendar的所选日期背部。这是.aspx文件......

<form id="form1" runat="server">
        <asp:Button ID="btnShowDialog" runat="server" Text="Click to Show Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divDialog" style="display: none">
            <table style="width: 100%;">
                <tr>
                    <td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
                    <td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
                </tr>
                <tr>
                    <td>
                        How Old are You?
                        <asp:DropDownList ID="ddlAge" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        How Many Siblings do You Have?
                        <asp:DropDownList ID="ddlNumberSiblings" runat="server">
                            <asp:ListItem Value="1">1</asp:ListItem>
                            <asp:ListItem Value="2">2</asp:ListItem>
                            <asp:ListItem Value="3">3</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Calendar ID="calBirthday" runat="server" Width="200" >
                            <DayStyle BackColor="Yellow"  />
                        </asp:Calendar>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...和jQuery脚本......

   <script>
        function showDialog() {
            $('.divDialog').dialog({ modal: true, show: 'slide', title: 'Please Enter Information Below', width: 500 });
        }
    </script>

...以下是asp：按钮和asp：Calendar中的日期如何在浏览器中呈现....

<a title="April 28" style="color:Black" href="javascript:__doPostBack('calBirthday','4866')">28</a>

...

<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">

编辑：无论我是否包含asp：Calendar控件，按钮提交都不起作用。但日历控件选择提交由于某种原因起作用。

Answer 1

这种对话的问题在于，它们会将您提供的内容移动到表单之外的某个位置。

举个例子：http://jsfiddle.net/Qej8S/1/

我已将内容放在keeper

中

<div class="keeper">
    <div class="divDialog" style="display: none">
    The content of the dialog        
    </div>
</div>

但是如果运行它，你会看到（以及颜色，以及浏览器的dom实用程序的以太）对话框正在将内容移动到守护者之外，并且在您的情况下将其移到form之外这就是为什么不起火。

对于解决方案，我想出了某种黑客攻击。创建对话框后，将其移回表单。这是一个例子。我在表单中放置了一个具有特定id的div：

<div id="MoveItHere"></div>

我在对话框创建后立即设置了移动：

$('.divDialog').dialog({modal: true, show: 'slide', title: 'Please Enter Information Below', width: 200, 
create: function( event, ui ) 
 {
    // this is the trick, I move it again inside the form, on a specific place.
    $("#MoveItHere").html($(this).parent());
 }
});

以下是在线测试，如果您看到dom：http://jsfiddle.net/Qej8S/2/

，则可以使用

对话框中的按钮不会回发

1 个答案: