Question

我正在创建一个登录表单，但是我遇到了CSS无法处理密码输入控件和提交按钮的问题。我使用的是Bootstrap 3.0，我的代码如下。所有其他表单控件都显示正确的样式。

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label" })
            @Html.PasswordFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", placeholder = "Password" } })
            @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })               
        </div>

        <div class="form-group">
            <input type="submit" value="Login" class="btn btn-primary" />
        </div>
    </div>
}

这是一张如何显示的图片：

Login Form

密码输入应与用户名输入相同，并且按钮的宽度应与其上方的输入相同。

Answer 1

您正在使用帮助程序方法过载错误。使用您当前的代码，razor将像这样呈现标记

<input htmlattributes="{ class = form-control, placeholder = Password }"
                                          id="Password" name="Password" type="password">

这显然不正确！

重载的第二个参数需要一个包含html属性的对象。但是你传入的是一个在htmlAttributes属性中有另一个对象的对象。

解决方案是使用传递正确的对象。这应该工作

@Html.PasswordFor(model => model.Password,
                             new { @class = "form-control", placeholder = "Password"  })

ASP.NET中密码输入的CSS样式不显示

1 个答案: