使用嵌入在updatepanel内部的ascx内部的JS验证按钮单击事件

I have a button inside an ascx inside an update panel inside aspx content page. When the button is clicked i want it to run a JS function that causes to show a panel. Here is my Code.

我在aspx内容页面内的更新面板内的ascx中有一个按钮。单击该按钮时，我希望它运行一个导致显示面板的JS函数。这是我的代码。

    <pre>


    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ABC.ascx.cs" Inherits="App.ABC" %>
    <script type= "text/javascript" language="javascript">
    var val1=0;
    var val2=0;


    function ShowPanel(val2)
    {
        if(val2 != 0)
        {   
            switch(val2)
            {
            case 1 : 
                document.getElementById('<%=pnl1.ClientID%>').style.visibility = 'visible';
            break;           
            }
        }
        return false;
    }
    </script>


    <asp:LinkButton ID="lbl1" runat="server" OnClick="return ShowPanel(1);">count</asp:LinkButton>

I am not sue how to do this. Please help

我不是在起诉如何做到这一点。请帮忙

Update #1 - ABC.ascx is in updatepanel in the aspx page XYZ.aspx

更新＃1 - ABC.ascx位于aspx页面XYZ.aspx的updatepanel中

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ABC.ascx.cs" Inherits="App.ABC" %>
    <script type= "text/javascript" language="javascript">
    var val1=0;
    var val2=0;

    function ShowPanel(val2) {
            if (val2 != 0) {
                switch (val2) {
                    case 1:
                        document.getElementById("<%= this.pnl1.ClientID%>").style.display = "none";
                        break;
                }
            }
            return false;
        }
    </script>
    <div>

    <div style="text-align:center">

    </div>

    <table style="width:100%; text-align:center; border-color:#99CCFF" border="3">
      <tr style="text-align:left">
      <td><asp:LinkButton ID="lbl1" runat="server" OnClientClick="return ShowPanel(1);">count</asp:LinkButton>
      </td>
      <td style="text-align:right"><asp:Button ID="btnHide1" runat="server" Text="hide" 
              Height="18px" Width="32px"/>
      </td>
      </tr>
      <tr>
      <td colspan="2"><asp:Panel ID="pnl1" runat="server" Visible="false"> </asp:Panel>
        </td>
      </tr>
    </table>

    </div>

3 个解决方案

#1

In your example, you're using LinkButton.OnClick, which is a server-side event, so it won't fire the client-side JavaScript. If you change OnClick to OnClientClick, it should cause ASP.NET to spit out a client-side click handler for the LinkButton (which will probably be rendered as an onclick="return ShowPanel(1);" attribute on the anchor tag.)

在您的示例中，您使用的是LinkButton.OnClick，这是一个服务器端事件，因此它不会触发客户端JavaScript。如果将OnClick更改为OnClientClick，则应该导致ASP.NET为LinkButton吐出客户端点击处理程序（可能会在锚标记上呈现为onclick =“return ShowPanel（1）;”属性。）

Also, I noticed that in your ShowPanel() function, you use pnl1.ClientID. I can't tell from your code snippet whether that Panel is in the host page (ASPX) or the user control (ASCX) but if it's not in the user control, you'll need to establish some sort of reference back to it (i.e. DirectCast(Me.Page, MyHostPageWithPanel).pnl1). Or you might decide that it doesn't really need to be a server-side control, and then you could just hardcode a div with an id that is easily grabbed through JavaScript.

另外，我注意到在你的ShowPanel（）函数中，你使用pnl1.ClientID。我无法从您的代码片段中判断该Panel是在主机页面（ASPX）还是用户控件（ASCX）中，但如果它不在用户控件中，则需要建立某种类型的引用（即DirectCast（Me.Page，MyHostPageWithPanel）.pnl1）。或者您可能认为它实际上不需要是服务器端控件，然后您可以使用可以通过JavaScript轻松获取的id对div进行硬编码。

#2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<script type= "text/javascript" language="javascript">
    var val1 = 0;
    var val2 = 0;


    function ShowPanel(val2) {
        if (val2 != 0) {
            switch (val2) {
                case 1:
                    document.getElementById("<%= this.pnl1.ClientID%>").style.display = "none";
                    break;
            }
        }
        return false;
    }
    </script>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel runat="server" ID="pnl1"><div>pepe</div></asp:Panel>
    <asp:LinkButton ID="lbl1" runat="server" OnClientClick="return ShowPanel(1);">count</asp:LinkButton>
    </div>
    </form>
</body>
</html>

#3

did this Easily using this

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "showwait();");

ScriptManager.RegisterClientScriptBlock(this,this.GetType(), "", "stopwait();", true);

这样做很容易使用这个ScriptManager.RegisterOnSubmitStatement（this，this.GetType（），“”，“showwait（）;”）; ScriptManager.RegisterClientScriptBlock（this，this.GetType（），“”，“stopwait（）;”，true）;

#1

#2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<script type= "text/javascript" language="javascript">
    var val1 = 0;
    var val2 = 0;


    function ShowPanel(val2) {
        if (val2 != 0) {
            switch (val2) {
                case 1:
                    document.getElementById("<%= this.pnl1.ClientID%>").style.display = "none";
                    break;
            }
        }
        return false;
    }
    </script>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel runat="server" ID="pnl1"><div>pepe</div></asp:Panel>
    <asp:LinkButton ID="lbl1" runat="server" OnClientClick="return ShowPanel(1);">count</asp:LinkButton>
    </div>
    </form>
</body>
</html>

#3

did this Easily using this

ScriptManager.RegisterOnSubmitStatement(this, this.GetType(), "", "showwait();");

ScriptManager.RegisterClientScriptBlock(this,this.GetType(), "", "stopwait();", true);

秒客网

使用嵌入在updatepanel内部的ascx内部的JS验证按钮单击事件

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章