Often we have to display email addresses and other contact information on our pages. For example providing a mailto link etc. However, along with the intended users, some other persons/bots are also interested in getting those email IDs for sending spams. For this, spammers use special bots for harvesting email/contact info from the web. In this post, I will show a method using javascript and any server side language by which we can easily protect such important information.

I been using prototype for few of my project lately, however, I been hearing some wonderful things about jquery so decided that it is the right time to give it a shot. Here is what I tried to implement with jquery on asp.net mvc. I decided to add the ability to automatically check whether the username given by the user on the registration page is already taken or is available. For this I added a new action on the account controller named "check". This action returns a ContentResult containing the text to display. Code follows:

public ContentResult Check(string id) { if (Provider.GetUser(id, false) == null ) return Content(""); return Content("The username is already taken."); }

this function takes the username entered by the user as its parameter and checks if the username is available or not. If available, it returns nothing and if the name is already taken it returns the error message. After getting this done, now we will have a look at the changes made to the registration page's view.

The main change other than adding the jquery magic, is to add a span where to display the output from our check action. We will place it just after the text field for entering username. Modified table row of the username field is shown below.

<tr> <td>Username:</td> <td><%= Html.TextBox("username") %> <span id="isUsernameAvailableResult"></span> </td></tr>

after this, we will add the following script to the view. Note: I have included the jquery.js in this snippet, in real world you would probably have it included inside your master page.

<script src="/content/js/jquery-min.js" mce_src="/content/js/jquery-min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#username").blur(function(){ $("#isUsernameAvailableResult").load( "check/" + escape(document.getElementById("username").value) + ".aspx"); }); }); </script>

Here we first add the anonymous function containing the actual code which does the ajax call to the blur event of the username text box. We do this inside the jquery special document.ready event)

The code just selects the span to contain the result and load the output of the ajax call into it. Here the request url is "/account/check/[user entered name here].aspx". Note: I use a modified routing rule in which the url always ends in ".aspx". This is to make it work it on iis 6 also without any big changes.

jquery is a great tool to have, and with the introduction of asp.net mvc, integrating jquery with asp.net is easyer than ever. Enjoy,

Here is a solution using javascript which helps to restrict the
number of letters which can be entered in a html textarea field. Effectively providing the textarea field with a max length property.

<script type="text/javascript" language="javascript">
function CheckMaxLength( txt, size, error)
{
error = document.getElementById( error);
if( txt.value.length >= size)
{
error.style.display = "";
if(txt.value.length > size)
txt.value = txt.value.substr( 0, size);

return;
}
error.style.display = "none";
}
</script>
<textarea id="f" rows="4" cols="20" onkeyup="CheckMaxLength( this, 10, 'error_message');" >
</textarea>
<span style="display:none;" id="error_message"> The textarea is full!</span>

Here we declare a function CheckMaxLength() which takes 3 parameters.
First is the textarea which to check, second is the maximum size allowed and the third is the id of the element which contains the message to display.
In the html markup, we have a textarea who's onkeyup contains a call to the CheckMaxLength() function providing the required arguments.
We also have a hidden span with the error message which we want to display to the user when the textarea reaches its maximum length.
We should be providing the id of this element as the third parameter to the CheckMaxLength() function.

The code inside the function simply checks if the length of the text in the textarea is greater or equals to the size provided.
If so, it sets the element's display style property to "" containing the error message making it visible. and set the text of the textarea
after taking the first size characters. This method stops users from pasting large text into the textarea as the onkeyup event will be triggered while pasting and the size will be checked.
The function then sets the display style property of the error message element to "none" hiding it if the length doesn't exceeds the provided size.

You can modify the script and its action according to your needs and make it a useful and perfect snippet to meet your circumstance.

Happy hacking!

Most often the reason is simple "your markup is wrong!".

More...

By default, when you use the Ajax.Updater to update parts of pages, the javascript contained inside the response does not get evaluated automatically. Thus, the needed scripts can not be included with the response.

This problem can be easily solved by asking the prototype to evaluate the javascript included in the ajax response. A sample updater request.