In this article I will explain with an example, how to check Username availability i.e. check whether Username exists in database or not using AngularJS and Entity Framework in ASP.Net MVC Razor.
This article will illustrate how to check Username availability in database on Registration Form by making AJAX call to database using AngularJS and Entity Framework in ASP.Net MVC Razor.
 
 
Database
I have made use of the following table Users with the schema as follows.
Check Username Availability (Exists) in Database using AngularJS in ASP.Net MVC
 
I have already inserted few records in the table.
Check Username Availability (Exists) in Database using AngularJS in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
Check Username Availability (Exists) in Database using AngularJS in ASP.Net MVC
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling AJAX POST operation
This Action method handles the call made by the AngularJS function in the View.
The value of the Username is compared with the records from the Users table fetched using Entity Framework with the help of Lambda expression.
If the Username does not exists in the Users table, then True value is returned and if it exists then False value is returned.
Note: The return type of the Action method is JsonResult, for more details please refer ASP.Net MVC JsonResult example.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult CheckUsername(string username)
    {
        UsersEntities entities = new UsersEntities();
        bool isValid = !entities.Users.ToList().Exists(p => p.UserName.Equals(username, StringComparison.CurrentCultureIgnoreCase));
        return Json(isValid);
    }
}
 
 
View
The View consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML TextBox, an HTML Button and an HTML SPAN element.
There is a function named CheckAvailability inside the AngularJS Controller. The CheckAvailability function is called when the HTML Button is clicked.
Inside the CheckAvailability function, the $http service is used to make an AJAX call to the Controller’s Action method.
Note: If you want to learn more about these directives, please refer my article AngularJS: $http POST example with Parameters.
 
When the response is received, based on whether the Username is available or in use, appropriate message is displayed in the HTML SPAN element.
The ClearMessage function gets called when user types in the TextBox, it simply clears the message displayed in the HTML SPAN element.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        Username:
        <input type="text" ng-model="Username" ng-keyup="ClearMessage()" />
        <input type="button" value="Show Availability" ng-click="CheckAvailability()" />
        <br/>
        <span ng-bind="Message" ng-style="{color:Color}"></span>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http) {
            $scope.CheckAvailability = function () {
                $http({
                    method: "POST",
                    url: "/Home/CheckUsername",
                    dataType: 'json',
                    data: '{username: "' + $scope.Username + '" }',
                    headers: { "Content-Type": "application/json" }
                }).success(function (data, status) {
                    if (data) {
                        //Username available.
                        $scope.Color = "green";
                        $scope.Message = "Username is available";
                    }
                    else {
                        //Username not available.
                        $scope.Color = "red";
                        $scope.Message = "Username is NOT available";
                    }
                });
            };
 
            $scope.ClearMessage = function () {
                $scope.Message = "";
            };
        });
    </script>
</body>
</html>
 
 
Screenshot
Check Username Availability (Exists) in Database using AngularJS in ASP.Net MVC
 
 
Downloads
Download Code