asp:jQuery对话框中的按钮没有触发OnClick事件

Question

我在一个没有触发事件的jQuery对话框中有一个asp:Button OnClick.我正在使用该PostBackUrl属性导航到另一个页面,但我想在事件中设置此属性,OnClick以便我可以根据他们在对话框中上传的文件的名称追加查询字符串变量.我之前发布了一个关于此对话框的问题,因为我根本无法回复它,但是已经修复了.单击按钮回发正常,我可以PostBackUrl在asp标记或Page_Load()后面的代码中设置属性.但是由于某些原因我无法启动OnClick功能,而这就是我想要设置的功能PostBackUrl.这是.aspx ......

<form id="frmDialog" runat="server">
        <asp:Button ID="btnDisplayDialog" runat="server" Text="Click to Display Login Dialog" OnClientClick="showDialog(); return false;" />
        <div class="divInnerForm"></div>
        <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>
                        What is your birthday?
                        <input type="text" id="datepicker" name="datepicker" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Please Choose a Picture to Upload:
                        <asp:FileUpload ID="fupUserPicture" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnUserPicture_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

...显示对话框并将其放在表单中的jQuery脚本...

    function showDialog() {
        $('.divDialog').dialog({
            modal: true, show: 'slide', width: 500,
            open: function (event, ui) {
                $('.divInnerForm').append($(this).parent());
            }
        });
    }

...以及我的OnClick功能背后的代码....

 protected void btnUserPicture_Click(object sender, EventArgs e)
        {
            string fileName = "";
            if (fupUserPicture.HasFile)
            {
                try
                {
                    fileName = Path.GetFileName(fupUserPicture.FileName);
                    fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                }
                catch (Exception ex)
                {
                }
                btnSubmit.PostBackUrl = "~/Profile.aspx?pic=" + fileName;
            }
        }

编辑:好的,这是对话框中的提交按钮实际呈现为HTML的方式.我想这可能是个问题.正如你所看到的,javascript onclick只是提供了"Profile.aspx"作为post post url,即使在我看来任何服务器端代码都应该首先执行.这是在形式......

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

..以及如果我btnSubmit.PostBackUrl = "~/Profile.aspx"从Page_Load()函数中移除它是如何渲染....

<input id="btnSubmit" type="submit" value="Submit" name="btnSubmit">

编辑2:好的所以我在对话框外面添加了另一个隐藏的asp按钮,对话框内的按钮现在调用一个触发OnClick隐藏按钮事件的javascript函数.同样的事情,javascript函数运行正常,但btnHidden_Click()函数does not run!我完全失去了,此时我真的不知道为什么这不起作用.这是新的隐藏按钮,在对话框div之外,但在表格内部,你可以看到....

 </div>
        <asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable"  OnClick="btnHidden_Click"/>
    </form>

...这里是OnClientClick事件对话框内的按钮,正如我所说的那样运行正常......

                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" />

这里是btnHidden背后代码中的OnClick函数,虽然它和以前完全一样......

   protected void btnHidden_Click(object sender, EventArgs e)
        {
            string fileName = "";
            if (fupUserPicture.HasFile)
            {
                try
                {
                    fileName = Path.GetFileName(fupUserPicture.FileName);
                    fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                }
                catch (Exception ex)
                {
                }
                Response.Redirect("~/Profile.aspx?pic=" + fileName);
            }
        }

...以及运行的javascript函数,但由于某种原因不会导致btnHidden_​​Click运行...

function forcebtnHiddenClick(e) {
    //__doPostBack('btnHidden', 'OnClick');
    $('#btnHidden').trigger('click');
}

..你可以看到我已经尝试了.trigger('click')和__doPostBack()两者都无济于事.

编辑:好的,所以问题肯定是

 function forcebtnHiddenClick() {
            __doPostBack('btnHidden', '');
}

功能,实际上并不触发btnHidden_Click事件.当我btnHidden看到并直接点击它,该btnHidden_Click功能运行正常.

编辑:经过TONS的搜索,发现了这个并让它发挥作用......

 function forcebtnHiddenClick() {
            <%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %>;
        }

我不知道为什么

__doPostBack(<%= btnHidden.ClientID %>, '') 

不起作用.

Answer 1

试试这个

function showDialog() {
    $('.divDialog').dialog({
        modal: true, show: 'slide', width: 500
    });
   $(".divDialog").parent().appendTo($("form:first"));
}

您应该将divDialog附加到不是空divInnerForm的表单.然后您的按钮将在表单中,并且其点击事件将很快激发.

更新

尝试使用onclient click.Then将此属性连接到一个函数,该函数将强制回发隐藏按钮.

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forceClick();" />
<asp Button id="hidButton" runat="server" onclick="hidButton_Click" />

function forceClick(){

__doPostBack('<%#hidButton.UniqueId %>');
}

然后使用事件处理程序hidButton_Click来放置代码.