I am trying to use Captcha inside my project but get a parser error with the following code...struggling to eliminate it
#{MvcCaptcha registrationCaptcha = CaptchaHelper.GetRegistrationCaptcha(); }
#if (!registrationCaptcha.IsSolved)
{
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
#Html.Captcha(registrationCaptcha)
</div>
#Html.Label("Retype the code", new { #class = "col-md-4 control-label", #for = "CaptchaCode" })
<div class="col-md-8">
#Html.TextBox("CaptchaCode", null, new { #class = "form-control captchaVal" })
</div>
</div>
}
What would the cause be of the parser error?
managed to rectify it
MvcCaptcha registrationCaptcha = CaptchaHelper.GetRegistrationCaptcha();
if (!registrationCaptcha.IsSolved)
{
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
#Html.Captcha(registrationCaptcha)
</div>
#Html.Label("Retype the code",
new { #class = "col-md-4 control-label", #for = "CaptchaCode" })
<div class="col-md-8">
#Html.TextBox("CaptchaCode", null,
new { #class = "form-control captchaVal" })
</div>
</div>
}
Related
I added HTML input type file After I run the project and click to the input file for choosing my file. When I choose file and click OK after Stopped my project.
What is the problem?
#using (Html.BeginForm("Update", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="col-sm-3">
<div class="profile_img">
<div id="crop-avatar">
<img class="img-responsive avatar-view" width="250" height="150" src="~/Styles/images/#Model.User.Image" alt="Avatar" title="Change the avatar">
</div>
</div>
<div class="form-group">
<input type="file" name="file" id="file1" />
</div>
</div>
<div class="col-sm-8 form-horizontal form-label-left">
<div class="form-group">
#Html.LabelFor(model => model.User.FirstName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.FirstName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.LastName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.LastName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.MiddleName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.MiddleName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.UserName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.UserName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Email, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.Email, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Phone, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.Phone, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.RoleId, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.DropDownListFor(model => model.User.RoleId, new SelectList(Model.Roles, "Id", "RoleName"), htmlAttributes: new { #class = "form-control col-md-7 col-xs-12", id = "roles" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Note, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextAreaFor(model => model.User.Note, new { #class = "form-control col-md-7 col-xs-12" , style = "min-height:100px !important" })
</div>
</div>
</div>
#Html.HiddenFor(m => m.User.Id)
#Html.HiddenFor(m => m.User.CreateDate)
#Html.HiddenFor(m => m.User.Status)
#Html.HiddenFor(m => m.User.Password)
<div class="col-sm-12 text-center" style="padding-bottom:3px">
<button class="btn btn-default">Yadda Saxla</button>
İmtina
</div>
}
UserController:
public ActionResult Update(int userId)
{
UserViewModel employeeViewModel = new UserViewModel
{
User = _userService.GetUser(userId),
Roles = _userService.GetRoles()
};
return View(employeeViewModel);
}
[HttpPost]
public ActionResult Update(UserViewModel userViewModel)
{
User user = new User();
user.Id = userViewModel.User.Id;
user.RoleId = userViewModel.User.RoleId;
user.UserName = userViewModel.User.UserName;
user.FirstName = userViewModel.User.FirstName;
user.LastName = userViewModel.User.LastName;
user.MiddleName = userViewModel.User.MiddleName;
user.Email = userViewModel.User.Email;
user.Phone = userViewModel.User.Phone;
user.Note = userViewModel.User.Note;
user.Status = userViewModel.User.Status;
if (userViewModel.User.Id == 0) user.CreateDate = DateTime.Now;
else user.CreateDate = userViewModel.User.CreateDate;
_userService.UpdateEmployee(user);
return RedirectToAction("Index");
}
Can do reference issue from Visual Studio?
Because when I remove
<input type="file" name="file" id="file1" />
This section project worked good.
I think the problem is in another place that is not in the code
I already added multipart/form-data for File upload..
Please help me to fix this error..
I have a login form code in an ASP MVC program.
I have two problems.
1)login form is not centered.
2)form-controls are not centered in the login form. I noticed when I put borders for form-group divs they are in the center and also I put border for They put in the middle too. but I do not know why textboxes do not display in the middle of form.
<div class="row">
<div class="col-md-4 col-md-offset-4 shadow" style="background-color:#0375b4;">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-12" style="margin-top:0.75cm">
<img class="profile-img" src="~/Content/Images/avatar1.png" />
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Email, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group ">
<div class="col-md-12 ">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control ", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Password, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.PasswordFor(m => m.Password, new { #class = "form-control", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new { style = "color:white;" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
}
<div style="height:20px">
</div>
Create following css class
div.centered {
margin: 0 auto;
width: 800px;
}
And set it to your container division.
I solve centralizing of form-controls by adding a class in bootstrap.css as follow:
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
then I use this class in login form view in
<section id="loginForm" class="center_div">
and form controls set in the middle of form
so i have this view with multiple same form like this
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Special Leave on Purposes Rules</h3>
</div>
<div class="panel-body">
#using (Html.BeginForm("Rule", "Admin", FormMethod.Post, new { #class = "form-horizontal", placeholder = ViewBag.maternity }))
{
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">Set Max For</label>
<div class="col-sm-8">
#Html.DropDownListFor(
model => model.ID, (SelectList)ViewBag.special,
"--Select One--",
new
{ //anonymous type
#class = "form-control input-sm",
id= "inputEmail3"
})
</div>
#Html.ValidationMessageFor(m => m.ID, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Set Max</label>
<div class="col-sm-8">
#Html.TextBoxFor(model => model.Max, new { #Class = "form-control" })
</div>
#Html.ValidationMessageFor(m => m.Max, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
}
</div>
</div>
</div>
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Maternity Leave Rules</h3>
</div>
<div class="panel-body">
#using (Html.BeginForm("Rule", "Admin", FormMethod.Post, new { #class = "form-horizontal" }))
{
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">Maximum Leave</label>
<div class="col-sm-8">
<div class="input-group">
#Html.TextBoxFor(model => model.Max, new { #Class = "form-control", placeholder = ViewBag.maternity })
<span class="input-group-addon">In Row</span>
#Html.HiddenFor(model => model.ID, new { Value = 2 })
</div>
</div>
#Html.ValidationMessageFor(m => m.Max, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<button type="submit" name="submit" value="Annual" class="btn btn-success">Save</button>
</div>
}
</div>
</div>
</div>
The problem here is that when the form submitted with wrong value, the modelstate validated and return error message for ALL of the form like in this picture.
I want that the error message is only shown for the form i submit, is that possible? Thanks for your help guys
I'd like to have a 2 column layout, but the problem is I can't place half my HTML codes inside else segment. Any Idea?
This is the editor template:
#{int i = 0;}
#foreach (var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName.StartsWith("Z") ||
property.IsReadOnly)
{
continue;
}
if (i++ % 2 == 0)
{
<div class="form-group form-inline col-xs-12">
<div class="col-xs-5">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-3" })
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
<div class="col-xs-5">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-3" })
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
</div>
}
else
{
}
}
The second <div class="col-xs-5"> and the closing tags should be in else.
You need start a containing <div> and then in the if block, close and start a new containing <div>
#{int i = 0;}
<div class="form-group form-inline col-xs-12">
#foreach (var property in ViewData.ModelMetadata.Properties) {
if (property.PropertyName.StartsWith("Z") || property.IsReadOnly) {
continue;
}
<div class="col-xs-6">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-3" })
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
if (++i % 2 == 0) {
#:</div><div class="form-group form-inline col-xs-12">
}
}
</div>
Not sure what exactly you want in the else, but to have but you should declare the parent div before you loop through the other objects. Also if its a two column, they should be col-xs-6 as explained on bootstrap.
#{int i = 0;}
<div class="form-group form-inline">
<div class="row">
#foreach (var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName.StartsWith("Z") ||
property.IsReadOnly)
{
continue;
}
if (i++ % 2 == 0)
<div class="col-xs-6">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-3" })
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
}
else
{
<div class="col-xs-6">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-3" })
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
}
}
</div>
</div>
I think they way you are trying to render your form is way too complicated for no reason, col-xs-** already floats left, you do not have to worry about "odd left - even right".
<div class="row form-horizontal">
#foreach (var property in ViewData.ModelMetadata.Properties)
{
if (property.PropertyName.StartsWith("Z") || property.IsReadOnly)
{
continue;
}
<div class="col-xs-6">
<div class="form-group">
#Html.Label(property.DisplayName, new { #for = property.PropertyName, #class = "control-label col-xs-12 col-sm-3" })
<div class="col-xs-12 col-sm-3">
#Html.TextBox(property.PropertyName, new { #class = "form-control" })
</div>
</div>
</div>
}
</div>
I have the following dynamically created textboxes in my view:
#for (int i = 0; i < Model.MullionList.Count; i++)
{
ItemDrops curMullItem = Model.MullionList.ElementAt(i);
<div class="form-group">
#Html.Label(curMullItem.ItemName.ToString(), new { #class = "col-sm-6 control-label" })
<div class="col-sm-6">
#Html.TextBoxFor(x => x.MullionList[i].ItemPossInfo, new { #class = "form-control" })
#Html.HiddenFor(x => x.MullionList[i].ItemName)
</div>
</div>
}
I noticed occaionally for certain types of product this was returning null when posted (for MullionList), even though i selected these dropdowns.
so it works for certain product but not others.
The even weirder part is when i remove this section further down the view it works (ie MulionList is not null when the form is posted)
<div class="form-group">
#Html.Label("Glass", new { #class = "col-sm-6 control-label", id = "glass-first-label" })
<div class="col-sm-6">
#Html.DropDownListFor(gu => gu.GlassItems[0].Value, Model.GlassTypes, "-- Select --", new { #class = "form-control glass-multi-select", id = "Glass" + 0 })
</div>
</div>
<div id="hidden-glass-select" style="display: none">
#for (int i = 1; i < Model.GlassUnitsCount; i++)
{
var glassUnit = Model.GlassUnits.ElementAt(i);
<div class="form-group">
#Html.Label(glassUnit.ToString(), new { #class = "col-sm-6 control-label" })
<div class="col-sm-6">
#Html.DropDownListFor(gu => gu.GlassItems[i].Value, Model.GlassTypes, "-- Select --", new { #class = "form-control glass-multi-select", id = "Glass" + i })
</div>
</div>
}
</div>
<div class="form-group">
#Html.LabelFor(go => go.GlazzingInfoVal, "Glazzing Option", new { #class = "col-sm-6 control-label" })
<div class="col-sm-6">
#Html.DropDownListFor(go => go.GlazzingInfoVal, Model.GlazzingOptions, "-- Select --", new { #class = "form-control" })
</div>
</div>
I think I have fixed this now.
I renamed all items (lists that started with Glass or Glazzing and it works!)
This looks like a proper MVC bug
Thanks to this answer:https://stackoverflow.com/a/16113919/66975
This has costed me several hours, GRRRR