If you ask how to prevent duplicate user names in forums, one of the suggestions that is often put forward is to apply a unique constraint in the database column that holds the user name. Any attempt to submit a duplicate value will result in an exception being raised in the relevant database provider. You can catch this exception and show the user an appropriate message. This works - and you are always advised to add unique constraints to database columns that should hold unique values - but it's a fairly clunky solution. And many people feel that you should not use exceptions as a means to manage your business rules (myself included).
The solution featured in this article uses AJAX to query the database and to give the user immediate feedback when they enter their chosen user name. The AJAX call requests a page that exists purely to query the database to see if the selected user name is already in use. The solution also includes a server side chekc to ensure that users who have disabled JavaScript so not slip through the net. The solution requires a couple of amendments to the Register.cshtml file in the Starter Site, and the addition of 3 files. But first, the changes to the Register.cshtml page. The first change is in the inclusion of a JavaScript file called dupecheck.js (which will be created a bit later):
@* Remove this section if you are using bundling *@ @section Scripts { <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script src="~/Scripts/dupecheck.js"></script> }
And the second is the server side check to see if the username is in use:
if(Functions.IsDuplicate(email)){ ModelState.AddError("email", "User name is already taken"); }
I placed this in the if(IsPost) section just after the initial variables that represent the submitted values (email, password and confirmPassword) are declared. The code calls a function named IsDuplicate. The function is declared in a file called Functions.cshtml which is placed in a folder called App_Code:
@functions { public static bool IsDuplicate(string username){ var db = Database.Open("StarterSite"); var commandText = @"SELECT COUNT(Email) FROM UserProfile WHERE Email = @0"; return (int)db.QueryValue(commandText, username) > 0; } }Note that the name of the folder is important. The function returns a bool. The value of the bool is determined as a result if the SQL query which gets a count of the rows containing the provided user name. By default, the Starter Site uses a column called Email in the UserProfile table for the storage of user names. This function is also called in a separate file named DupeCheck.cshtml. This file is placed in the root of the site:
@{ Layout = null; if(IsAjax){ var username = Request["username"]; var result = Functions.IsDuplicate(username); Json.Write(new { isDupe = result }, Response.Output); } }
DupeCheck.cshtml is designed to work exclusively with AJAX. The code includes an instruction to nullify any layout pages that might have been set in a _PageStart file, and then it uses the IsAjax property to determine if the page has been requested via an AJAX call. If it has, it uses the IsDuplicate method to check the availability of the posted username and returns the result to the calling code. The result is an anonymous type that has one propery: isDupe, which is a boolean. The anonymous type is serialised to JSON by the Json helper.
The final part of the solution is the dupecheck.js file. This uses jQuery:
$(function () { $('#email').change(function () { $.post( '/DupeCheck', { username: $(this).val() }, function (data) { var emailValidation = $('span[data-valmsg-for="email"]'); if (data.isDupe) { if (emailValidation.hasClass('field-validation-valid')) { emailValidation.removeClass('field-validation-valid'); emailValidation.addClass('field-validation-error'); emailValidation.text('That name is already taken!'); } } else { if (emailValidation.hasClass('field-validation-error')) { emailValidation.removeClass('field-validation-error'); emailValidation.addClass('field-validation-valid'); emailValidation.text(''); } } },'json' ); }); });
An event handler is attached to the change event of the user name input (which has an id if email in the Starter Site). The current value is posted to the DupeCheck.cshtml page via AJAX. The code above checks the response from the server to see if the value is a duplicate, and if it is, an appropriate error message is displayed to the user.
And there it is - a clean way to provide users with immediate feedback on the availability of their chosen user name.
