ASP：按钮jQuery的对话框不触发OnClick事件 [英] asp:Button in jQuery dialog box not firing OnClick event
问题描述
我有一个asp：为其的OnClick 事件不被烧成的jQuery 对话框内的按钮。我使用了一项PostBackUrl 属性导航到另一个页面，但我想的设置的这个属性在的OnClick 事件，以便我可以根据自己的对话框中上传文件的名称追加一个查询字符串变量。我张贴的问题有关此对话框早些时候，因为我无法得到它回来后在所有的，但是这已修复。点击该按钮会回罚款，我可以设置在ASP标记中的一项PostBackUrl 属性，或者在的Page_Load（）背后的code的。但我的不能的获得的OnClick 功能解雇出于某种原因，而这也正是我的要将的了一项PostBackUrl 。下面是在.aspx ...
I have an asp:Button inside a jQuery dialog for which the OnClick event isn't firing. I'm using the PostBackUrl property to navigate to another page, but I want to set this property in the OnClick event so that I can append a query string variable according to the name of a file they upload in the dialog. I posted a question about this dialog earlier, because I couldn't get it to post back at all, but that's been fixed. Clicking the button posts back fine, and I can set the PostBackUrl property in the asp markup, or in the Page_Load() of the code behind. But I can't get the OnClick function to fire for some reason, and that's where I want to set the PostBackUrl. Here's the .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的脚本显示的对话框，并在窗体中放置它......
...the jQuery script that displays the dialog and places it within the form...
function showDialog() {
$('.divDialog').dialog({
modal: true, show: 'slide', width: 500,
open: function (event, ui) {
$('.divInnerForm').append($(this).parent());
}
});
}
...和我的OnClick功能背后的code ....
...and the code behind with my OnClick function....
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作为回发网址，即使在我看来，任何服务器端code应该执行第一位的。这是在表单中...
Ok, here's how the submit button in the dialog actually renders as HTML. I think this may be the problem. As you can see, the javascript onclick simply provides "Profile.aspx" as the post back url, even though it seems to me any server side code should execute first and foremost. This is within the form...
<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">
..这里是它如何renderes如果我删除 btnSubmit.PostBackUrl =〜/ Profile.aspx从的Page_Load（）功能....
..and here's how it renderes if I remove btnSubmit.PostBackUrl = "~/Profile.aspx" from the Page_Load() function....
<input id="btnSubmit" type="submit" value="Submit" name="btnSubmit">
编辑2：好了，所以我添加了另一个隐藏的ASP按钮关闭对话框之外，对话框内的按钮现在调用javascript函数从而引发的OnClick 事件隐藏的按钮。同样的事情，JavaScript函数运行良好，但 btnHidden_Click（）函数不跑了！我在一个总损失，在这一点上我真的不知道为什么，这是行不通的。这里是新的隐藏按钮，对话框的div之外，但里面你可以看到形式....
EDIT 2: ok so I've added another hidden asp button outside of the dialog, and the button inside the dialog now calls a javascript function which triggers the OnClick event of the hidden button. Same thing, the javascript function runs fine, but btnHidden_Click() function does not run! I'm at a total loss, at this point I literally have no idea why this isn't working. Here's the new Hidden Button, outside of the dialog div but inside of the form as you can see....
</div>
<asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable" OnClick="btnHidden_Click"/>
</form>
...这里是用的OnClientClick事件，正如我已经说过的对话框内的按钮，运行良好...
...here's the button inside the dialog with the OnClientClick event, which as I've said runs fine...
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" />
这是在为后面的btnHidden code的OnClick功能，尽管它完全像以前一样...
And here's the OnClick function in the code behind for btnHidden, though it's exactly the same as before...
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运行...
...and the javascript function that runs, but for some reason doesn't result in btnHidden_Click running...
function forcebtnHiddenClick(e) {
//__doPostBack('btnHidden', 'OnClick');
$('#btnHidden').trigger('click');
}
..你可以看到我都试过.trigger（点击），并__doPostBack（），都无济于事。
..as you can see I've tried both .trigger('click') and __doPostBack(), both to no avail.
编辑：好了，问题肯定是
Ok, so the problem is definitely the
function forcebtnHiddenClick() {
__doPostBack('btnHidden', '');
}
功能，这实际上不触发 btnHidden_Click 事件。当我做 btnHidden 可见，直接单击它，在 btnHidden_Click 功能运行正常。
function, which is not actually triggering the btnHidden_Click event. When I make btnHidden visible and click it directly, the btnHidden_Click function runs fine.
编辑：后搜索的吨，这一发现并得到它的工作...
After TONS of searching, found this and got it to work...
function forcebtnHiddenClick() {
<%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %>;
}
我不知道为什么。
I don't know why
__doPostBack(<%= btnHidden.ClientID %>, '')
不起作用。
推荐答案
试试这个
function showDialog() {
$('.divDialog').dialog({
modal: true, show: 'slide', width: 500
});
$(".divDialog").parent().appendTo($("form:first"));
}
您应该追加的 divDialog 以表格不是空的 divInnerForm 。然后你的按钮会在形式和对click事件将愉快地激发。
You should be appending divDialog to the form not that empty divInnerForm.Then your button will be in the form and its on click event will fire happily.
更新
也尝试使用onclient click.Then线此属性功能，这将迫使后重新站上隐藏的按钮。
Try also using onclient click.Then wire this attribute to a function which will force a post back on the hidden button.
<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把你的code。
Then use the event handler hidButton_Click to put your code.
这篇关于ASP：按钮jQuery的对话框不触发OnClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
