Входные значения равны нулю в контроллере (ASP. Net MVC) с использованием ajax

Question

На моей странице входа я хочу показать сообщение об ошибке, когда пользователь вводит неправильный адрес электронной почты и пароль без обновления страницы. Я пытаюсь отправить данные из представления в контроллер, используя ajax. Но в контроллере user.Email и user.Password равны нулю при отладке, но вызов Ajax работает. Я хочу знать, что там не так?

<div class="login-container">
    <div class="row">
        <div class=" col-md-12 col-sm-12 col-12  login-form-1">
            <h2>Login</h2>
            <p>Log into your account</p>
            @using (Html.BeginForm("Login", "Account", FormMethod.Post))
            {
                <div id="alertmessage">
                    <div class=" alert alert-danger">
                        <span>
                        Email or Password is incorrect
                        </span>
                    </div>
                </div>
 
                @Html.AntiForgeryToken()

                <div class="form-group col-md-12 col-sm-12 col-12">
                    <input id="Email" type="text" class="form-control" placeholder="Your Email *" value="" name="Emaillog" />
                </div>
                <div class="form-group col-md-12 col-sm-12 col-12 ">
                    <input id="Password" type="password" class="form-control" placeholder="Your Password *" value="" name="Passwordlog" />
                </div>
                <div class="form-group col-md-12 col-sm-12 col-12">
                    <input type="submit" class="btnSubmit" value="Login now" id="logbut" />
                </div>
                <div class="form-group col-md-6 col-sm-6 col-6">
                    <a href="#" class="ForgetPwd">Forget Password?</a>
                </div>
            }
        </div>
    </div>
</div>

$(document).ready(function () {
    $("#alertmessage").hide()
    $("#logbut").click(function (e) {
        e.preventDefault();
        // collect the user data
        var data = {};
        data.Email = $("#Email").val();
        data.Password = $("#Password").val();

        var token = $('input[name="__RequestVerificationToken"]').val();

        $.ajax({
            url: "/Account/Login",
            type: "POST",
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',   
            data: {
                model: data,
                __RequestVerificationToken: token,
                returnUrl: "Account/Login"   // you can modify the returnUrl value here
            },
            success: function (result) {
                if (result == "Fail") {
                    $("#alertmessage").show()
                }
                else  {
                    window.location.href = "/Account/MainAccount";
                }
            },
        })
    })
})

Контроллер

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Login(User user)
{
    string result = "Fail";

    User appUser = _context.Users.FirstOrDefault(u => u.Email == user.Email);

    if (appUser != null)
    {
        if (appUser.Password ==user.Password)
        {
            Session["ActiveUser"] = appUser;
            return RedirectToAction("MainAccount");   
        }
    }

    return Json(result, JsonRequestBehavior.AllowGet);    
}

Как решить эту проблему?

Answer 1

Можете ли вы попробовать это.

Примечание: ваше свойство класса модели совпадает с внутренним именем элемента управления

Как в примере

Имя пользователя Пароль

В Например, вы отправляете запрос, используя ajax, но ваш тип кнопки - submit, когда вы нажимаете кнопку, на сервер поступают два запроса, один - ajax, а второй - form.

Пожалуйста см. этот пример.

<div class="login-container">
 <div class="row">
<div class=" col-md-12 col-sm-12 col-12  login-form-1">
<h2>Login </h2>
<p>Log into your account</p>
@using (Html.BeginForm("Login", "Account", FormMethod.Post,new {id="LoginFrom" }))
{
<div id="alertmessage">
<div class=" alert alert-danger">
<span>
Email or Password is incorrect
</span>
</div>
</div>

@Html.AntiForgeryToken()

<div class="form-group col-md-12 col-sm-12 col-12">
<input id="Email" type="text" class="form-control" placeholder="Your Email *" value="" name="Email" />
</div>
<div class="form-group col-md-12 col-sm-12 col-12 ">
<input id="Password" type="password" class="form-control" placeholder="Your Password *" value="" name="Password" />
</div>
<div class="form-group col-md-12 col-sm-12 col-12">
<input type="button" class="btnSubmit" value="Login now" id="logbut" />
</div>
<div class="form-group col-md-6 col-sm-6 col-6">
<a href="#" class="ForgetPwd">Forget Password?</a>
</div>
}
</div>
</div>
</div>

Jquery Код

$(document).ready(function () {
$("#alertmessage").hide()
$("#logbut").click(function (e) {   

    $.ajax({
        url: '@Url.Action("Login","Account")',
        type: "POST",          
        data: $("#LoginFrom").serialize(),
        success: function (result) {
            if (result == "Fail") {
            $("#alertmessage").show()

            }
            else  {

                window.location.href = "/Account/MainAccount";
            }
        },
        })
    })
})

Для более подробной информации -> проверьте эту ссылку https://www.w3schools.com/jquery/ajax_serialize.asp

Answer 2

Вместо использования пользовательской модели в действии MVC, используйте параметры в

Login(string email, string password)

И в Ajax pass

data: 
{ 
    email : email, 
    password : password, 
    __RequestVerificationToken: token
}