bootstrap modal mit asp.net mvc html Helfer

Question

Ich versuche Bootstrap ui modal in asp.net mvc zu implementieren. Ich habe ein Grundmodal erstellt, das ein Login-Formular enthält. Problem Ich bin hier konfrontiert ist, wenn ich mit HTML-Helpers, Stile der modalen Form wird wirklich schlecht geht. Ich habe unten Screenshots angehängt. Ein Screenshot mit, wenn ich keine HTML-Helfer verwende und das ist, wenn UI sauberer zu sehen ist, wenn ich HTML-Helfer hinzufüge, geht der Stil weg.

Ich habe so ziemlich alles versucht, was ich kann. Ich kann das Problem nicht erkennen. kann jemand bitte einen Blick darauf werfen und ein Licht auf das werfen, wo ich falsch liege.

 <div> 
      @using(Html.BeginForm()){ 
       <div class="modal-header modal-hd-bg"> 
        <button type="button" class="close" ng-click="cancel()">×</button> 
        <h3 class="modal-title">Login</h3> 
       </div>   

       <div class="modal-body"> 
        <form novalidate class="form-horizontal" role="form"> 
         <div class="form-group"> 
          @*<label class="control-label col-sm-3" for="email">Email:</label>*@ 
          @Html.Label("Email:", new { @class="control-label col-sm-3"}) 
          <div class="col-sm-9"> 
           @* <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="luser.email">*@ 
           @Html.TextBoxFor(m => m.email, new { @class="form-control", @placeholder="Enter Email", @id="email" }) 
          </div> 
         </div> 
         <div class="form-group"> 
          @*<label class="control-label col-sm-3" for="pwd">Password:</label>*@ 
          @Html.Label("Password:", new { @class="control-label col-sm-3"}) 
          <div class="col-sm-9">   
           @*<input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="luser.pwd">*@ 
           @Html.TextBoxFor(m => m.pwd, new { @class="form-control", @placeholder="Enter password", @id="pwd" }) 
          </div> 
         </div> 
         <div class="form-group">   
          <div class="col-sm-offset-3 col-sm-9"> 
           <button type="submit" class="btn btn-primary" ng-click="login()">Login</button> 
          </div> 
         </div> 
        </form> 
       </div>   

       <div class="modal-footer modal-ft-bg"> 
        <label><u>Don't have an account</u>?</label> 
        <button class="btn btn-success" ng-click="goToRegister()">Register</button> 
       </div> 


      } 
    </div> 

This is when I use @using(Html.BeginForm()) and html helpers

This is when I don't use HTML helpers)

Answer 1

Keine Notwendigkeit für eine Form außerhalb einer anderen Form, weil die äußere Form jede Eingabe nicht braucht. Nichts ist falsch mit den HTML-Helfern.

HTML:

<div id="thisModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header modal-hd-bg"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h3 class="modal-title" id="gridSystemModalLabel">Login</h3> 
      </div> 

      <div class="modal-body"> 
       <form novalidate class="form-horizontal" role="form"> 
        <div class="form-group"> 
         @Html.Label("Email:", new { @class="control-label col-sm-3"}) 
         <div class="col-sm-9"> 
          @Html.TextBoxFor(m => m.email, new { @class="form-control", placeholder="Enter Email", id="email" } 
         </div> 
        </div> 
        <div class="form-group"> 
         @Html.Label("Password:", new { @class="control-label col-sm-3"}) 
         <div class="col-sm-9"> 
          @Html.PasswordFor(m => m.pwd, new { @class="form-control", placeholder="Enter password", id="pwd" }) 
         </div> 
        </div> 
        <div class="form-group">   
         <div class="col-sm-offset-3 col-sm-9"> 
          <button type="submit" class="btn btn-primary">Login</button> 
         </div> 
        </div> 
       </form> 
      </div> 

      <div class="modal-footer modal-ft-bg"> 
       <label><u>Don't have an account</u>?</label> 
       <button class="btn btn-success">Register</button> 
      </div> 
     </div> 
    </div> 
</div>