Designing and coding

Menu

User Name availability check is required in most of the registration forms where we allow user to choose a user name that one can use to login later. In some other scenarios, we allow user to use his/her email as login id/user name. In both the scenarios, we require to make sure that user name or email is not used earlier. In this post, I am going to discuss, how to achieve this feature in an application which is developed using AngularJS, ASP.NET MVC and ASP.NET Web API. I wont discuss in detail the Data Access part, where one can use any approach like Entity Framework, Identity Framework , Membership provider or ADO.NET.

In this post, we will create an empty ASP.NET project with MVC and Web API. We’ll start working on Web API part where an API will be exposed which will take user’s entry for user name as input and return true and false based on its existence. After that we will work on MVC part where we will create a registration form where user will put its information. In last, we will focus on AngularJS and create the basic infrastructure including a Service which will call the Web API to check the user name existence then how will do the check on view we will discuss at later section.

I created an API folder under Controller and created an empty Web API controller (RegistrationController) which exposed an API IsUserNameAvailable which takes an username and returns true if available else returns false. It is as

Inside the API, I have used a SQLRepository which connects to the database and returns a list of users based on it. If there is no match then list contains no items. Let’s have a look that our table in database form where the account is getting matched.

Now let’s just quickly check that whether our API is working properly. The simplest way to check any API Get request via browsing the URL itself. So let’s check the URL

Here we are using $setValidity of for the model and add the unique attribute and set it true/false based on the service response. This will set the validity of the input as true/false and we can show some messages based on that. So let’s see the form

We are calling checkUserAvailable function in blur event so that it gets fired when user moves focus from the control after entering the data. We also added a span (p) to show the error message which checks the input control state and unique attribute that we added. Now let’s run the application and see

As Brij is already exists in the database so it is not available and if you enter any other username which is not available in database, it wont show the message.

Second option is much cleaner so we will create a custom directive (I have written 19 posts on AngularJS, you can go here to learn all the topics or for custom directives refer the Part -9 and Part -10)

So let’s create our custom directive. Here it will use the RegService and add an onblur event to the input which will be fired once user goes out of the control after entering the some data as

We have set the ng-model and added our custom directive useravail as an attribute at the end in the input element. When we will run this application, it will have same as first option.
So we have implemented User name check using AngularJS, ASP.NET MVC and Web API. We can change the look n feel based on our need. Complete code is attached with this post.