I'm having two textboxes, one is username and the other one is password with a button named 'Login'.
Whenever the user tries to click on the login button without entering username or password, it must display error messages like "Username is required" and "Password is required". And also whenever the user tries to click on the login button after entering the username and password, it must redirect to the next page saying "Welcome userid : userid & username : username" i.e. it must fetch the corresponding userid based on the username from the database.
AngularHome.js :
var app = angular.module('homeapp', []);
app.controller("HomeController", function ($scope, $http) {
$scope.btntext = "Login";
$scope.login = function () {
$scope.btntext = "Please wait..!";
$http({
method: "POST",
url: '/Home/userlogin',
data: $scope.user
}).success(function (d) {
$scope.btntext = 'Login';
if (d == 1) {
window.location.href = '/Home/dashboard';
}
else {
alert(d);
}
$scope.user = null;
}).error(function () {
alert('failed');
})
}
})
Index.cshtml :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="~/login.css" rel="stylesheet" />
<script src="~/script/angular.min.js"></script>
<script src="~/script/AngularController/Angularhome.js"></script>
<style>
body {
background: -webkit-linear-gradient(left, #1143a6, #00c6ff);
}
</style>
</head>
<body ng-app="homeapp" ng-controller="HomeController">
<section class="container ">
<div class="main_cont register">
<form role="form" name="loginForm" novalidate>
<div class="login-panel">
<h3 class="login-heading"></h3>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" ng-model="user.username" autofocus="autofocus" required />
<span class="red-text" ng-if="loginForm.username.$error.required && loginForm.email.$dirty">
<br>Username is required<br>
</span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" ng-model="user.password" required />
<span class="red-text" ng-if="loginForm.password.$error.required">
<br>Password is required<br>
</span>
</div>
<div class="float-right">
<input type="submit" class="btn btn-primary" value="{{btntext}}" ng-click="login()" />
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
dashboard.cshtml :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>dashboard</title>
</head>
<body>
<div>
<h1>WelCome @Session["user"]</h1>
</div>
</body>
</html>
user.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AnguarLogin.Models
{
public class user
{
public string username { get; set; }
public string password { get; set; }
}
}
db.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using AnguarLogin.Models;
namespace AnguarLogin.database_Access_Layer
{
public class db
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString);
public int userlogin(user us)
{
SqlCommand com = new SqlCommand("Sp_User_login", con);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.AddWithValue("@Username",us.username);
com.Parameters.AddWithValue("@Password",us.password);
SqlParameter oblogin = new SqlParameter();
oblogin.ParameterName = "@Isvalid";
oblogin.Direction = ParameterDirection.Output;
oblogin.SqlDbType = SqlDbType.Bit;
com.Parameters.Add(oblogin);
con.Open();
com.ExecuteNonQuery();
int res = Convert.ToInt32(oblogin.Value);
con.Close();
return res;
}
}
}
HomeController.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AnguarLogin.Models;
using System.Data;
namespace AnguarLogin.Controllers
{
public class HomeController : Controller
{
// GET: /Home/
database_Access_Layer.db dblayer = new database_Access_Layer.db();
public ActionResult Index()
{
return View();
}
public ActionResult dashboard()
{
return View();
}
public JsonResult userlogin(user us)
{
string result = Convert.ToString(dblayer.userlogin(us));
if (result=="1")
{
Session["user"] = us.username;
}
else
{
result = "Email or Password is wrong";
}
return Json(result,JsonRequestBehavior.AllowGet);
}
}
}
