Asp.Net Core 2.0 MVC 问题 jQuery 就绪函数

Question

首先声明我是Core 2.0和MVC的新手所以请原谅我的无知

我已经使用 webforms 多年，并且会使用 AJAX 来处理这个问题，但是我很难找到 MVC 的答案。

我认为我遇到的问题是，当我单击页面上的按钮时，它正在执行完整的 post 而不是使用 Ajax 来部分 post。这有所不同的唯一原因是，在这个登录屏幕上，我的登录表单在页面加载时向下飞。

<script type="text/javascript">
    $().ready(function () {
        setTimeout(function () { $('.card').removeClass('card-hidden'); }, 700)
    });
</script>

如果用户输入了不正确的信息而我必须显示错误，登录表单将再次从顶部飞入。

所以我的问题有两个。

对于初学者来说，有什么简单的方法可以阻止它漂浮在post背上吗？使用 webforms，我可以直接在后面的代码中访问 HTML，并在 return 之前删除 class。也许我可以做一些事情，比如向我的 ViewModel 添加状态，然后我可以根据 Razer 中的状态切换 class。
或者，如果能够像我在 webforms 中那样使用 AJAX 就好了，因为我确信我会遇到其他更复杂的 UI 相关问题页面加载和元素的当前状态。有人知道这方面的好资源吗？

回顾

使用 Asp.net Core 2.0 MVC
JQuery 就绪方法在 postback
这导致我的登录表单再次飞入
我是否必须像项目 1
我应该关注 AJAX 吗？根据我的需要，什么是好的资源。
示例页面：http://demos.creative-tim.com/material-dashboard-pro/examples/pages/login.html

解决方案

首先非常感谢 David Lang 为我指明了正确的方向。在他的 post 和 link 之间，我能够解决这个问题。

请注意，我的很多问题都是由未正确安装 nuget 包引起的。安装了 Microsoft unobtrusive Ajax，但因为我没有名为 scripts 的文件夹，所以它从未将 JS 文件放入我的项目中。一旦我在我的项目中得到这些，剩下的就变得容易了。

首先为您的页面添加 jQuery 不显眼的脚本。

<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>

添加最小表单标签

<form asp-action="CheckPassword" data-ajax="true" data-ajax-method="post" data-ajax-success="onSuccess" >

在你的控制器中检查你的数据，在我的例子中 return 一个视图模型（不是视图）

[HttpPost]
public ActionResult CheckPassword([Bind("userName, password")] LoginVM loginModel)
{
    if (loginModel.userName == "somename" && loginModel.password == "1234")
    {
        loginModel.invalidUser = false;
        return Ok(loginModel);
    }
    else
    {
        loginModel.invalidUser = true;
        return Ok(loginModel);
    }
}

创建 JS 函数来处理 returned 数据。

var onSuccess = function (context) {
    var errorMessage = $("#errorMessage");
    errorMessage.html("");

    if (context.invalidUser)
    {
        errorMessage.html("Invalid Credentials");
    }
    else
    {
        errorMessage.html("Valid user!");
    }
};

Answer 1

由于您是 ASP.NET Core 2.0 的新手，我不会详细解释，但我非常想鼓励您去研究它们，然后自己掌握它们。

常规形式 Post

LoginViewModel.cs

namespace DL.SO.Project.Reporting.Accounts
{
    public class LoginViewModel
    {
        [Required]
        public string Username { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [Display(Name = "Remember my login?")]
        public bool RememberMe { get; set; }

        public string ReturnUrl { get; set; }
    }
}

Login.cshtml

@model DL.SO.Project.Reporting.Accounts.LoginViewModel
@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_CenteredLayout.cshtml";
}

<div class="widget">
    <form asp-area="" asp-controller="account" asp-action="login">
        <input type="hidden" asp-for="ReturnUrl" />

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

        <div class="form-group">
            <label asp-for="Username" class="required"></label>
            <input type="text" class="form-control" asp-for="Username" autofocus="autofocus" />
            <span class="form-text" asp-validation-for="Username"></span>
        </div>
        <div class="form-group">
            <label asp-for="Password" class="required"></label>
            <input type="password" class="form-control" asp-for="Password" autocomplete="off" />
            <span class="form-text" asp-validation-for="Password"></span>
        </div>
        <div class="form-check">
            <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" asp-for="RememberMe" />
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">
                    @Html.DisplayNameFor(m => m.RememberMe)
                </span>
            </label>
        </div>
        <button type="submit" class="btn btn-primary btn-block">Login</button>
    </form>
</div>

看到表单元素上的 asp-controller 和输入上的那些 asp- 属性了吗？它们是来自 ASP.NET Core.

的内置 tag helper

例如，在表单元素上使用 asp- 属性，它将创建一个具有 POST method 属性和 action[ 的表单=66=] 属性指向 /account/login。希望您有一个 Account 控制器 Login 方法来处理该请求。

可选：要使客户端验证正常工作，您需要 jquery-validation 和 jquery-validation-unobtrusive 包。

Ajax表格Post

要将 AJAX 用于表单 post，除了上述构建表单之外还有一些额外的步骤。

需要安装包 jquery-ajax-unobtrusive。

需要在表单元素上使用 data- 指定 ajax 回调。

需要定义回调函数。

例如，

<form asp-area="" asp-controller="account", asp-action="login" data-ajax="true" data-ajax-method="post" data-ajax-begin="onFormBegin" data-ajax-complete="onFormComplete"> ... </form>

有关 Unobtrusive ajax 助手的完整列表，请参阅此处：https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/

然后你需要定义回调函数。

@section scripts { <script type="text/javascripts"> $(function() { window.onFormBegin = function() { ... }; window.onFormComplete = function(request, status) { ... // if the status is not valid // keep displaying the form? // just an idea... ... }; }); </script> }

我的口味

这只是我的意见。每当我处理帐户登录和其他与安全相关的事情时，我倾向于使用常规形式 post 而不是 ajax。我不想在那里有任何花哨的东西，因为当出现问题时，我希望服务器给用户一个新页面，或者直接立即将用户重定向到某个地方，而不是保留包含无效信息的页面并使用 ajax 进行交流。

同样，这只是我个人的品味。

Asp.Net Core 2.0 MVC 问题 jQuery 就绪函数

Asp.Net Core 2.0 MVC Issue with jQuery ready function

asp.net

ajax

jquery

asp.net-core-mvc

asp.net-core-2.0

解决方案

常规形式 Post

Ajax表格Post

我的口味