Check Username availability while typing using AngularJS in ASP.Net MVC

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Hi,

I have one form with fields UserName and Password

Currently i am going do validations based upon Username exists

in database If exists need to display validation message

Ex:If we are going to enter same Username On form i need to display

validation message like below (Ex:already i have stored

UserName=mahesh  agian if we are going to  enter Username=mahesh)

User Name already exists

my final requirement is if UserName exists in database need to

display validation message(not alert message) at the time of entry in

UserName

Could you please help me

@{
    Layout = null;
}
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script src="~/scripts/dirpagination.js"></script>
    <script>
        var app = angular.module("myApp",  ['angularUtils.directives.dirPagination']);

        app.controller("myCntrl", ['$scope', '$http',  function ($scope, $http) {
        
        }]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div>
            <br />
            <br />
            <br />
            <div id="wrapper" class="clearfix">
                    <form name="userForm" novalidate>

                        <div class="form-horizontal">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="UserName">UserName</label>
                                    <input type="text" class="form-control" ng-model="UserName" />
                                </div>
                                <div class="col-md-3">
                                    <label for="Password">Password</label>
                                    <input type="text" class="form-control" ng-model="Password" />
                                </div>
                            </div>
                            <div></div>
                            <div class="form-group" style="width: 120%; text-align: center; padding: 10px;">
                                <div class="col-md-offset-2 col-md-5">
                                    <p>
                                        <button class="btn btn-success btn-sm" ng-model="IsVisible" ng-click="AddUpdateUser()">Submitt</button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
            </div>
            <hr style="width: 550px;" />
            <br />          
        </div>
    </div>

</body>
</html>

 

Posted 6 months ago

Hi mahesh213,

Using the below article i have created the example.

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult CheckUsername(string username)
    {
        bool status = false;
        string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("CheckUserAvailability", conn))
            {
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@UserName", username.Trim());
                conn.Open();
                status = Convert.ToBoolean(cmd.ExecuteScalar());
                conn.Close();
            }
        }
        return Json(status);
    }
}

View

<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
            $scope.CheckAvailability = function () {
                if ($scope.UserName.length > 0) {
                    $http({
                        method: 'POST',
                        url: '/Home/CheckUsername',
                        params: { username: $scope.UserName }
                    }).success(function (data) {
                        if (data) {
                            $scope.Color = "green";
                            $scope.Message = "User Name available.";
                        }
                        else {
                            $scope.Color = "red";
                            $scope.Message = "User Name already exists.";
                        }
                    }).error(function (data) { });
                }
                else {
                    $scope.Message = "";
                }
            };
        } ]);
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div>
            <div id="wrapper" class="clearfix">
                <form name="userForm" novalidate>
                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="UserName">
                                UserName</label>
                            <input type="text" class="form-control" ng-model="UserName" ng-keyup="CheckAvailability()" />
                            <span ng-style="{color:Color}" ng-bind="Message"></span>
                        </div>
                        <div class="col-md-3">
                            <label for="Password">
                                Password</label>
                            <input type="text" class="form-control" ng-model="Password" />
                        </div>
                    </div>
                    <div>
                    </div>
                    <div class="form-group" style="width: 120%; text-align: center; padding: 10px;">
                        <div class="col-md-offset-2 col-md-5">
                            <p><button class="btn btn-success btn-sm">Submitt</button></p>
                        </div>
                    </div>
                </div>
                </form>
            </div>
            <hr style="width: 550px;" />
            <br />
        </div>
    </div>
</body>
</html>

Screenshot