Usability, MVC, ASP.NET

3. Oktober 2007 14:42
by Henrik Stenbæk
0 Kommentare

Matt Berseth shows ModalPopup with Multiple Cancel Buttons

3. Oktober 2007 14:42 by Henrik Stenbæk | 0 Kommentare

based on: http://mattberseth.com/blog/2007/10/modalpopup_with_multiple_cance.html

1. Add BehaviorID to the Popupextender:

<cc1:ModalPopupExtender BehaviorID="mdlPop" ..

(from Ajax.asp.net: BehaviorID: In cases where you would like to access the client-side behavior for your extender from script code in the client, you can set this BehaviorID to simplify the process.)

2. Add code to the cancel buttons:

.. OnClientClick="$find('mdlPop').hide();return false;" ..

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&rsquo;t available it&rsquo;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

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)