I am doing a course, and i have everything just like the "teacher", but when I try to do the login form it doesn't work. I find already like 3 problems with my form.

1. Doesn't show the span when input boxes are empty.

2. When posting data, model seems to not receiving the data.

   Form with data

   After submiting

3. Doesn't show the alerts.

Here is the model:

public class UsuarioM
{
    public int Id { get; set; }
    [Required(ErrorMessage = "El usuario es obligatorio")]
    public string Usuario { get; set; }
    [Required(ErrorMessage = "La contraseña es obligatoria")]
    [StringLength(10, MinimumLength = 4, ErrorMessage = "La contraseña debe tener entre 4 a 10 caracteres")]
    public string Password { get; set; }
    public string Token { get; set; }
}

Controller:

    [HttpGet]
    public IActionResult Login()
    {
        UsuarioM usuario = new UsuarioM();
        return View(usuario);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Login(UsuarioM usuario)
    {
        if (ModelState.IsValid)
        {
            Magic...
        }
        else
        {
            return View();
        }
    }

Razor view:

@model PeliculasWeb.Models.UsuarioM
@{
    ViewData["Title"] = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1 >Acceso de usuarios</h1>

<div >
    <div >
        @if (TempData["alert"] != null)
        {
            <div  role="alert">
                <h5><strong>@TempData["alert"]</strong></h5>
                <button type="button"  data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        }
    </div>
</div>

<div >
    <div >
        <form asp-action="Login">
            <div asp-validation-summary="ModelOnly" ></div>
            <div >
                <label for="Usuario">Usuario:</label>
                <input type="text" asp-for="Usuario"  placeholder="Ingresa el usuario" />
                <span asp-validation-for="Usuario" ></span>
            </div>
            <div >
                <label for="contrasenia">Contraseña:</label>
                <input type="password" asp-for="Password"  placeholder="Ingresa la contraseña" />
                <span asp-validation-for="Password" ></span>
            </div>
            <button type="submit" >INGRESAR</button>
        </form>
    </div>
</div>

I tried doing again the view and the model, but nothing seems to change.

For now I think that the main problem is something about the model, but I don't have any idea what could it be, and in case you are asking, this same code works on the course :c, also I have other models and views and they work fine, I don't know what's happening here. And I already did the question in the course, but I'm not getting answers and I really need to finish it quickly.

Also in case there are like grammatical mistakes or things like that I apologize, I'm not a native English speaker.

CodePudding user response：

First off the tag

[ValidateAntiForgeryToken]

When you use this tag you are telling the server it should verify that a token is to be sent in your form, I don't see it.

You need to add

<form>
@Html.AntiForgeryToken()
...
</form>

Also this model comming into the function

UsuarioM

This model has variable id, and token that are also not in your form. I would add

<input />

for all variables in the object you will be sending. If you don't want to see the inputs then use type="hidden".

CodePudding user response：

This may help.

in the Controller File Add [BindProperty] and TempData["alert"] and create a property :

[BindProperty] //This will help to bind data automatically
public UsuarioM usuario { get; set; } //Create this property

[HttpGet]
public IActionResult Login()
{
    UsuarioM usuario = new UsuarioM();
    TempData["alert"] = "write your alert message here"; //To show the aler
    return View(usuario);
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Login() //No need to pass the property as a parameter
{
    if (ModelState.IsValid)
    {
        Magic...
    }
    else
    {
        return View();
    }
}

in RazorView replace:

<form method="Post" asp-action="Login">
     <div asp-validation-summary="ModelOnly" ></div>
     <div >
          <label for="Usuario">Usuario:</label>
          <input type="text" asp-for="usuario.Usuario"  placeholder="Ingresa el usuario" />
          <span asp-validation-for="usuario.Usuario" ></span>
     </div>
     <div >
          <label for="contrasenia">Contraseña:</label>
          <input type="password" asp-for="usuario.Password"  placeholder="Ingresa la contraseña" />
          <span asp-validation-for="usuario.Password" ></span>
    </div>
    <button type="submit" >INGRESAR</button>
</form>

in the View I replaced :

<form asp-action="Login"> with <form method="Post" asp-action="Login">

asp-for="Usuario" with asp-for="usuario.Password"

asp-validation-for="Usuario" with asp-validation-for="usuario.Usuario"

asp-for="Password" with asp-for="usuario.Password"

asp-validation-for="Password" with asp-validation-for="usuario.Password"

CodePudding user response：

Add asp-action="Login" method="post" to your form element. Everything else is correct. I think it will work.

CodePudding user response：

That is because your parameter name UsuarioM usuario here conflicts with the property name Usuario in the model.

Just change the parameter name to be different from the property name, for example like below UsuarioM model:

public async Task<IActionResult> Login(UsuarioM model)