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.

enter image description here

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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -