Простое имя пользователя и пароль, используя ядро ​​ajax, jquery и asp.net

Question

Я хочу сделать простой вход пользователя, используя ajax, jquery и asp.net core 2.1. У меня уже есть база данных sql с именем пользователя и паролем. Пользователь должен войти в систему, используя свои username и password, после чего они будут перенаправлены на определенную страницу DemoGrid/ShowGrid. Теперь, это для изучения цели, а не для производства, так что я не использую какую-либо форму аутентификации, или много думаю о безопасности. Я просто хочу, чтобы пользователь зарегистрировался, пароль и имя пользователя были проверены, и, если они действительны, перенаправлены на определенную страницу. Вот мой index.cshtml:

<div class="container" style="margin-top: 10px;">
<div class="row">
    <div class="col-md-4 col-md-offset-4 alert alert-info">
        <h3 class="text-center"> Login</h3>
        <form id="loginForm">
            <div id="msg">
                <ul style="color:red;">Invalid Username or Password</ul>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                    <input class="form-control" type="text" name="username"
                           id="logUsername" placeholder="Username" />
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input class="form-control" type="password" name="password"
                           id="logPassword" placeholder="Password" />
                </div>
            </div>
        </form>
        <div class="form-group">
            <button class="btn btn-info form-control" type="submit" onclick="Login()">
            <i class="glyphicon glyphicon-log-in"> Login </i></button>
        </div>
    </div>
</div>

А вот мой код Ajax:

$("#msg").hide();
var Login = function () {
    var data = $("#loginForm").serialize();
    $.ajax({
        type="post",
        url="/Login/Validate",
        data: data,
        success: function (result) {
            if (result.status == false) {
                $("#loginForm")[0].reset();
                $("#msg").show();
            }
            else {
                window.location.href = "DemoGrid/ShowGrid";
                $("#msg").hide();
            }
        }
    })
}

У меня также есть модель входа в систему:

namespace ExampleGrid.Models
{
    [Table("PrintLogins", Schema = "dbo")]
    public class UserLogin
    {
        [Key]
        public int Id { get; set; }
        public string username { get; set; }
        public string password { get; set; }
    }
}

И контроллер LoginController.cs:

namespace ExampleGrid.Controllers
{
    //[Route("api/[controller]")]
    // [ApiController]


    public class LoginController : ControllerBase
    {
        private DatabaseContext _context;

        public LoginController(DatabaseContext context)
        {
            _context = context;
        }
        [HttpPost]
        public ActionResult Validate([FromBody] UserLogin user)
        {
            var login = _context.UserLogin.Where(s => s.username == 
                user.password);
            if (login.Any())
            {
                if (login.Where(s => s.password == user.password).Any())
                {

                    return Json(new { status = true, message = "Login 
                        Successfull!" });
                }
            else
            {
                return Json(new { status = true, message = "Invalid 
                    Password!" });
            }
        }
        else
        {
            return Json(new { status = false, message = "Invalid Username!" 
              });
        }
    }  

Теперь вот где я застрял. Я гуглил и перепробовал несколько вариантов, но пока у меня ничего не работает. В приведенном выше коде у меня есть красная линия под Json .. конечно, это означает ошибку the name Json doesn't exist in the current contex. Так что если у кого-то есть способ сделать это и объяснение рабочего решения, я был бы очень признателен Я все еще учусь и хотел бы узнать как можно больше, поэтому приветствуются различные решения.

код для соответствующей страницы DemoGrid/ShowGrid:

<div style="width:100%; margin:0 auto;">
    <table id="example" class="table table-striped table-bordered dt- 
        responsive nowrap" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Id</th>
                <th>Number</th>
                <th>Telephone</th>
                <th>Gender</th>
            </tr>
        </thead>
    </table>
</div>

Answer 1

1. Json() - это вспомогательный метод, определенный в классе Controller. Если вы не хотите, чтобы ваш контроллер наследовал от Controller класса, вы можете вернуть new JsonResult(new{ status=true, message="...."})

2. Кроме того, в вашем ajax-коде также есть синтаксическая ошибка, исправьте ее следующим образом:

$.ajax({
    <strike>type="post",</strike>
    type:"post",
    <strike>url="/Login/Validate",</strike>
    url:"/Login/Validate",
    data: data,
    success: function (result) {
        if (result.status == false) {
            $("#loginForm")[0].reset();
            $("#msg").show();
        }
        else {
            window.location.href = "DemoGrid/ShowGrid";
            $("#msg").hide();
        }
    }
});

3. Наконец, используя атрибут [FromBody] в вашем методе действия, ваш сервер ожидает, что все тело запроса может быть десериализовано до UserLogin. Как правило, для этого требуется, чтобы Content-Type был application/json, но ваш ajax отправляет полезную нагрузку form-url-encoded. Таким образом, один из подходов заключается в изменении метода действия следующим образом:

        [HttpPost]
        <strike>public ActionResult Validate([FromBody] UserLogin user)</strike>
        public ActionResult Validate(UserLogin user)
        {
            var login = _context.UserLogin.Where(s => s.username == user.password);
            ...
        }

---

Или, если вы предпочитаете формат JSON, вам нужно изменить ваш AJAX, как показано ниже:

        <strike>var data = $("#loginForm").serialize();</strike>
        var data = new FormData(document.querySelector("#loginForm"));
        var payload = {};
        data.forEach((v,k) => payload[k] = v);
        $.ajax({
            type:"post",
            url:"/Login/Validate",
            contentType:"application/json",
            <strike>data: data,</strike>
            data: JSON.stringify(payload), 
            success: function (result) {
                if (result.status == false) {
                    $("#loginForm")[0].reset();
                    $("#msg").show();
                }
                else {
                    window.location.href = "DemoGrid/ShowGrid";
                    $("#msg").hide();
                }
            }
        })

И метод действия будет таким же, как у вас:

    [HttpPost]
    public ActionResult Validate([FromBody] UserLogin user)
    {
        var login = _context.UserLogin.Where(s => s.username == user.password);
        ...        
    }