Client side scripting

member4953 · April 21st, 2009, 02:30 PM

Imar,

In chapter 9, specifically at the top of page 304, you show the use of Javascript that allows client side, verses server side, input checking.

Why did you choose to use javascript since the IDE will apparently allow the use of VB or C# scripting? That is, those are the languages we are using in the book, in addition to the ASP.NET constructs. Javascript is a new beastie to worry about.

Also, since the javascript is in the Contact.ascx control it will not let me set breakpoints in the javascript code to aid in debugging. Is there a way around this?

I am not having trouble with this example, per se, but am trying to apply it to a new project of my own. The book has given me a tremendous arsenal for doing that (thanks!) and now I am trying to extend my learning to the "real world", as it were.

Thomas

Imar · April 21st, 2009, 05:16 PM

Hi Thomas,

While the IDE appears to offer you C# / VB.NET, it only offers it *at the server*. Browsers don't understand VB.NET nor C# and need client side languages like JavaScript (or VB Script in IE only). So, there's no way to do client interactions like the one presented in this chapter (and a lot of other client interaction in a page) without the use of JavaScript.

Setting break points can indeed be problematic sometimes. Not sure if it's a bug or a feature. You can try setting one while debugging, or type the word debugger before the line of code you want to debug. If you believe it's an error, you could report the problem to Microsoft.

Chapter 17 is devoted to debugging, including debugging client side JavaScript.

Cheers,

Imar

member4953 · April 22nd, 2009, 11:00 AM

Imar,

That makes sense.

I decided to experiment with the JavaScript a bit and am not making much progress. What I have done is to create a simple page and am trying to get only the client side to react.

I am trying to get the CustomValidator to check whether the provided data is digits only or if there are non-digit characters. The page compiles but doesn't do what I would expect. Further, I can set breakpoints, but cannot see values, e.g., for the variable textNumberEntered.

There is no "Code Behind" any of this since I am trying only to do client side validation.

Can you see what I am missing?

The code for the entire page is below.

Thomas

= = =

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ClientDecision.aspx.cs" Inherits="Experiments_ClientDecision" %>

<!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>Untitled Page</title>
        <style type="text/css">
            .style1
            {
                width: 100%;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
                    &nbsp;&nbsp;
            <script type="text/javascript">
                function ValidateNumberEntered(source, args)
                {
                    var textNumberEntered = document.getElementById('<%= TextBox_numberData.ClientID %>');
                    var numberNumberEntered = new Number(textNumberEntered);
                    var textLabelOutput = document.getElementById('<%= Label_output.ClientID %>');
                    
                    if(numberNumberEntered == NaN)
                    {
                        args.IsValid = false;
                        textLabelOutput.value = "Not a number";
                    }
                    else
                    {
                        args.IsValid = true;
                        textLabelOutput.value = "A good number";
                    }
                    
                }
            </script>
            <table class="style1">
                <tr>
                    <td>
    
        <asp:TextBox ID="TextBox_numberData" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
                    </td>
                    <td>
                        <asp:CustomValidator ID="CustomValidator1" runat="server" 
                            ClientValidationFunction="ValidateNumberEntered" Display="Dynamic" 
                            ErrorMessage="Enter a number" ControlToValidate="TextBox_numberData">*</asp:CustomValidator>
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
            <asp:Button ID="Button_checkNumber" runat="server" Text="Is this a Number?" />
    
                </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label_output" runat="server"></asp:Label>
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
    
    </div>
    </form>
</body>
</html>

Imar · April 22nd, 2009, 03:06 PM

Hi Thomas,

There are a few things wrong with your code.

1. You can't convert a text control to a number. You need to get its value instead:

var numberNumberEntered = new Number(textNumberEntered.value);

2. You shouldn't compare with Nan, but use isNan instead:

if(isNaN(numberNumberEntered))

3. In HTML, some form controls have a value property, but labels don't. You need to use innerHTML instead:

textLabelOutput.innerHTML = "Not a number";
...
textLabelOutput.innerHTML = "A good number";

Here's the full code:

Code:

function ValidateNumberEntered(source, args)
{
  var textNumberEntered = document.getElementById('<%= TextBox_numberData.ClientID %>');
  var numberNumberEntered = new Number(textNumberEntered.value);
  var textLabelOutput = document.getElementById('<%= Label_output.ClientID %>');
 
  if(isNaN(numberNumberEntered))
  {
    args.IsValid = false;
    textLabelOutput.innerHTML = "Not a number";
  }
  else
  {
    args.IsValid = true;
    textLabelOutput.innerHTML = "A good number";
  }
 
}

I understand this is code to help you learn JavaScript. However, in a real world application, you probably want to use the CompareValidator with its type set to Integer:

Code:

 
<asp:CompareValidator ID="CompareValidator1" 
    ControlToValidate="TextBox_numberData" Operator="DataTypeCheck" 
    Type="Integer" runat="server" 
    ErrorMessage="Please enter a number">
</asp:CompareValidator>

Hope this helps,

Imar

member4953 · April 22nd, 2009, 03:54 PM

Thanks, Imar. I did not realize how extensive JavaScript is and the need (after searching a bit) for the DOM HTML (innerHTML) nomenclature.

I suppose there is a Wrox book for learning all that too, eh.

Thomas

Imar · April 22nd, 2009, 03:59 PM

Absolutely.... http://www.wrox.com/WileyCDA/Section...&field=keyword

You may want to get yourself a recent copy of Beginning JavaScript. Or, when you feel you're getting up to speed with programming in general, a copy of Professional JavaScript by Nicholas Zakas.

In addition to this, there are also many books available (from Wrox and other publishers) that deal wih JavaScript and AJAX at the same time. However, these books often assume some prior background in JavaScript.

So much to study.... ;-)

Imar