Question

我有使用PHP（Laravel）和Python（Django）的Web框架的经验。但我迷失了C＃和ASP.NET！

我尝试使用ASP.NET核心和C＃创建登录页面。举个例子，我有一个登录表单，用户名和密码输入字段：

<div asp-validation-summary="None" class="text-danger"></div>
<label asp-for="Username"></label>
<input asp-for="Username" class="form-control" />
<span asp-validation-for="Username" class="text-danger"></span>

<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>

在我的视图模型中：

[Required(ErrorMessage = "** Localized error message **")]
[Display(Name = "Username:", Prompt = "Username")]
public string Username { get; set; }

[Required(ErrorMessage = "** Another localized error message **")]
[DataType(DataType.Password)]
[Display(Name = "Password:", Prompt = "Password")]
public string Password { get; set; }

一切正常！如果我没有在表单上输入用户名和/或密码，则会正确显示本地化的错误消息。但是，如果我提供了无效的用户名/密码，则表单顶部会显示一般错误（带有ul，li）。没关系，但我喜欢显示一个toastr，比如：

toastr.error(errorMessageOfInvalidLogin);

如何检查表单在客户端是否有效？我已经包含了toastr，我可以手动拨打电话＆＃39;。但是，如果表单无效，我不会有任何想法如何调用此javascript，以及如何恢复错误消息。

Answer 1

如果您需要在剃刀中获取值：

您可以删除验证摘要标记：

@*<div asp-validation-summary="All" class="text-danger"></div>*@

在表单中呈现：

@if (ViewData.ModelState.Any(x => x.Key == string.Empty))
                {
                    var errors = ViewData.ModelState[string.Empty].Errors.Select(e => e.ErrorMessage).Aggregate("", (current, error) => current + error);
                    <input type="hidden" id="error" value="@errors" />
                }

在脚本部分：

<script>

$(function() {
            var error = $("#error").val();
            if (error != undefined) {
                $.toaster({ message: error, title: 'Error', priority: 'danger' });
            }
        })

</script>

想看一看？ Click here！

Answer 2

不是最好的选择，但我解决了以下变化：

在css上，输入以下内容（隐藏列表）：

.validation-summary-erros {
  display: none;
}

在Login.cshtml上（为每个错误调用一个toastr）：

<script type="text/javascript">
  $(".validation-summary-erros ul li")
    .each(function() {
      toastr.error($(this).text());
    });
</script>

我还有其他选择，例如：

创建一个自定义TagHelper：为此工作太多了。
在控制器上，传递一个带有错误的变量来查看：有效，但我更喜欢AddModelError选项，因为这是一个错误（验证错误）！

我还在寻找更好的方法！

表单无效时调用javascript函数

2 个答案: