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

training是Json()类中定义的辅助方法。如果您不想让控制器继承自Controller类，则可以返回Controller
此外，您的ajax代码中还存在语法错误，请通过以下方式进行修复：

$.ajax({
    type="post",
    type:"post",
    url="/Login/Validate",
    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();
        }
    }
});

最后，通过在操作方法中使用new JsonResult(new{ status=true, message="...."})属性，您的服务器期望整个请求正文都可以反序列化为[FromBody]。通常，这要求UserLogin是Content-Type，但是您的ajax发送的是application/json有效负载。因此，一种方法是通过以下方式更改操作方法：

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

或者，如果您更喜欢form-url-encoded格式，则需要如下更改ajax：

        var data = $("#loginForm").serialize();
        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",
            data: data,
            data: JSON.stringify(payload), 
            success: function (result) {
                if (result.status == false) {
                    $("#loginForm")[0].reset();
                    $("#msg").show();
                }
                else {
                    window.location.href = "DemoGrid/ShowGrid";
                    $("#msg").hide();
                }
            }
        })

操作方法将与您的相同：

JSON

使用ajax，jquery和asp.net核心的简单用户名和密码登录

1 个答案: