Question

我在jQuery对话框中有一个asp：Button，OnClick事件未触发。我正在使用PostBackUrl属性导航到另一个页面，但我想在OnClick事件中设置此属性，以便我可以根据以下方法追加查询字符串变量他们在对话框中上传的文件的名称。我之前发布了一个关于此对话框的问题，因为我根本无法回复它，但是已经修复了。单击该按钮可以很好地回复，我可以在asp标记中设置PostBackUrl属性，或者在后面的代码的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按钮，对话框内的按钮现在调用一个javascript函数，触发隐藏按钮的OnClick事件。同样的事情，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来放置代码。

Answer 2

$(this).parent().appendTo('form')

应该可以正常工作..将其附加到表单以触发服务器端事件

Answer 3

当我使用jQuery对话框时，我总是使用作为对话框一部分的按钮。然后，当他们被点击时，我调用一个javascript函数来执行我的操作。

如果我需要从这些按钮处理PostBack，那么我在页面上创建一个单独的ASP.Net按钮 - 这是我用来处理OnClick事件的按钮。用户不会单击此ASP.Net按钮（我用css隐藏它，因此它在页面上不可见）。相反，我在单击对话框按钮时调用的javascript函数将调用代码，该代码将模仿单击我的ASP.Net按钮。

结果是，当单击对话框按钮时，页面将像PostBack一样点击ASP.Net按钮，我可以通过我的OnClick事件处理它。

这是一些示例代码（在VB.Net中）......

    Dim csm As ClientScriptManager = Page.ClientScript
    Dim js As New StringBuilder
    js.AppendLine("function handleSubmitMyButton() {")
    js.AppendLine(csm.GetPostBackEventReference(MyButton, ""))
    js.AppendLine("}")
    csm.RegisterClientScriptBlock(Me.Page.GetType, "create_call_to_MyButton", js.ToString, True)

构建页面时，它将包含handleSubmitMyButton（）javascript函数。单击对话框按钮将调用此函数，这将触发PostBack，就像单击“MyButton”按钮一样。

通常我不必用css隐藏ASP.Net按钮。它通常是单击按钮打开对话框的按钮。我在打开对话框时阻止了PostBack;然后当单击对话框按钮时，我模仿该按钮的单击。

更新：我看到有几个人提到以下代码行

$(this).parent().appendTo(jQuery("form:first"));

我认为这就是你试图用你的代码行做的事情：

$('.divInnerForm').append($(this).parent());

但是，如果不能做同样的事情，则需要使用代码将字段添加到表单中。

Answer 4

我使用模态对话框，我需要添加一行，否则我会在关闭按钮上获得模态透明度！

var $ObjDialog = $("div[id*='div_MyPopup']");
$ObjDialog.dialog({
    modal: true
});
$ObjDialog.parent().prev().appendTo($("form:first"));
$ObjDialog.parent().appendTo($("form:first"));

Answer 5

您也可以使用LinkButton，OnClick确实会导致回传，不需要调整任何jquery。

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

5 个答案: