asp.net mvc 4 - MVC Bootstrap forms styling issue -
i'm having small issue bootstrap mvc form. margin form-group doesn't seem working when add razor. appreciated.
this form doesn't take 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 remove begin form takes 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>
your creating nested forms (a form within form) invalid , not supported. change
@using (html.beginform("contact", "home"))
to
@using (html.beginform("contact", "home", formmethod.post, new { @class="form-horizontal", role="form" }))
and remove second form element (and closing tag)
<form class="form-horizontal" role="form">
as side note, <label for="formgroupinputlarge1" ...>
not creating correct label
element since for
attribute has no relationship elements in form. instead use @html.labelfor(m => m.name, new { @class = "col-sm-2 control-label" })
associate label textbox.
Comments
Post a Comment