ASP.NET MVC: Create a Registration Form Flat Responsive

By Tan Lee Published on May 29, 2017 9.06K

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

ASP.NET MVC: Create a Registration Form Flat Responsive

By Tan Lee Published on May 29, 2017 9.06K

Related

Categories

Popular Posts

Entity Framework Code First vs Database First vs Model First Approach

RuangAdmin Template

11 Things You Didn't Know About Cloudflare

AdminKit Bootstrap 5 HTML5 UI Kits Template

Modular Admin Template