ASP.NET MVC: Create a Registration Form Flat Responsive

By Tan Lee Published on May 29, 2017 9.14K

How to Create an Event Register Form Flat Responsive in ASP.NET Identity MVC 5 using C#, Entity Framework Code First

Step 1: Download Event Register Form Flat Responsive Widget Template

Event Register Form Flat Responsive Widget Template

Step 2: Open AccountViewModels class, then change RegisterViewModel as below

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
    [Display(Name = "User Name")]
    public string UserName { get; set; }
    [Display(Name = "Full Name")]
    public string FullName { get; set; }
    [Display(Name = "First Name")]
    public string FirstName { get; set; }
    [Display(Name = "Last Name")]
    public string LastName { 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; }
    public bool Gender { get; set; }
    [Display(Name = "Phone Number")]
    public string PhoneNumber { get; set; }
    public string RoleName { get; set; }
}

Step 3: Open AccountController, then create an EventRegister action as below

//
// GET: /Account/Register
[AllowAnonymous]
public ActionResult EventRegister()
{
    return View();
}

//
// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> EventRegister(RegisterViewModel model)
{
    if (ModelState.IsValid)
    {
        var user = new ApplicationUser { UserName = model.UserName, FullName = model.UserName, Email = model.Email, PhoneNumber = model.PhoneNumber };
        var result = await UserManager.CreateAsync(user, model.Password);
        if (result.Succeeded)
        {
            await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: 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 <a href=\"" + callbackUrl + "\">here</a>");

            return RedirectToAction("Index", "Home");
        }
        AddErrors(result);
    }
    // If we got this far, something failed, redisplay form
    return View(model);
}

Step 4: Right click on EventRegister action, then create an EventRegister view as below

@model MvcDemo.Models.RegisterViewModel
@{
    Layout = null;
}

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Event Register Form Flat Responsive Widget Template :: w3layouts</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Event Register Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script type="application/x-javascript">
         addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Meta tag Keywords -->
    <!-- css files -->
    <link rel="stylesheet" href="/eventregister/css/style.css" type="text/css" media="all" /> <!-- Style-CSS -->
    <link rel="stylesheet" href="/eventregister/css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->
    <!-- js -->
    <script type="text/javascript" src="/eventregister/js/jquery-2.1.4.min.js"></script>
    <!-- //js -->
</head>
<body>
    <script src="/eventregister/js/jquery.vide.min.js"></script>
    <!-- main -->
    <div data-vide-bg="video/Ipad">
        <div class="center-container">
            <div class="w3ls-header">
                <div class="header-main">
                    <h1>Event register Form</h1>
                    <div class="header-bottom">
                        <div class="header-right w3agile">
                            <div class="header-left-bottom agileinfo">
                                @using (Html.BeginForm("EventRegister", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                                {
                                    @Html.AntiForgeryToken()
                                    <div class="icon1">
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                        @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder = "Enter your user name" })
                                    </div>
                                    <div class="icon1">
                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Enter your email" })
                                    </div>
                                    <div class="icon1">
                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                        @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control", @placeholder = "Phone number" })
                                    </div>
                                    <div class="icon1">
                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder = "Create password" })
                                    </div>
                                    <div class="icon1">
                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                        @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control", @placeholder = "Confirm password" })
                                    </div>
                                    <div class="bottom">
                                        <input type="submit" value="Register" />
                                    </div>
                                }            
                                <div class="header-left-top">
                                    <div class="sign-up"> <h2>or</h2> </div>
                                </div>
                                <div class="header-social wthree">
                                    <ul>
                                        <li><a href="#" class="f"><i class="fa fa-facebook" aria-hidden="true"></i>Facebook</a></li>
                                        <li><a href="#" class="t"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</a></li>
                                        <li><a href="#" class="g"><i class="fa fa-google-plus" aria-hidden="true"></i>Google+</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--header end here-->
            <!-- copyright start here -->
            <div class="copyright">
                <p>© 2017 Event Register Form. All rights reserved | Design by  <a href="http://w3layouts.com/" target="_blank">  W3layouts </a></p>
            </div>
            <!--copyright end here-->
        </div>
    </div>
</body>
</html>

VIDEO TUTORIALS