如何使這個ASP.NET核心模型驗證在客戶端工作？

在我的ASP.NET Core 1.1.1應用程序中，以下Model Validation不起作用。我認爲這個問題與我沒有在下面的主視圖中正確添加驗證腳本有關。如何使這個ASP.NET核心模型驗證在客戶端工作？

方案：

我點擊上主視圖按鈕調用一個partial view。
我在部分視圖中輸入所有正確的值並提交表單（在部分視圖中），表單successfully被提交併且所有值都正確輸入到SQL Server數據庫中。
然後我intentionally輸入一個字符串，比如說abc，輸入price（即nullable type float）的輸入框並提交表單。客戶端錯誤甚至無法顯示（在我的Chrome瀏覽器中啓用了javascript）。因此，表單將被提交到服務器，其中ModeState.IsValid（如預期的那樣）是POST操作方法中的false。

問題：爲什麼客戶端驗證以上（如步驟3所示）不工作，以及我們如何使它發揮作用？

注意：創建項目時，所有css和javascripts默認由VS2017添加和配置。所以我認爲腳本都在那裏，我可能不會在視圖上正確地調用它們 - 但這只是一個假設。

MyViewModel

public class MyViewModel 
{ 
    public int FY { get; set; } 
    public byte OrderType { get; set; } 
    public float? Price { get; set; } 
    .... 
}

主視圖

@model MyProj.Models.MainViewModel 

... 
<div> 
    <button type="submit" name="submit"...>GO</button> 
</div 
@section scripts 
{ 
    <script> 
    $(document).ready(function() { 
    .... 
    $('.tab-content').on('click', '.BtnGO', function (event) { 
    ....  
    $.ajax({ 
     url: '@Url.Action("SU_AddCustOrder", "MyContr")', 
     data: { ....}, 
     contentType: 'application/json', 
     dataType: 'html', 
     type: 'GET', 
     cache: false, 
     success: function (data) { 
      if (BtnVal == 'AddOrderBtnGo') 
       $('#menuAP').html(data); 
      else if .... 
     error: function (....){ 
       alert(...); 
     } 
    }); 
});

MyContrController：

[HttpGet] 
public IActionResult AddCustOrder(int Order_id) 
{ 
.... 
return PartialView("~/Views/PartialsV/MyPartialView.cshtml", myVM); 
.... 
} 

[HttpPost] 
public IActionResult AddCustOrder(MyViewModel model) 
{ 
.... 
if(ModelState.IsValid) 
{ 
    .... 
} 
.... 
}

局部視圖

.... 
<div class="form-group"> 
    <label asp-for="Price"></label> 
    <div class="col-md-10"> 
     <input asp-for="Price" class="form-control"></input> 
     <span asp-validation-for="Price" class="text-danger"></span> 
    </div> 
</div> 
.... 
<button type="submit" name="submit"...>Add Order</button>

UPDATE

_layout.cshtm文件

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>@ViewData["Title"] - Test</title> 

    <environment names="Development"> 
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
     <link rel="stylesheet" href="~/css/site.css" /> 
    </environment> 
    <environment names="Staging,Production"> 
     <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" 
       asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" 
       asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" /> 
     <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> 
    </environment> 
    @RenderSection("styles", required:false) 
</head> 
<body> 
    <header> 
     <div class="container navbar navbar-inverse navbar-fixed-top text-center"> 
     </div> 
     <div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;"> 
      @await Component.InvokeAsync("Welcome") 
     </div> 
    </header> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer class="text-center"> 
      <a asp-controller="Misc" asp-action="AccessibilityStatement" class="text-center text-muted">Accessibility Statement</a> 
     </footer> 
    </div> 

    <environment names="Development"> 
     <script src="~/lib/jquery/dist/jquery.js"></script> 
     <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
     <script src="~/js/site.js" asp-append-version="true"></script> 
    </environment> 
    <environment names="Staging,Production"> 
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js" 
       asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
       asp-fallback-test="window.jQuery"> 
     </script> 
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js" 
       asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js" 
       asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"> 
     </script> 
     <script src="~/js/site.min.js" asp-append-version="true"></script> 
    </environment> 

    @RenderSection("scripts", required: false) 
    @RenderSection("css", required:false) 
</body> 
</html>

來源

2017-09-01 nam

'的局部視圖裏面？ – Ali

@Ali謝謝你的幫助。不，我沒有使用'@section scripts {}'。 – nam

您是否可以更新該帖子以顯示您要將客戶端驗證腳本放在哪裏？ – Ali

如何使這個ASP.NET核心模型驗證在客戶端工作？

回答

相關問題