MVC Bootstrap表单样式问题

Question

我在使用Bootstrap MVC表单时遇到了一些小问题。当我添加我的Razor代码时，form-group的边距似乎无法正常工作。希望能得到帮助。

这是未能正确应用样式的表单。

 @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>
}

但是一旦我移除了Begin form标签，它就会采用正确的样式。

<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>

- InitLipton

---

你重复打开了表单标签。在浏览器的检查元素中查看，你会看到它。 - eyettea

考虑使用TwitterBootstrapMVC，它可能会让你的生活更轻松。 - Dmitry Efimenko

Answer 1

您正在创建嵌套表单（一个表单内的另一个表单），这是无效且不受支持的。请更改。

@using (Html.BeginForm("Contact", "Home"))

to

@using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { @class="form-horizontal", role="form" }))

并删除第二个表单元素（及其闭合标签）

<form class="form-horizontal" role="form">

顺便提一下，<label for="formGroupInputLarge1" ...> 没有正确创建 label 元素，因为 for 属性与表单中的任何元素都没有关系。相反，请使用 @Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" }) 将标签与文本框相关联。

- user3559349

Answer 2

移除第二个表单并使用：

@using (Html.BeginForm("ActionName", "ControllerName", 
            null, 
            FormMethod.Post, new { @class="form-horizontal" }))
{

- JOBG

Answer 3

<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>

- avdesh goswami

---

请详细说明您所做的更改以及原因，并请适当格式化。 - Panther