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;






1 comment:

  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

Others

You will like to read it