CODEWITHSUNDEEP
jqueryhtmlcssasp.net-mvcasp.net-mvc-4
Alexandre
Alexandre

Reputation: 2025

Hide or show a DIV in MVC4

I have a status form and I need to hide this status form when I open the site, but it's not working. I just want to show the status div if have some error in login, wrong password or somthing like this...

How I can make this ?

This is my login controller

    [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);
    }

this is my cshtml code:

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

Upvotes: 0

Views: 984

Answers (2)

ThunD3eR
ThunD3eR

Reputation: 3436

You might want to create a property on you model, if an error occurs in your method set this "errorpropert" to true and in the view:

@if(model.isError){
<div>

</div>
}

EDIT

In you login Model do this:

  public bool isError{get;set;}

In your controller:

 [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);
    }

EDIT version 2: after @DaniCE comment i realized you can do this in an even better way.

Forgett the isError property, in the view just add this:

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

    </div>
    }

There are numerous ways to solve this and there will always be some that are better than others:)

Upvotes: 0

Dnyanesh
Dnyanesh

Reputation: 2343

You do not have to hide or show validation message instead use validation summary.

Replace 

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

with

@Html.ValidationSummary(true)

As you are adding error ModelState.AddModelError("", "Usuario ou senha incorretos"); on error you will see the mentioned message on failure of log-in.

Then you do not have to write hide/show code. Remove this code

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

Validation summary will handle hide/show.

Another advantage of using validation summary is that if you want to put another validation in your form then with your approach you need to add that many number of divs on page like you have added for status. And will have to write logic to hide/show them (it will be tedious to handle that). In case of validation summary you just have to AddModel validation message.

Upvotes: 1

Related Questions