Basically for any application we need a login page. Now demonstrating angularjs with MVC login
form tutorial. Please see the step by
step procedure to create the login form like below;
Step 1:
Create MVC application in ASP.net;
Step 2:
Import Angularjs.js into application like below;
You can download Angularjs.js from below path
And import it to application.
Step 3:
Now do the bundling and magnification for angularjs script file;
Now goto :: Appstart à
BundleConfig.cs
Write down below code in RegisterBundles(BundleCollection bundles) Method
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js"));
Step 4:
Now Take the reference of this of
Bundels into Views à
Shared à_Layout.cshtml
So it will use for your all pages where you will refer the _layout.cshtml
file. Place it along with another bundles reference.
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
And add ng-app=”MyApp” in the body; like below, please take
care for casing;
<body ng-app="MyApp">
After defining it, your page become as angularjs page
Step 5: Create
Table in database to maintain the login details like below;
Step 6: Import
table for entity Framework in edmx file.
Step 7: Create
a model with name of UserLoginDetails
namespace angularMVC.Models
{
public class UserLoginDetails
{
public string UserName { get; set; }
public string Password { get; set; }
}
}
Step 8: Create
a datacontroller – controller action to interact with EntityFramework method as
:
namespace angularMVC.records
{
public class DataController : Controller
{
//
// GET:
/Data/
public JsonResult UserLogin(UserLoginDetails LoginData)
{
using(UserRecordsEntities ur = new UserRecordsEntities())
{
var ld = ur.LoginDetails.Where(o => o.UserName ==
LoginData.UserName).FirstOrDefault();
return new JsonResult { Data = ld, JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
}
}
Step 9: Create
a JS file and you need to call the modules and controller of angular JS.
Created a Js file name as UserLogin.js
///
Modules for angular Js
var app = angular.module('MyApp', [])
///
Creating the controller which will refer to the view where we need to call the
angular method
app.controller('LoginDetailValue', function ($scope, $http) {
$scope.Message = '';
$scope.IsLogin = false;
$scope.Submitted = false;
//
Creation of object which need to pass for login method
$scope.LoginData = {
UserName: '',
Password: ''
};
$scope.Login = function () {
$scope.Submitted = true;
///
Calling the controller by Ajax method
$http({
url: "/Data/UserLogin",
method: "POST",
data:
JSON.stringify($scope.LoginData),
headers: { "Content-type": "application/json" }
}).then(function (d) {
if (d.data.UserName != null) {
$scope.IsLogin = true;
$scope.Message = 'Login Success';
}
else {
$scope.Message = 'wrong User';
}
});
}
})
Step 10: Now
create an action in homecontroller like below;
namespace angularMVC.Controllers
{
public class HomeController : Controller
{
public ActionResult Login()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
Step 11: Create
View for it as like below; with name of login.cshtml.
@model
angularMVC.Models.UserLoginDetails
@{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Login</h2>
<div ng-controller="LoginDetailValue">
<form name="f1" novalidate ng-submit="Login()">
<div style="color:rgb(255, 0, 0)">{{Message}}</div>
<div class="form-group">
<div class="col-lg-2">
User Name:
</div>
<div class="col-lg-10">
@Html.TextBoxFor(m => m.UserName, new { data_ng_model = "LoginData.UserName", required = "required",
placeholder = "UserName" })
</div>
<div class="col-lg-2">
Password:
</div>
<div class="col-lg-10">
@Html.PasswordFor(m => m.Password, new { data_ng_model = "LoginData.Password", data_ng_class = "submitted?'ng-dirty':''", required = "required", placeholder = "Password" })
</div>
<div class="col-lg-2">
</div>
<div class="col-lg-10">
<button type="submit" class="btn btn-success" value="login"><span class="glyphicon
glyphicon-save"></span> Submit</button>
</div>
</div>
</form>
</div>
<!--
Refrence of UserLogin js file for -->
@section
scripts{
<script src="~/Scripts/AngularController/UserLogin.js"></script>
}
Now you created your application fully; now time to test
application;
What we should do here in case of Postgresql
ReplyDeletenamespace angularMVC.records
{
public class DataController : Controller
{
//
// GET: /Data/
public JsonResult UserLogin(UserLoginDetails LoginData)
{
using(UserRecordsEntities ur = new UserRecordsEntities())
{
var ld = ur.LoginDetails.Where(o => o.UserName == LoginData.UserName).FirstOrDefault();
return new JsonResult { Data = ld, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
Nice post.Thank you so much for sharing.Yiioverflow is a web development company.We have well expert team in Angular JS, Ionic, Yii Framework, Node JS, Laravel, PHP, MySQL, and WordPress.If you want a developer visit.. https://yiioverflow.com/
ReplyDelete