Question

我有一个状态表单，我需要在打开网站时隐藏此状态表单，但它无效。我只是想显示状态div，如果在登录，错误的密码或这样的事情上有一些错误......

我怎么能做到这一点？

这是我的登录控制器

    [HttpPost]
    [AllowAnonymous]
    public ActionResult Login(Login model, string returnUrl = "")
    {
        if(ModelState.IsValid)
        {
            if (Membership.ValidateUser(model.UserName, model.Password))
            {                 
                FormsAuthentication.RedirectFromLoginPage(model.UserName, model.RememberMe);
            }
            ModelState.AddModelError("", "Usuario ou senha incorretos");
        }
        return View(model);
    }

这是我的cshtml代码：

@model HelloWorld.Models.Login
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>My site</title>
    <link href="@Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/alerts.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/pure-skin-mine.css")" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            $('#status').hide();
        });
    </script>
</head>
<body class="pure-skin-mine">
    <center>
        <div style="margin: 15px auto 0px 434px; width: 500px;">
            <img src="@Url.Content("~/Imagens/logo.png")">

            @using (Html.BeginForm(null, null, new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "pure-form" }))
            {                
                <div style="margin-top:15px" id="status" class="alert-message"></div>

                <fieldset class="pure-group">
                    <div class="pure-control-group">
                        @Html.TextBoxFor(m => m.UserName, new { @class = "pure-input-1-2", @placeholder = "Usuario / CNPJ" })
                    </div>

                    <div class="pure-control-group">
                        @Html.PasswordFor(m => m.Password, new { @type = "password", @class = "pure-input-1-2", @placeholder = "Senha" })
                    </div>
                </fieldset>
                <input type="submit" id="btmEntrar" value="Entrar" class="pure-button pure-input-1-2 pure-button-primary" />
            }
        </div>
    </center>
</body>
</html>

Answer 1

您不必隐藏或显示验证消息，而是使用验证摘要。

替换

<div style="margin-top:15px" id="status" class="alert-message"></div>

与

@Html.ValidationSummary(true)

当您在错误时添加错误ModelState.AddModelError("", "Usuario ou senha incorretos");时，您会在登录失败时看到上述消息。

然后你不必写隐藏/显示代码。删除此代码

<script type="text/javascript">
    $(document).ready(function () {
        $('#status').hide();
    });
</script>

验证摘要将处理隐藏/显示。

使用验证摘要的另一个好处是，如果您想在表单中添加另一个验证，那么使用您的方法，您需要在页面上添加许多div，就像您已添加状态一样。并且必须编写逻辑来隐藏/显示它们（处理它将是繁琐的）。在验证摘要的情况下，您只需要AddModel验证消息。

Answer 2

这可能就是您所需要的：

var el = $('#status');
if (!$('#status').text()) {
    el.hide();
}

不确定为什么不使用@Html.ValidationSummary()。

Answer 3

您可能希望在模型上创建属性，如果您的方法中出现错误，请将此“errorpropert”设置为true并在视图中：

@if(model.isError){
<div>

</div>
}

修改

在您登录时，请执行以下操作：

  public bool isError{get;set;}

在您的控制器中：

 [HttpPost]
    [AllowAnonymous]
    public ActionResult Login(Login model, string returnUrl = "")
    {
        if(ModelState.IsValid)
        {
            if (Membership.ValidateUser(model.UserName, model.Password))
            {                 
                FormsAuthentication.RedirectFromLoginPage(model.UserName, model.RememberMe);
            }
            ModelState.AddModelError("", "Usuario ou senha incorretos");
        }

    else{
          model.isError = true;
       }
        return View(model);
    }

编辑版本2：在@DaniCE评论后，我意识到你可以用更好的方式做到这一点。

忘记isError属性，在视图中添加：

 @if(!ModelState.IsValid){
    <div>

    </div>
    }

有很多方法可以解决这个问题，并且总会有一些方法比其他方法更好：）

在MVC4中隐藏或显示DIV

3 个答案: