Hur man bygger ett formulär för registrering med validering.

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi bygga ett enkelt registreringsformulär med validering av inmatat användardata.

Steg

  1. Skapa tabell i databasen

    I nedanstående figur har vi utökat databastabellen Logins med fälten EmailId resp. Gender.

    Öppna databasen > Högerklicka på tabellen vars kolumndefinition som vi ska ändra > Open Table Definition > Lägg till önskade kolumner > Update > Ok

  2. Uppdatera dataentitetsmodellen

    Lägg till en ny Action i backend Controller som renderar View

    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. Lägg till en ny Action i DataController som hanterar lagring av data till databasen

    //lagra registreringsformulärdata i databas
    [System.Web.Http.HttpPost]
    public JsonResult Register(Models.Logins u)
    {
        string message = "";
        //Här sparar vi data till databasen
        if (ModelState.IsValid)
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                //kolla om användaren är registrerad
                var user = dc.Logins.Where(a => a.UserName.Equals(u.UserName)).FirstOrDefault();
                if (user == null)
                {
                    //ej registrerad, spara
                    dc.Logins.Add(u);
                    dc.SaveChanges();
                    message = "Success";
                }
                else
                {
                    message = "Username not available!";
                }
            }
        }
        else
        {
            message = "Failed!";
        }
        return new JsonResult { Data = message, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
  4. Tilldela valideringsattribut till Logins-Model på serversidan

    Här är en liten specialare. Datatavalidering av en godtycklig Model på serversidan brukar normalt göras genom att man dekorerar en Model-class-property med en valideringsegenskap.

    [StringLength(50)]
    public string LastName { get; set; }

    Här, i laborationen, måste vi emellertid angripa en annan metod eftersom datamodellerna (klasserna) genereras dynamiskt (eller rättare, när vi har uppdaterat databas med annat antal tabellkolumner eller tabeller, uppdaterar vi manuellt våra datamodeller).

    Artikeln [EF Database First with ASP.NET MVC: Enhancing Data Validation] beskriver ett tillvägagångssätt:

    1. Skapa en metadata-klass (en vanlig klass som kommer att få i uppgift att beskriva en annan klass)LoginsMetadata.cs:

      using System.ComponentModel.DataAnnotations;
      namespace angularjs_mvc4.Models
      {
          public class LoginsMetadata
          {
              public int UserId { get; set; }
              [Required(ErrorMessage = "Username required", AllowEmptyStrings = false)]
              public string UserName { get; set; }
              [Required(ErrorMessage = "Password required", AllowEmptyStrings = false)]
              public string Password { get; set; }
              [Required(ErrorMessage = "Fullname required", AllowEmptyStrings = false)]
              public string FullName { get; set; }
              [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$", ErrorMessage = "Email ID not valid")]
              public string EmailId { get; set; }
              [Required(ErrorMessage = "Gender required", AllowEmptyStrings = false)]
              public string Gender { get; set; }
          }
      }
      LoginsMetadata.cs
    2. Eftersom designern dynamiskt kommer att generera vår Model (klass), dynamiskt i betydelsen att den bestämmer över allt innehåll i klassen, så kan vi inte ju inte lägga validering där eftersom det skulle skrivas över. Det vi gör är att lägga in en partiell klass med samma namn som den som skapats av designer. Den partiella klassen dekoreras därefter med attributet [MetadataType]. [MetadataType] tar därefter som input vår LoginsMetadata-klass:
    3. using System.ComponentModel.DataAnnotations;
      namespace angularjs_mvc4.Models
      {
                          [MetadataType(typeof(LoginsMetadata))]
          public partial class Logins
          {
          }
      }
      Logins.ValidationRules.cs (vid namngvning av partiella klasser är det lämpligt att använda ett beskrivande mönster, MyClass.SomeSpecialBehaviour.cs)
  5. Skapa en AngularJS Controller och Factory

    Gå till Solution Explorer > Högerklicka på mappen där AngularJS Controller ska skapas > Add > Välj JavaScript File > Ange ett namn > Add

    angular.module('MyApp') //utöka befintlig AngularJS-modul
    .controller('Part6Controller', function ($scope, RegistrationService) { 
        //variabeldeklaration
        $scope.submitText = "Save";
        $scope.submitted = false;
        $scope.message = '';
        $scope.isFormValid = false;
        $scope.User = {
            Username: '',
            Password: '',
            FullName: '',
            EmailID: '',
            Gender: ''
        };
        //kontrollera validering på <form name="f1">
        $scope.$watch('f1.$valid', function (newValue) {
            $scope.isFormValid = newValue;
        });
        //lagra data
        $scope.SaveData = function (data) {
            if ($scope.submitText == 'Save') {
                $scope.submitted = true;
                $scope.message = '';
                if ($scope.isFormValid) {
                    $scope.submitText = 'Please Wait...';
                    $scope.User = data;
                    RegistrationService.SaveFormData($scope.User).then(function (d) {
                        alert(d);
                        if (d == 'Success') {
                            //här är det nödvändigt att återställa formuläret
                            ClearForm();
                        }
                        $scope.submitText = "Save";
                    });
                }
                else {
                    $scope.message = 'Please fill required fields value';
                }
            }
        }
        //återställ formuläret
        function ClearForm() {
            $scope.User = {};
            $scope.f1.$setPristine(); //f1 är namnet på vårt <form name="f1">
            $scope.submitted = false;
        }
    })
    .factory('RegistrationService', function ($http, $q) { 
        //här är $q en AngularJS-service som hjälper oss att köra en asynkron funktion, när processen är klar returneras resultatet
        var fac = {};
        fac.SaveFormData = function (data) {
            var defer = $q.defer();
            $http({
                url: '/Data/Register',
                method: 'POST',
                data: JSON.stringify(data),
                headers: { 'content-type': 'application/json' }
            }).success(function (d) {
                // Success callback
                defer.resolve(d);
            }).error(function (e) {
                //Failed Callback
                alert('Error!');
                defer.reject(e);
            });
            return defer.promise;
        }
        return fac;
    });

    $q En Service som hjälper till att köra funktioner asynkront och använda deras returvärden (eller Exceptions).

  6. Lägg till en backend-Controller som returnerar View >

    Lägg till följande kod i HomeController.cs

    public ActionResult Part6() // Implementation av ett formulär för registrering
    {
        return View();
    }
  7. Skapa och lägg till View för Action och Design

    Högerklicka på Action-metoden i föregående steg > Add View… > Enter View Name > Add.

    @{
        ViewBag.Title = "Part6";
    }
    <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>Simple Registration Form</h2>
    
    {{message}}
    <table> <tr> <td>Full Name : </td> <td> <input type="text" ng-model="User.FullName" name="uFullName" ng-class="submitted?'ng-dirty':''" required autofocus /> <span class="error" ng-show="(f1.uFullName.$dirty || submitted) && f1.uFullName.$error.required">Fullname required!</span> <!-- here (f1.uFullName.$dirty || submitted) means if submit button clicked or it is dirty --> </td> </tr> <tr> <td>Email ID : </td> <td> <input type="email" ng-model="User.EmailID" name="uEmailID" ng-class="submitted?'ng-dirty':''" /> <!-- Not required--> <span class="error" ng-show="(f1.uEmailID.$dirty || submitted) && f1.uEmailID.$error.email">Email ID not valid!</span> @* here f1.uEmailID.$error.email will check is provided email id valid or not *@ </td> </tr> <tr> <td>Username : </td> <td> <input type="text" ng-model="User.Username" name="uUsername" ng-class="submitted?'ng-dirty':''" required /> <span class="error" ng-show="(f1.uUsername.$dirty || submitted) && f1.uUsername.$error.required">Username required!</span> </td> </tr> <tr> <td>Password : </td> <td> <input type="password" ng-model="User.Password" name="uPassword" ng-class="submitted?'ng-dirty':''" required /> <span class="error" ng-show="(f1.uPassword.$dirty || submitted) && f1.uPassword.$error.required">Password required!</span> </td> </tr> <tr> <td> Gender : </td> <td> <input type="radio" ng-model="User.Gender" name="uGender" value="Male" required /> Male <input type="radio" ng-model="User.Gender" name="uGender" value="Female" required /> Female <span class="error" ng-show="(f1.uGender.$dirty || submitted) && f1.uGender.$error.required">Gender required!</span> </td> </tr> <tr> <td></td> <td> <input type="submit" value="{{submitText}}" /> </td> </tr> </table> </form> </div> @section Scripts{ http://~/Scripts/AngularController/Part6Controller.js }
  8. Kör projektet

Annonser