admin管理员组

文章数量:1195320

I have a web app in ASP.NET with a C# code behind. The main login page is going to have a sort of touchpad type UI where there are buttons for 0-9 to enter a pin #.

So, I'm new to ASP.NET and to JavaScript both. When these numeric buttons are clicked on the UI, nothing needs to be done on the server side - there shouldn't be any postback at all. All that needs be done is append a number to a label's text. I'm trying to figure out how to do that in JavaScript, without the button causing any kind of postback.

To make the example much simpler, let's just say I have a UI with a single label and single button on the screen, and everytime you click this single button, it should append a 1 to the label's text. Here's my .aspx, but when I try to run this, I get a "Object Expected" exception at runtime...

EDIT: I've modified my example to include the suggestions made in answers below, and still am having issues. To reproduce, this .aspx code can be copied into the default.aspx of a new VS Web Application project, and run it and click the 1 button; it should append a 1 to the label's value, but it throws an "Object Expected" exception.

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJavascript._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">

<html xmlns="" >
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Table ID="baseTable" runat="server" HorizontalAlign="Center">
        <asp:TableRow ID="labelRow" runat="server" HorizontalAlign="Center" Width="100" Height="30">
          <asp:TableCell ID="labelCell" runat="server" HorizontalAlign="Center" Width="100%" Height="100%" BorderStyle="Solid" BorderWidth="1px">
            <asp:Label ID="inputLbl" runat="server"/>
          </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="buttonRow" runat="server" HorizontalAlign="Center">
          <asp:TableCell ID="buttonCell" runat="server" HorizontalAlign="Center">
            <asp:Button ID="btn1" runat="server" Text="1" Height="70px" Width="70px" OnClientClick="btn1Click()"/>
          </asp:TableCell>
        </asp:TableRow>
      </asp:Table>
    </div>
  </form>
  <script type="txt/javascript">
    void btn1Click()
    {
        document.getElementById('<%= inputLbl.ClientID %>').value += "1";
        return false;
    }
  </script>
</body>
</html>

Any help is much appreciated!

I have a web app in ASP.NET with a C# code behind. The main login page is going to have a sort of touchpad type UI where there are buttons for 0-9 to enter a pin #.

So, I'm new to ASP.NET and to JavaScript both. When these numeric buttons are clicked on the UI, nothing needs to be done on the server side - there shouldn't be any postback at all. All that needs be done is append a number to a label's text. I'm trying to figure out how to do that in JavaScript, without the button causing any kind of postback.

To make the example much simpler, let's just say I have a UI with a single label and single button on the screen, and everytime you click this single button, it should append a 1 to the label's text. Here's my .aspx, but when I try to run this, I get a "Object Expected" exception at runtime...

EDIT: I've modified my example to include the suggestions made in answers below, and still am having issues. To reproduce, this .aspx code can be copied into the default.aspx of a new VS Web Application project, and run it and click the 1 button; it should append a 1 to the label's value, but it throws an "Object Expected" exception.

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJavascript._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Table ID="baseTable" runat="server" HorizontalAlign="Center">
        <asp:TableRow ID="labelRow" runat="server" HorizontalAlign="Center" Width="100" Height="30">
          <asp:TableCell ID="labelCell" runat="server" HorizontalAlign="Center" Width="100%" Height="100%" BorderStyle="Solid" BorderWidth="1px">
            <asp:Label ID="inputLbl" runat="server"/>
          </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="buttonRow" runat="server" HorizontalAlign="Center">
          <asp:TableCell ID="buttonCell" runat="server" HorizontalAlign="Center">
            <asp:Button ID="btn1" runat="server" Text="1" Height="70px" Width="70px" OnClientClick="btn1Click()"/>
          </asp:TableCell>
        </asp:TableRow>
      </asp:Table>
    </div>
  </form>
  <script type="txt/javascript">
    void btn1Click()
    {
        document.getElementById('<%= inputLbl.ClientID %>').value += "1";
        return false;
    }
  </script>
</body>
</html>

Any help is much appreciated!

  • c#
  • javascript
  • asp.net
  • .net
Share Improve this question edited Oct 22, 2012 at 18:28 Jim asked Oct 22, 2012 at 17:33 JimJim 6,88113 gold badges47 silver badges72 bronze badges 2
  • if the button is never meant to postback, it should be a regular input type="button" not an asp:Button. – jbabey Commented Oct 22, 2012 at 17:56
  • The button may never need to PostBack, but its properties might be modified from server code (Visible, Enabled, Text, ...) – Francis P Commented Oct 22, 2012 at 17:57
Add a comment  | 

4 Answers 4

Reset to default 18

You can use the OnClientClick attribute for the asp button and add return false; which prevents the postback:

<asp:Button ID="1Btn" runat="server" Text="1" Height="70px" Width="70px" 
    OnClientClick="btn1Click(); return false;" />

Use return false; statement, it will stop from postback; If you need postback then return true; from function.

<script type="text/javascript">
void btn1Click()
{
    this.inputLbl.Text += "1";
    return false;
}
</script>

First of all, a variable name should not start with a number, so replace 1Btn with a significative name (btnAppendOne).

  1. Bind the onclick client event to your Button, in your PageLoad method:

    btnAppendOne.Attributes.Add("onclick", "return btnAppendOneClick();");

  2. Use the correct javascript (return false should cancel the postback):

    <script type="text/javascript">
     function btnAppendOneClick()
     {
         var updatedLabel = document.getElementById('<%=inputLbl.ClientID %>');
         updatedLabel.innerHTML = updatedLabel.innerHTML + "1";
         return false;
     }
</script>

there is a typo in your Script tag.. First Line (1)

 <script type="**text**/javascript">
void btn1Click()
{
    document.getElementById('<%= inputLbl.ClientID %>').value += "1";
    return false;
}

本文标签： cHow to make ASPNET button call client side javascript and not do postbackStack Overflow

版权声明：本文标题：c# - How to make ASP.NET button call client side javascript and not do postback - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738478923a2089027.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。