public class RegisterModel
{
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Name", Prompt = "NamePrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.TextBox)]
public string Name { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Email", Prompt = "EmailPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.Email)]
public string Email { get; set; }
[Display(Name = "PersonalWebsite", Prompt = "SitePrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.Url)]
public string Website { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Password", ResourceType = typeof(Resource))]
[BsControl(BsControlType.Password)]
public string Password { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "RetypePassword", ResourceType = typeof(Resource))]
[Compare("Password")]
[BsControl(BsControlType.Password)]
public string PasswordRetyped { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Birthday", ResourceType = typeof(Resource))]
[BsControl(BsControlType.DatePicker)]
public BsDateTime Birthday { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "AnnualIncome", ResourceType = typeof(Resource))]
[BsControl(BsControlType.Number)]
public decimal? AnnualIncome { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Location", Prompt = "PromptLocation", ResourceType = typeof(Resource))]
[BsControl(BsControlType.DropDownList)]
public BsSelectList<string> CountriesList { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "EmailNotifications", Description = "EmailNotificationsPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.RadioButtonList)]
public BsSelectList<NotificationType?> NotificationList { get; set; }
[Display(Name = "ReceiveEmailsAtSpecifiedTime", ResourceType = typeof(Resource))]
[BsControl(BsControlType.TimePicker)]
public BsDateTime NotificationTime { get; set; }
[Display(Name = "AspTechnologiesQuestion", ResourceType = typeof(Resource))]
[BsControl(BsControlType.CheckBoxList)]
public BsSelectList<List<int>> TechnologiesCheckboxList { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Technologies", Prompt = "TechnologiesPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.ListBox)]
public BsSelectList<List<int>> TechnologiesList { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "ProgrammingLanguages", Prompt = "ProgrammingLanguagesPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.TagList)]
public BsSelectList<List<string>> LanguagesList { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "ProgrammingIDE", Prompt = "ProgrammingIDEPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.Autocomplete)]
public BsSelectList<string> IdeList { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Gender", Prompt = "GenderPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.DropDownList)]
public int? Gender { get; set; }
public List<System.Web.Mvc.SelectListItem> GenderList { get; set; }
[BsMandatory(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "ConsentAgreement", ResourceType = typeof(Resource))]
[BsControl(BsControlType.CheckBox)]
public bool ConsentAgreement { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Interval", Prompt = "IntervalPrompt", ResourceType = typeof(Resource))]
[BsControl(BsControlType.DateTimePickerRange, IsReadonly = true)]
public BsRange<DateTime?> Interval { get; set; }
[Required(ErrorMessageResourceName = "RequiredField", ErrorMessageResourceType = typeof(Resource))]
[Display(Name = "Avatar", Prompt = "Choose avatar")]
[BsControl(BsControlType.Upload)]
public HttpPostedFileBase Avatar { get; set; }
}
@using (Html.BsBeginForm("Register", "Login", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "bs-form js-registerForm" }, Html.GetTheme()))
{
<div class="col-lg-12 bs-validation_summary">
@Html.BsValidationSummary()
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Name)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.User)
@Html.BsInputFor(m => m.Name)
@Html.BsValidationFor(m => m.Name)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Email)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Envelope)
@Html.BsInputFor(m => m.Email)
@Html.BsValidationFor(m => m.Email)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Website)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Link)
@Html.BsInputFor(m => m.Website)
@Html.BsValidationFor(m => m.Website)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Password)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Lock)
@Html.BsInputFor(m => m.Password)
@Html.BsValidationFor(m => m.Password)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.PasswordRetyped)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Lock)
@Html.BsInputFor(m => m.PasswordRetyped)
@Html.BsValidationFor(m => m.PasswordRetyped)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Interval)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Calendar)
@Html.BsRangeFor(m => m.Interval, new { }, new { usePresetRanges = true})
@Html.BsValidationFor(m => m.Interval)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Birthday)
<div class="input-group">
@Html.BsInputFor(m => m.Birthday)
@Html.BsValidationFor(m => m.Birthday)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.NotificationList)
<div class="input-group">
@Html.BsSelectFor(m => m.NotificationList)
@Html.BsValidationFor(m => m.NotificationList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.NotificationTime)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Time)
@Html.BsInputFor(m => m.NotificationTime)
@Html.BsValidationFor(m => m.NotificationTime)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.CountriesList)
<div class="input-group">
@Html.BsSelectFor(m => m.CountriesList)
@Html.BsValidationFor(m => m.CountriesList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.TechnologiesCheckboxList)
<div class="input-group">
@Html.BsSelectFor(m => m.TechnologiesCheckboxList)
@Html.BsValidationFor(m => m.TechnologiesCheckboxList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.TechnologiesList)
<div class="input-group">
@Html.BsSelectFor(m => m.TechnologiesList)
@Html.BsValidationFor(m => m.TechnologiesList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.LanguagesList)
<div class="input-group">
@Html.BsSelectFor(m => m.LanguagesList)
@Html.BsValidationFor(m => m.LanguagesList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.IdeList)
<div class="input-group">
@Html.BsSelectFor(m => m.IdeList)
@Html.BsValidationFor(m => m.IdeList)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Gender)
<div class="input-group">
@Html.BsDropDownListFor(m => m.Gender, Model.GenderList)
@Html.BsValidationFor(m => m.Gender)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.AnnualIncome)
<div class="input-group">
@Html.BsGlyphiconAddon(Glyphicon.Euro)
@Html.BsInputFor(m => m.AnnualIncome)
@Html.BsValidationFor(m => m.AnnualIncome)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.JavascriptMvcFramework)
<div class="input-group">
@Html.BsSelectFor(m => m.JavascriptMvcFramework)
@Html.BsValidationFor(m => m.JavascriptMvcFramework)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.WebBrowsers)
<div class="input-group">
@Html.BsSelectFor(m => m.WebBrowsers)
@Html.BsValidationFor(m => m.WebBrowsers)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group">
@Html.BsLabelFor(m => m.Avatar)
<div class="input-group">
@Html.BsInputFor(m => m.Avatar)
@Html.BsValidationFor(m => m.Avatar)
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 form-group checkbox">
@Html.BsInputFor(m => m.ConsentAgreement)
@Html.BsValidationFor(m => m.ConsentAgreement)
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<hr />
<button class="btn btn-theme js-registerBtn" type="submit">Register</button>
<a class="btn btn-primary pull-right" href="@Url.Action("Index", new { mode="login"})">Login</a>
</div>
<div class="clearfix"></div>
}
public class LoginController : BaseController
{
[HttpGet]
public ActionResult Index(string mode)
{
var model = new AuthenticationModel()
{
LoginModel = new LoginModel(),
RegisterModel = InitRegisterModel()
};
RequireJsOptions.Add("registerUrl", Url.Action("Register"));
return View(model);
}
public BsJsonResult Register(AuthenticationModel model)
{
//add validation error to BsRange field
if (model.RegisterModel != null &&
model.RegisterModel.Interval != null &&
model.RegisterModel.Interval.To.HasValue &&
model.RegisterModel.Interval.From.HasValue &&
model.RegisterModel.Interval.From.Value > model.RegisterModel.Interval.To.Value)
{
ModelState.AddFieldError("RegisterModel.Interval",
model.RegisterModel.Interval.GetType(),
"Invalid interval");
}
//add validation error to BsSelectList field
ModelState.AddFieldError("RegisterModel.CountriesList",
model.RegisterModel.CountriesList.GetType(),
"Selected location doesn't match your GPS location");
//add global validation error
ModelState.AddFormError("RegisterModel",
"This email address is in use.");
if (ModelState.IsValid)
{
//save new user to db
}
else
{
//JSON serialize ModelState errors
return new BsJsonResult(
new Dictionary<string, object> { { "Errors", ModelState.GetErrors() } },
BsResponseStatus.ValidationError);
}
return new BsJsonResult();
}
}
require([
'jquery',
'bootstrap',
'bforms-validate-unobtrusive',
'bforms-initUI',
'bforms-ajax',
'bforms-resetInput',
'bforms-extensions',
'main-script'
], function () {
var LoginIndex = function (options) {
this.options = $.extend(true, {}, options);
};
LoginIndex.prototype.init = function () {
this.$loginForm = $('.js-loginForm');
this.$registerForm = $('.js-registerForm');
this.$loginForm.bsInitUI(this.options.styleInputs);
this.$registerForm.bsInitUI(this.options.styleInputs);
this.addHandlers();
};
LoginIndex.prototype.addHandlers = function () {
this.$registerForm.on('click', '.js-registerBtn', $.proxy(this.onRegisterSubmit, this));
};
LoginIndex.prototype.onRegisterSubmit = function (e) {
e.stopPropagation();
e.preventDefault();
var $target = $(e.currentTarget);
$.validator.unobtrusive.parse(this.$registerForm);
var validatedForm = this.$registerForm.validate();
if (this.$registerForm.valid()) {
var registerData = this.$registerForm.parseForm();
$target.prop('disabled', "disabled");
$.bforms.ajax({
url: this.options.registerUrl,
data: registerData,
}).then($.proxy(function (response, status, jqXHR) {
if (response.Status == 2) {//validation error
validatedForm.showErrors(response.Data.Errors, true);
} else {
}
$target.removeProp('disabled');
}, this), function () {
$target.removeProp('disabled');
});
}
};
$(document).ready(function () {
var ctrl = new LoginIndex(requireConfig.pageOptions);
ctrl.init();
});
});
