按钮，在对话框不会回传 [英] Button in dialog box won't Post back

问题描述

我有我与jQuery的 .dialog（）函数显示一个对话框，这个对话框包含一个按钮，我想回发到另一个页面，但它不工作。我不能让它张贴与设置一项PostBackUrl 属性，或使用的OnClick （这永远不会触发）。然而，当我点击日历日期，我想造成一个回默认情况下，页面回发到我的按钮设置的URL <$ C $之一C>一项PostBackUrl 属性！我想使用 ASP：日历，但禁用默认后重新选择行为，并张贴只有当用户选择按钮，但仍明显有选择的发生在日历日期上回来后可用。这里的的.aspx 文件...

I have a dialog box which I'm displaying with the jQuery .dialog() function, and this dialog box contains a button which I want to post back to another page, but it's not working. I can't get it to post with the PostBackUrl attribute set, or with the OnClick (this never fires). However, when I click one of the Calendar dates, which I suppose cause a post back by default, the page posts back to the url I set in the buttons PostBackUrl attribute! I want to use the asp:Calendar, but disable the default post back behavior on selection, and have posting occur only when the user selects the button, but still obviously have the selected date of the Calendar available on post back. Here's the .aspx file...

<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脚本...

...and the jQuery script...

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

...这里是怎样的ASP：按钮，在ASP日期：日历是在浏览器中呈现....

...and here is how the asp:Button and a date in the asp:Calendar are rendered in the browser....

<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控件与否。但是日历控件选择提交作品的某些原因。

The button submission doesn't work, regardless of whether I include the asp:Calendar control or not. But Calendar control selection submission works for some reason.

推荐答案

通过这种对话的问题是，他们感动你给他们作为之外的某处形式的内容是什么。

The problem with this kind of dialogs is that they move what you give them as content somewhere outside the form.

接招例如： http://jsfiddle.net/Qej8S/1/

我代替门将里面的内容

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

但如果运行它，您将看到（醚的颜色，与浏览器的DOM公用事业醚）对话框移动门将之外的内容，你的情况是将其移动到表格键，这就是为什么没有火起来。

but if run it, you see that (ether the colors, ether with the dom utilities of the browser) the dialog is moving the content outside of the keeper, and in your case is move it outside the form and thats why is not fires up.

有关解决方案，我想出了某种黑客。创建对话框后，将其移回的形式。下面是一个例子。我把一个div与特定的ID，在窗体中为：

For solution I came up with some kind of a hack. After the dialog is created move it back to the form. Here is an example. I place a div with a specific id, inside the form as:

＆LT; D​​IV ID =MoveItHere＆GT;＆LT; / DIV＆GT;

和我设置的移动创建对话框后立即为：

and I set the move right after the dialog is created as:

$('.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 /

And here is the online test, that is working if you see the dom: http://jsfiddle.net/Qej8S/2/

这篇关于按钮，在对话框不会回传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！