Hur man skapar en loginsida i AngularJS i en MVC4-applikation

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi se hur man skapar en loginsida genom att använda AngularJS i en ASP.NET MVC4-applikation.

I förra exemplet såg vi hur vi kunde använda get()-metoden. Här ska vi se hur vi kan använda AngularJS $http post()-metod för att skicka in data till servern.

Steg

  1. Skapa tabeller i databasen

    Öppna databasen > Högerklicka på tabellen > Add New Table > Add Columns > Save > Ange ett tabellnamn > Ok

    Add New Table

    I denna laboration används följande tabell:

    [dbo].[Logins]
    Tips: Klicka på Update när du har skapat kolumnerna för att uppdatera databasen.

  2. Uppdatera dataentitetsmodellen

    Gå till Solution Explorer > Öppna Entity Data Model [i laborationen ContactsModel.edmx] > Högerklicka på/i en tom yta för kontextmenyn > Update Model From Database… > Markera Tables i popup-fönstret som dyker upp > Finish

  3. Skapa en modell (Class)

    Gå till Solution Explorer > Högerklicka på Models-mappen i Solution Explorer > Add > Class > Ange ett namn för klassen [i laborationen använder vi ”LoginData”]

    public class LoginData
    {
        public string UserName { get; set; }
        public string Password { get; set; }
    }
    LoginData.cs

  4. Lägg till en ny Action till Controller [här DataController.cs] för Login och som kan returnera anvädardata av typen JsonResult från databasen

    Här har vi skapat Action-metoden UserLogin(LoginData d) i ”DataController”:

    public JsonResult UserLogin(LoginData d)
    {
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            var user = dc.Logins.Where(a => a.UserName.Equals(d.UserName) && a.Password.Equals(d.Password)).FirstOrDefault();
            return new JsonResult { Data = user, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

  5. Skapa en ny .js-fil för att kunna lägga till användare (en ny AngularJS-Controller och en Factory)

    Gå till Solution Explorer > Högerklicka på mappen där AngularJS-Controller ska sparas [Scripts\AngularController] > Add > Välj JavaScript File > Tilldela filen ett namn [i laborationen används Item name: Part3Controller.js] > Add

    angular.module('MyApp') // Detta är en utökning av tidigare skapad Module
    .controller('Part3Controller', function ($scope, LoginService) {
        $scope.IsLogedIn = false;
        $scope.Message = '';
        $scope.Submitted = false;
        $scope.IsFormValid = false;
        
        $scope.LoginData = {
            Username: '',
            Password: ''
        };
     
        //Kolla om Form validerar ("f1" är Name-property på Form)
        $scope.$watch('f1.$valid', function (newVal) {
            $scope.IsFormValid = newVal;
        });
        
        $scope.Login = function () {        
            $scope.Submitted = true;
            if ($scope.IsFormValid) {
                LoginService.GetUser($scope.LoginData).then(function (d) {
                    if (d.data.Username != null) {
                        $scope.IsLogedIn = true;
                        $scope.Message = "Välkommen, du har loggat in! " + d.data.FullName;
     
                    }
                    else {
                        alert('Felaktiga credentials!');
                    }
                });
            }
        };
     
    })
    .factory('LoginService', function ($http) {
        var fac = {};
        fac.GetUser = function (d) {
            return $http({
                url: '/Data/UserLogin',
                method: 'POST',
                data: JSON.stringify(d),
                headers: {'content-type':'application/json'}
            });
        };
        return fac;
    });
  6. Lägg till en ny Action i backend-Controller för login-View

  7. Skapa en login-View

    @{
        ViewBag.Title = "Part3";
    }
    <style>
        input {
            padding: 5px;
            border: 1px solid #A5A5A5;
        }
            input.ng-dirty.ng-invalid {
                border: 1px solid red;
                background-color: rgb(255, 244, 244);
            }
        .error {
            color: red;
        }
    </style>
    <h2>Part3 - Create Login Page</h2>
    
    {{Message}}
    <table ng-show="!IsLogedIn"> <!-- I detta fall innebär ng-show="!IsLogedIn" att vi vill gömma tabellen lär vi har loggat in --> <tr> <td>Username : </td> <td> <!-- Här betyder ng-class="Submitted?'ng-dirty':''" att om vi har submittat (klickat på submit-knappen) så ska dirty state göra så att en röd ram visas)--> <input type="text" ng-model="LoginData.UserName" name="cUsername" ng-class="Submitted?'ng-dirty':''" required autofocus /> <span class="error" ng-show="(f1.cUsername.$dirty || Submitted) && f1.cUsername.$error.required">Username required</span> <!-- ng-show="(f1.cUsername.$dirty || Submitted) && f1.cUsername.$error.required" betyder att span-taggen endast ska visas när Control cUsername är ogiltig--> </td> </tr> <tr> <td>Password : </td> <td> <input type="password" ng-model="LoginData.Password" name="cPassword" ng-class="Submitted?'ng-dirty':''" required autofocus /> <span class="error" ng-show="(f1.cPassword.$dirty || Submitted) && f1.cPassword.$error.required">Ange lösenord</span> </td> </tr> <tr> <td></td> <td> <input type="submit" value="Login" /> </td> </tr> </table> </form> </div> @section scripts{ http://~/Scripts/AngularController/Part3Controller.js }

    ng-submit ng-submit hindrar det normala flödet och binder ihop AngularJS-funktionen med OnSubmit-eventet (som inträffar när formuläret submittas = man trycker på submit-knappen).

    ng-show ng-show gör så att vi kan visa eller dölja element beroende på om elementets värde ng-show är true||false.

    ng-model ng-model har en dubbelriktad kommunikation [$scope till View och View till $scope]. Inbyggt finns validering och minneshantering såtillvida att ett state för en Control koms ihåg.

    ng-class Ibland har vi behov av att kunna ändra/uppdatera en Views CSS-klass on-the-fly. ng-class ger oss exempelvis möjligheten att kunna sätta CSS-klasser dynamiskt och villkorsbaserat.

    $dirty $dirty är en boolean-property på <form />-taggar. Värdet är true om användaren har interagerat med formuläret. $dirty är bara en av många formuläregenskaper. Andra är exempelvis $pristine, $valid, $invalid, $submitted och $error.

  8. Kör projektet

Annonser