ASP.NET MVC: Create a Registration Form Flat Responsive
By FoxLearn 5/29/2017 9:33:48 PM 9K
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
Portal HTML Bootstrap
11/14/2024
Carpatin Admin Dashboard Template
11/17/2024
Admin BSB Free Bootstrap Admin Dashboard
11/14/2024