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

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Mar 17, 2019 10:19 PM
Forum: ASP.Net MVC
Answer: 1
Views: 4449
Sample Code: Download

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>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Mar 18, 2019 02:52 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us