带有 jQ​​uery 就绪功能的 Asp.Net Core 2.0 MVC 问题

Question

首先让我说我是 Core 2.0 和 MVC 的新手，所以请原谅我的无知

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

我相信我遇到的问题是，当我单击页面上的按钮时，它正在做一个完整的帖子，而不是使用 Ajax 来部分发布。这有所不同的唯一原因是，在这个登录屏幕上，我的登录表单在页面加载时飞了下来。

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

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

所以我的问题有两个。

1. 对于初学者，有没有什么简单的方法可以阻止它在回发时浮动？ 使用网络表单，我可以直接在后面的代码中访问 HTML，并在返回之前删除该类。 也许我可以做一些事情，比如向我的 ViewModel 添加一个状态，然后我可以在 Razer 中基于该状态切换类。

1234563有谁知道这方面的好资源吗？

回顾

• 使用 Asp.net Core 2.0 MVC
• 回发时触发 JQuery 就绪方法的问题
• 这会导致我的登录表单再次飞入
• 我是否必须像第 1 项那样破解 UI
• 我是否应该专注于 AJAX 以及根据我的需要什么是好的资源。

• 示例页面：http://demos.creative-tim.com/material-dashboard-pro/examples/pages/login.html

  
  
  

解决方案

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

请注意，我的大部分问题都是由未正确安装的 nuget 包引起的。安装了 Microsoft 不显眼的 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" >
  

• 在您的控制器中检查您的数据，在我的情况下返回一个 viewModel（不是视图）

  [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 函数对返回的数据做一些事情。

  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的新手，我不会详细解释，但我非常想鼓励你去研究它们，然后自己掌握它们。

常规表单发布

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; }
    }
}

登录.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 的内置标签助手。

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

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

Ajax 表单发布

要将AJAX 用于表单发布，除了像上面那样构建表单之外，还有一些额外的步骤。

• 需要安装包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>
}

我的口味

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

这只是我个人的口味。