【问题标题】:Can I create an ASP.NET ImageButton that doesn't postback?我可以创建一个不回发的 ASP.NET ImageButton 吗?
【发布时间】:2011-02-11 19:04:30
【问题描述】:

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

【问题讨论】:

  • 有什么理由不只使用 img 标签的 onclick 事件?
  • @BigJason:如果可能的话,我想避免它。这个按钮非常复杂,构建在服务器端。

标签: asp.net post postback submit imagebutton


【解决方案1】:
<image src="..." onclick="DoYourThing();" />

【讨论】:

  • 那就完美了,只是这个按钮是在服务器端动态构建的,需要是一个 .NET 对象。
  • 您始终可以在您的页面上拥有一个asp:Literal 控件,并在您背后的代码中动态设置文本,即:myLiteral.Text = "&lt;img src=\"asdf\" onclick=\"DoYourThing();\" /&gt;";
【解决方案2】:

使用服务器端图像控件

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

很确定您可以向其中添加客户端 onclick 事件。

【讨论】:

    【解决方案3】:

    这是一种您可以在不与其他控件的回发功能冲突的情况下执行此操作的方法:

    像这样定义你的按钮:

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

    OnClientClick 处理程序中的“my”结尾是一种别名 asp.net 的 __doPostBack 客户端事件的方法,该事件强制回发;我们只是通过不执行与此脚本类似的操作来覆盖该行为:

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

    编辑:是的,我觉得我需要在一些肮脏的伎俩之后洗个澡,为了让 asp.net 做我想做的事。

    【讨论】:

    • “我的”把戏对我有用,但最后的“return false”也是如此,这让我感觉不那么恶心了
    • 我遇到了同样的问题...stackoverflow.com/questions/25979847/…。我现在要测试你的解决方案。
    【解决方案4】:

    另一种解决方案是定义一个什么都不做的 PostBackUrl

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

    【讨论】:

      【解决方案5】:

      我知道这个问题已经得到解答,但一个简单的解决方案是从 HTML onclick 方法(即 ASPX OnClientClick 方法)返回 false,例如

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

      返回 false 会阻止浏览器向服务器发出请求。停止 .NET 回发。

      【讨论】:

      • 我想建议 OnClientClick="return DoYourStuff();" 的附加选项。然后在 DoYourStuff() 中返回 false。这样,DoYourStuff 可以根据其他因素返回 true 或 false,并且在某些条件下仍可能允许回发。
      • 如果我在 GridView 中有多个按钮,我的只能在第一次和之后的任何时候工作,该功能不会触发。 stackoverflow.com/questions/25979847/…
      • @TTT 这就是我首先尝试的,但由于某种原因它不起作用。虽然,如果我按照 CodeClimber 的建议将 return false; 放在 OnClientClick 中,它会起作用。
      【解决方案6】:

      这对我很有用:

      使用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>
      

      【讨论】:

        【解决方案7】:

        解决方案 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");
            }
        }
        

        【讨论】:

          【解决方案8】:

          使用 OnClientClick 编写脚本和 PostBackUrl="javascript:void(0);"避免回发

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2015-03-01
            • 2016-11-27
            • 1970-01-01
            • 2011-02-11
            • 2016-03-30
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多