Usability, MVC, ASP.NET

20. Juli 2007 01:13
by Henrik Stenbæk
6 Kommentare

ASP.NET AJAX username availability with suggestions

20. Juli 2007 01:13 by Henrik Stenbæk | 6 Kommentare

Based on my resent post, I have rewritten the code and turned it in to a custom control:

  • It is no longer depending on the Futures CTP.
  • If the username isn’t available it’s possible to get suggestions with available names.
  • The web service UsernameResult is now returning a class which is automatically JSON serialized by ASP.NET AJAX and passed into JavaScript as a parameter.
  • Fully integrated with the asp.net 2.0 membership.

Try out the online demo.

 

How to use the control

Register the control on the page:

<%@ Register TagPrefix="one" Namespace="onesoft.common.controls" %>

Then add the control

Remember to set ControlToTest - just like on a validator control :-). All the other properties has defaults as shown above.

Add a ScriptManager to your page (before the usernameAvailability control) and define a ServiceReferance:

<one:usernameAvailability runat="server" ID="IsAvalible" 
ControlToTest="Username" 
ForeColor="DimGray" 
NotAvailableTextColor="Red" 
AvailableTextColor="CornflowerBlue" 
StartUpTextColor="DimGray" 
AvailableText="{0} is available" 
NotAvailableText="{0} is not available" 
StartUpText="Type a username" 
SuggestionLinkText="Suggest" 
UseSuggestion="true"></one:usernameAvailability> 

The webservice has 2 functions: 

IsAvailable - checking the availability of the current name
suggestAvailable &ndash; returning suggestions for available name.

Remember to include the file UsernameService.asmx to your root and add UsernameService.cs to App_Code.

That's it - now start checking for available usernames.

Try it out with the online demo - type your preferred name, if it's available create the new user and retry with the same name - now try the suggestion link.... ok I know it isn't clever, but it is available usernames ;-)


Download the full sourcecode including the demo.

AJAXUsernameControl.zip (257,01 kb)

I welcome any comments and suggestions.

Enjoy ;-

Henrik

16. Juli 2007 23:38
by Henrik Stenbæk
3 Kommentare

Finding a recorder for making screencast

16. Juli 2007 23:38 by Henrik Stenbæk | 3 Kommentare

When starting this blog I know that I wanted to make screen recordings for usability and AJAX “show-off“. So I started looking around for the right software to do the job.

Some of my main demands for that software were:
1. I wanted it to include a navigation bar for start, stop and browse the recorded video
2. I wanted it to make small file as results (at the bottom line I have to pay for the server traffic my self = the bigger files the bigger bill).
3. Due to the fact that I don’t know if I will keep on posting to the blog, I was interesting in keeping the cost of the tool as low as possible.

Camtasia Studio

I started googling for the software and the first tool I ran into was:
Camtasia Studio, it was USD 300 for a license but it got most of what I wanted. So as a starting I downloading the free trail and testing it out.

It turned out that the exported result was a lot of files

The main video is in the cofman.swf file and is nearly 1.5 MB.

The swf file itself didn't include the navigation panel. The navigation was placed in a separate file (..._controller.swf) with the size of 173 kb itself and it was all put together with the javascript and XML files.
When the movie starts up it shows a stupid "created with Camtasia Studio" splash screen - I don't know if this will go away after one had bought a licence - but this wasn't what I expected a all :-)

CamStudio

Then I found CamStudio, a freeware tool that seems to be a little outdated. It had the possibility to include a navigation panel in the swf file, but the layout of it is old fashioned and for the cofman.com video the total file ends out near 2.0 MB (including the navigation panel)

BBFlashBack

I ended out buying a license for BBFlashBack Exprerss for only USD 39. It produced the cofman.com video including navigation panel in a swf file at only 0.2 MB!!

BBFlashBack install itself as a second video card which, according to the user review on download.com, has caused computer problem for people that want to uninstall it… but for now I don't have any plans on uninstall it and it working fine :-). And hopefully I'll bee able to record a lot of usability do and don'ts in the nearest future.

11. Juli 2007 08:18
by Henrik Stenbæk
3 Kommentare

Advanced search filter with instant AJAX feedback

11. Juli 2007 08:18 by Henrik Stenbæk | 3 Kommentare

Cofman.com has this great search filter for finding available holiday homes.

Instead of making people fill out a lot of search criteria, click the ‘GO!’ button and then have the result: we don’t have anything meeting your search criteria. Cofman give the user an instant response “{0} meets all your requirements”. But Cofman doesn’t stop here, they also provide another result “{1} houses meets nearly all your requirements” giving the user with a lot of preferences a second chance to find a house.

See it for yourself. Watch the video or go the cofman.com homepage.

 

9. Juli 2007 23:03
by Henrik Stenbæk
9 Kommentare

ASP.NET AJAX username availability check without UpdatePanel

9. Juli 2007 23:03 by Henrik Stenbæk | 9 Kommentare

 

I have improved this code and turned it into a custom control – please se this post

 

Inspired by the RememberTheMilk signup usability I decided to write an ASP.NET AJAX function that works the same way. I also wanted my function to fire on every keystroke so that the user will get an instant response about whether the username is available.

After reading about the overhead that UpdatePanel produce on the server load I decided to try to write the AJAX username availability check without using the UpdatePanel.

For this example, I'm going to use a standard ASP.NET web form along with some of the functionalities from the Microsoft ASP.NET Futures (May 2007) Release.

I create one simple Web Form containing only a text box and a label

Username: 
<asp:TextBox ID="Username" runat="server" Width="93px">
</asp:TextBox> 
<asp:Label ID="lblAvailability" runat="server" Text="Type a username" 
ForeColor="DimGray">
</asp:Label> 

For the username availability check I create a webservice.

[ScriptService] public class UsernameService : System.Web.Services.WebService { .. } 


Remember to prefix the Service with the [ScriptService] attribute otherwise it will not work when called from JavaScript.

I add one function to the WebService called IsAvailable. The purpose for this function is to check for the availability of the current typed username. Inspired by Dave Ward I decided to check availability through a call to Membership.GetUser().

[WebMethod] public string[] IsAvailable(string TocheckFor) 
{ 
string[] myString = new string[2]; 
if (Membership.GetUser(TocheckFor) != null) 
{ 
myString[0] = string.Format("{0} is taken", TocheckFor); 
myString[1] = "false"; 
} 
else 
{ 
myString[0] = string.Format("{0} is available", TocheckFor); 
myString[1] = "true"; 
} 
return myString; 
} 

The IsAvailable function return a string array with the status text and a 'true'/'false' string depending on if the username is available or not.

I add a ScriptManager to the Web Form that will take care of the communication with the WebService.

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
<Services> 
<asp:ServiceReference Path="UsernameService.asmx" /> 
</Services> 
<Scripts> 
<asp:ScriptReference Name="PreviewScript.js" 
Assembly="Microsoft.Web.Preview" /> 
</Scripts> 
</asp:ScriptManager> 

In the script manager I configure the webService to be used with the client side javaScript. So I write a little bid of clientside javaScript

<script type="text/javascript" > 
function checkName() {    var tb = new Sys.Preview.UI.TextBox($get('Username')); 
var name = tb.get_text(); 
if(name.lenght != 0) 
UsernameService.IsAvailable(name, onIsAvailableCompleted) 
} 
function onIsAvailableCompleted(result) 
{ 
if(result != null) 
{ 
var lbl = new Sys.Preview.UI.Label($get('lblAvailability')); 
lbl.set_text(result[0]); 
if(result[1]=='true') 
document.getElementById('lblAvailability').style.color="green"; 
else 
document.getElementById('lblAvailability').style.color="red"; 
} 
} 
</script> 

The first function checkName calls the WebService if there is any text in Username, setting the second function (onIsAvailableCompleted) as the call back function to receive the answer from the webservice.

Finally in code behind I add the clienside function checkName to the Username textbox's onKeyUp

Username.Attributes.Add("onkeyup", "checkName()");

Thats all. Now the username is checked on every keystroke and with a minimum of server traffic.

Download the code: UsernameFutures.zip (708,33 kb)

3. Juli 2007 19:11
by Henrik Stenbæk
3 Kommentare

RememberTheMilk signup

3. Juli 2007 19:11 by Henrik Stenbæk | 3 Kommentare

remember the milk has this great ajax enabled signup process:

Especially pay attention to the way the Username is validated as you type with the text “{0} is not available”

Dave Ward has an ASP.NET AJAX username availability check implemented with ASP.NET and AJAX UpdatePanel.

Daves implementation it not, like the one rememberthemilk, working with key down but checks the availability when the control lose focus.