Others

Tuesday, 10 November 2015

Angularjs with MVC login form tutorial

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;






3 comments:

  1. What we should do here in case of Postgresql

    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 };
    }
    }
    }
    }

    ReplyDelete
  2. 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
  3. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
    For more details: AngularJs training in velachery

    ReplyDelete