View Models : Asp.net 5

View Models:

Lets look at your registration form "views, "account", "register": Register.csHtml in our Asp.net templete project.

If we look at the model directive, at the top of this file, we notice that it doesn't refer to something like "account", or "member", but "register view model". The register view model is the model that we use exclusively to deal with the registration form, and not one that will ever be persisted to the database.

@model AutomatedTellerMachine.Models.RegisterViewModel

The register view model contains an "email", "password", and "confirm password" property. The "confirm password" is an example of a property that would never be saved in a database, making more appropriate for a view model, instead of a basic model.


 public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }

The login view model is made up of an "email" "password", and "remember me" property, to enable cookie-based logins

 public class LoginViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [Display(Name = "Remember me?")]
        public bool RememberMe { get; set; }
    }


To see how the view model helps create that record, we have to look in the account controller inside the register method, and we want to look at the one that actually processes the form.

 // POST: /Account/Register
        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task Register(RegisterViewModel model)
        {
            if (ModelState.IsValid)
            {
                var user = new ApplicationUser() { UserName = model.Email, Email = model.Email };
                IdentityResult result = await UserManager.CreateAsync(user, model.Password);
                if (result.Succeeded)
                {
                    await SignInAsync(user, isPersistent: false);

                    // For more information on how to enable account confirmation and password reset please visit http://go.microsoft.com/fwlink/?LinkID=320771
                    // Send an email with this link
                    // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                    // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                    // await UserManager.SendEmailAsync(user.Id, "Confirm your account", "Please confirm your account by clicking here");

                    return RedirectToAction("Index", "Home");
                }
                else
                {
                    AddErrors(result);
                }
            }

            // If we got this far, something failed, redisplay form
            return View(model);
        }

We can see that the user record that will be created is based not on the register view model instance, but on an instance of another class called "application user", which has the email from the view model assigned to its username property. Then that, along with the password from the view model, which will have to be hashed before being stored, is passed to the "UserManager's Create A Sync" method. Also notice the fact that, the only parameter to this method is an instance of register view model.

 Also notice the fact that, the only parameter to this method is an instance of register view model(
public async Task Register(RegisterViewModel model){}
). The same view model that's used to create the form is used as a parameter to this method and encapsulates all of the post-parameters from that form.


To Add more attributes like FirstName, LastName in the RegisterViewModel, you can add property in RegisterViewModel class

public class RegisterViewModel
    {

        [Required]
        [Display(Name = "First Name :")]
        public string FirstName { get; set; }

        [Required]
        [Display(Name = "Last Name :")]
        public string LastName { get; set; }

        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }

And you can add two properties like this, Register.chHtml,

  @Html.ValidationSummary("", new { @class = "text-danger" })

   

        @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })

       

            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })

       

   

   

        @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })

       

            @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })

       

   

   

        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })

       

            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

       

   

   

        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })

       

            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })

       

   

   

        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })

       

            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })

       

   

Note: We have used here, @Html.ValidationSummary("", new { @class = "text-danger" }) for validation summary.