在登录表单 ASP.NET MVC 中无需回发即可验证用户名和密码

Question

我想验证在没有 Postback/Refresh 的表单中的文本框中输入的用户名和密码。我知道为此目的我需要 Javascript 或 AJAX，但请有人指导我完成此操作，例如向我推荐任何教程或请在此处向我解释代码。我目前没有此功能的代码如下所示：

@using(Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.TextBoxFor(u => u.PPNumber, new { @class = "form-control", type = "number", placeholder = "Enter Number",@min="1" })
    @Html.ValidationMessageFor(u => u.PPNumber)
    @Html.TextBoxFor(u => u.Password, new { @class = "form-control", type = "Password", placeholder = "Password" })
    @Html.ValidationMessageFor(u => u.Password)
    <input type="submit" value="Login" class="btn btn-primary btn-block" />
}

Answer 1

您可以使用 ajax。

当用户提交表单时，您需要在 javascript 中劫持该事件并停止该事件（阻止正常的整页表单提交），而是制作一个 ajax 使用表单数据调用操作方法。此操作方法应包含验证用户凭据的代码，并且可以 return 一个 JSON 数据结构，该数据结构具有 status 属性表示凭据验证是否成功。您可以在 ajax 调用的成功/done 回调中检查此响应并采取相应措施。

这是使用 jQuery $.post 方法的快速示例。

为您的表单提供一个 ID，以便我们可以使用它来连接提交事件。

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id="loginForm"))
{
    @Html.TextBoxFor(u => u.PPNumber)
    @Html.TextBoxFor(u => u.Password, new { @class = "form-control", type = "Password"})
    <input type="submit" value="Login" class="btn btn-primary btn-block" />
}

和 javascript 代码劫持提交事件并执行 ajax post。

$(function () {

    $("#loginForm").submit(function(e) {
        e.preventDefault();
        $.post($(this).attr("action"), $(this).serialize())
            .done(function(response) {
                if (response.status === 'success') {
                    alert("Login successful.Do something else now");
                } else {
                    alert("Login failed");
                }
            });
    });
});

假设您在 AccountController 中的登录操作方法将 return 具有状态属性.

的 Json 响应

public ActionResult Login(string PPNumber,string password)
{
    if(PPNumber=="thisIsDemo" && password=="ButDoTheActualCheck")
    {
        return Json(new { status = "success" });
    }
    return Json(new { status = "failed" });
}

这里我只是将 usrename /password 检查硬编码为 2 个静态值。您可以更改它以根据您的数据库检查它 table/whatever 您的凭据检查机制是。

在登录表单 ASP.NET MVC 中无需回发即可验证用户名和密码

Validate username and password without postback in login form ASP.NET MVC

javascript

validation

ajax

asp.net-mvc

postback