bootstrap 模态与 asp.net mvc html 助手

Question

我正在尝试在 asp.net mvc 中实现 bootstrap ui 模式。我创建了一个包含登录表单的基本模式。我在这里面临的问题是，当我开始使用 html 助手时，模态形式的样式变得非常糟糕。我在下面附上了截图。一张我不使用 HTML 助手时的屏幕截图，那时候 UI 更清晰可见，当我添加 html 助手时，风格正在偏离方向。

我几乎已经尽我所能。我无法发现问题。有人可以看看它并指出我哪里出错了。

        <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

不需要在另一个表单之外的表单，因为外部表单不接受任何输入。 html 助手没问题。

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>

bootstrap 模态与 asp.net mvc html 助手

bootstrap modal with asp.net mvc html helpers

asp.net-mvc

twitter-bootstrap

angular-ui-bootstrap

bootstrap-modal