[ASP.NET Core MVC] cshtml 驗證失敗時觸發 JavaScript

在 Controller 中我們會使用 ModelState.IsValid 的方式檢查 ViewModel 的內容是否通過驗證,在 cshtml 中使用 span 標籤的 asp-validation-for 屬性綁定 ViewModel 的屬性,只要驗證失敗就會自動顯示錯誤訊息。

例如:
    
<input type="text" 
    class="form-control" 
    asp-for="@Model.Id" 
    disabled>
<span asp-validation-for="Id" class="text-danger"></span>
    

那假設某項驗證錯誤時要觸發 JavaScript 該怎麼做?

假設頁面的 @model 綁定 MyViewModel ,如果 MyViewModel 的 Id 驗證失敗時要使用 JavaScript 顯示 alert 訊息,實現的程式碼如下:
    
@{
	var errors = ViewData.ModelState[nameof(MyViewModel.Id)]?.Errors;
    var errorMessage = errors?.Count > 0 ? errors[0].ErrorMessage : null;
}

@if (lastUpdateAtErrors != null && lastUpdateAtErrors.Count > 0)
{
    <script>
        alert("錯誤訊息為: @Html.Raw(errorMessage)");
    </script>
}
    

留言