Home arrow GIS Data & Resources arrow Scripts and Code arrow C# Code arrow Validate ASP.NET Membership username availability with client side AJAX sorta
Validate ASP.NET Membership username availability with client side AJAX sorta PDF Print E-mail

Written by Steve Gourley,


I've been watching some videos lately of some presentations in Canada about web 2.0 and effective form design. They spoke a lot about giving your application a personality as well as making your forms more conversational. Don't make them too long or people won't fill them out. Piece them small so they can gain momentum to finish the process. This could be a totally different post but since this is a GIS portal and I'm blogging about programming I'm already in left field but I'll get to my point.

When you have an application that requires a login, your audience needs to be able to choose a user name. One of the side comments of these presentations was that you shouldn't make a user fill out an entire registration form and then throw some error saying, "Your user name was taken. Fill out the entire form again and try another name." Your target audience will close the window and go about the rest of their day.

So what I went through today was using MS ajax toolkit's ValidatorCalloutExtender with an asp customValidator and some dojo to make an JSON GET request to a WCF service which can check the availability of the typed in username - before they submit the form! If the name is chosen the validator callout with display a message and subsequently block the posting of the data if they were to try to submit the page ignoring the callout.

Some things I noticed is that the customvalidator has to have enableClientScript = true. The ClientValidationFunction, your javascript function, takes a source and clientside_arguments parameter. Setting the clientside_arguments.IsValid = false will display the callout message. As a side note, the validatorCalloutExtender does not work with server side validation. One other hitch is that using the dojo.xhrGet function to initiate the server side code needs to be syncronous. Async calls result with... well, nothing. So I guess this isn't truely ajax since it's not asynchronous but... oh well. dojo.xhrGet is async by default so you need to add sync: true to your hash.

Here's the code to do what I accomplished.


<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="test"></asp:TextBox>

    <asp:CustomValidator ID="CV_username" runat="server" ErrorMessage="<b>Username already taken</b><br />Please choose another username"

        Display="None" SetFocusOnError="true" ValidateEmptyText="false" ValidationGroup="test"

        ClientValidationFunction="check" ControlToValidate="TextBox1" EnableClientScript="true" />

    <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="VCE_test" TargetControlID="CV_username"

        HighlightCssClass="validatorCalloutHighlight" Width="225px" BehaviorID="VCE_test" />

 

    <script type="text/javascript">        djConfig = { parseOnLoad: true }</script>

 

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>

 

    <script language="javascript" type="text/javascript">

 

        function check(source, clientside_arguments) {

            var User = { 'username': clientside_arguments.Value, 'application': "/WRI" };

            var request = { 'User': dojo.toJson(User) };

 

            dojo.xhrGet({

                url: "http://agrc-sgourley2/WSUT/Validate.svc/CheckAvailability",

                handleAs: 'json',

                content: request,

                sync: true,

                load: function(result, ioArgs) {

                    console.log(result);

                    clientside_arguments.IsValid = result;

                },

                error: function(err) {

                    clientside_arguments.IsValid = false;

                }

            });

        }



Users' Comments  
 

No comment posted

Add your comment

22, Jan. 2009
Last Updated ( 22, Jan. 2009 )
 
< Prev   Next >

AGRC Contacts | UGIC Contacts

feed image feed image

Utah GIS Portal © 2009 AGRC

Optimized for