我能创建一个不会导致页面回传的ASP.NET ImageButton吗？

Question

我正在尝试仅使用ImageButton控件进行客户端脚本执行。我可以使用OnClientClick属性指定要执行的客户端脚本，但如何阻止它在每次用户单击时尝试发布？单击此按钮时没有理由发布。我已将CausesValidation设置为False，但这并不能阻止它发布。

- Giffyguy

---

有什么理由不直接使用img标签的onclick事件？ - Jason Webb

@BigJason：如果可能的话，我想要避免它。这个按钮非常复杂，是在服务器端构建的。 - Giffyguy

Answer 1

我知道这个问题已经有了答案，但一个简单的解决方法是在HTML onclick方法（即ASPX OnClientClick方法）中返回false，例如：

<asp:ImageButton ID="ImageNewLink" runat="server" 
 ImageUrl="~/images/Link.gif" OnClientClick="DoYourStuff(); return false;"  />

返回 false 可以阻止浏览器向服务器发起请求，即停止 .NET 回传(postback)。

- CodeClimber

---

我想建议增加一个OnClientClick="return DoYourStuff();"的选项。然后在DoYourStuff()内部返回false。这样，DoYourStuff可以根据其他因素返回true或false，并在某些条件下仍然允许postback。 - TTT

如果在GridView中有多个按钮，我的代码只能在第一次使用时正常工作，之后任何时候都无法触发该函数。http://stackoverflow.com/questions/25979847/how-to-prevent-postback-on-asp-button-while-displaying-a-popup-using-jquery - SearchForKnowledge

@TTT 这是我最初尝试的方法，但出于某些原因它不起作用。虽然，如果我像CodeClimber建议的那样在OnClientClick中加入return false;，它就可以工作了。 - actaram

Answer 2

以下是一种不与其他控件的后台处理功能冲突的实现方式：

定义按钮，示例代码如下：

<asp:Button runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="alert('my client script here');my" />

在OnClientClick事件处理程序中的"my"结尾是一种将asp.net的__doPostBack客户端事件别名化的方法，该事件强制进行postback；我们只需通过执行类似于此脚本的操作来覆盖这种行为：

<script type="text/javascript">

function my__doPostBack(eventTarget, eventArgument) {
    //Just swallow the click without postback of the form
}
</script>

编辑：天啊，有些肮脏的技巧让我感觉需要洗个澡才能让asp.net按照我的意愿工作。

- Pierreten

---

“my”这个技巧对我很有用，但是在结尾处使用“return false”也同样有效，让我感觉不那么困扰。 - Carl

我遇到了同样的问题...http://stackoverflow.com/questions/25979847/how-to-prevent-postback-on-asp-button-while-displaying-a-popup-using-jquery。我现在准备测试你的解决方案。 - SearchForKnowledge

Answer 3

另一种解决方案是定义一个不做任何事情的 PostBackUrl。

<asp:imagebutton runat="server" PostBackUrl="javascript:void(0);" .../>

- sarghir

Answer 4

解决方案1

<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg"
OnClientClick="return false;"  />

解决方案2

<asp:ImageButton ID="btn" runat="server" ImageUrl="~/images/yourimage.jpg" 
OnClientClick="yourmethod(); return false;"  />

此外（解决方案2），您的JavaScript方法可能采用以下形式。

<script type="text/javascript">
    function yourmethod() {
    __doPostBack (__EVENTTARGET,__EVENTARGUMENT); //for example __doPostBack ('idValue',3);
    }
</script>

在编程后端

protected void Page_Load(object sender, System.EventArgs e)
{
    if (this.IsPostBack) {
        string eventTarget = this.Request("__EVENTTARGET") == null ? string.Empty : this.Request("__EVENTTARGET");
        string eventArgument = this.Request("__EVENTARGUMENT") == null ? string.Empty : this.Request("__EVENTARGUMENT");
    }
}

- Vincenzo Costa

Answer 5

<image src="..." onclick="DoYourThing();" />

- John Gietzen

---

那就太完美了，但是这个按钮是在服务器端动态构建的，需要成为一个.NET对象。 - Giffyguy

您可以在页面上始终拥有一个 asp:Literal 控件，并在代码后台动态设置文本，例如：myLiteral.Text = "<img src=\"asdf\" onclick=\"DoYourThing();\" />"; - Joseph Yaduvanshi

Answer 6

使用服务器端的图像控件。

<asp:Image runat="server" .../>

我相信你可以将客户端的onclick事件添加到其中。

- mxmissile

Answer 7

这对我来说非常有效：使用OnClientClick编写脚本，并使用PostBackUrl="javascript:void(0);"避免回发。

<div class="close_but">
    <asp:ImageButton ID="imgbtnEChartZoomClose" runat="server" ImageUrl="images/close.png" OnClientClick="javascript:zoomclosepopup();" PostBackUrl="javascript:void(0);" />
    </div>

- Somnath Kharat

Answer 8

使用OnClientClick编写您的脚本，同时使用PostBackUrl="javascript:void(0);"避免回传

- PRADEEP SINGH Chundawat