Reputation: 2453
I'm having a small issue with my bootstrap mvc form. the margin for the form-group doesn't seem to be working when i add my Razor. Any help would be greatly appreciated.
This is the form that doesn't take the styling properly
@using (Html.BeginForm("Contact", "Home"))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="formGroupInputLarge1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Fullname", tabindex = 1 })
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge2" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email Address", tabindex = 2 })
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge3" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
@Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = "Message", tabindex = 3 })
@Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">Send Mail</button>
</div>
</div>
</form>
}
But once i remove the Begin form it takes the correct styling
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="formGroupInputLarge1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Fullname", tabindex = 1 })
@Html.ValidationMessageFor(m => m.Name)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge2" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email Address", tabindex = 2 })
@Html.ValidationMessageFor(m => m.Email)
</div>
</div>
<div class="form-group">
<label for="formGroupInputLarge3" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
@Html.TextAreaFor(m => m.Message, new { @class = "form-control", placeholder = "Message", tabindex = 3 })
@Html.ValidationMessageFor(m => m.Message)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">Send Mail</button>
</div>
</div>
</form>
Upvotes: 4
Views: 24298
Reputation: 11
<div class="col-md-8">
<section id="loginForm">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Use a local account to log in.</h4>
<hr />
@Html.ValidationSummary(true, null, new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password, null, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
<p>
@Html.ActionLink("Register as a new user", "Register")
</p>
@* Enable this once you have account confirmation enabled for password reset functionality
<p>
@Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*@
}
</section>
</div>
Upvotes: 1
Reputation:
Your creating nested forms (a form within a form) which is invalid and not supported. Change
@using (Html.BeginForm("Contact", "Home"))
to
@using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class="form-horizontal", role="form" }))
and remove the second form element (and its closing tag)
<form class="form-horizontal" role="form">
As a side note, <label for="formGroupInputLarge1" ...>
is not creating a correct label
element since the for
attribute has no relationship to any elements in your form. Instead use @Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" })
which will associate the label with the textbox.
Upvotes: 9
Reputation: 4624
Remove second the form and use:
@using (Html.BeginForm("ActionName", "ControllerName",
null,
FormMethod.Post, new { @class="form-horizontal" }))
{
Upvotes: 1