ASP.NET MVC: Create a Registration Form Flat Responsive
By FoxLearn 5/29/2017 9:33:48 PM 8.57K
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
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 Responsive Templates Free Download
- How to upload file in ASP.NET MVC
- How to Create Contact Form Flat Responsive in ASP.NET MVC
- How to check if HttpPostedFileBase is an image
- How to upload Multiple File in ASP.NET MVC
- ASP.NET MVC: Implement Password Reset with ASP NET Identity
- ASP.NET MVC: Getting Started
- ASP.NET MVC: Create Custom Routes
Categories
Popular Posts
Material Lite Admin Template
11/14/2024
Freedash bootstrap lite
11/13/2024
RuangAdmin Template
11/17/2024
Responsive Animated Login Form
11/11/2024