如何使用ASP.NET MVC 5進行客戶端驗證？

Question

我是ASP.NET MVC 5的新手。我喜歡學習在視圖和視圖模型之間構建雙向綁定的正確方法。並利用客戶端驗證腳本。

這是我所做的。

1. 我加載jQuery庫v 1.10.1
2. 我加載Jquery-Validation
3. 我裝jQuery.Unobtrusive.Validation

我創建一個視圖模型，像這樣

public class RequestFormViewModel 
{ 
    [Required] 
    [Display(Name = "Day Of")] 
    public DateTime LocalFrom { get; set; } 

    [Required] 
    [Display(Name = "Does not matter since this will be hidden and I use javascript to populate the value here when before the for is submitted")] 
    public DateTime From { get; set; } 

    public RequestFormViewModel() 
    { 
    } 

    public RequestFormViewModel(DateTime localFrom, DateTime from) 
    { 
     this.LocalFrom = localFrom; 

     this.From = from; 
    } 
} 

這就是我如何創造了我的觀點。請注意，我將主持人或業務層（即DefaultViewPresenter）傳遞給我的視圖，而不是ViewModel。該類DefaultViewPresenter有一個屬性nammed Request。 （下面我會告訴我的演講看起來像）

@model Proj.Presenters.DefaultViewPresenter 

@using (Html.BeginForm("Index", "Track", FormMethod.Post, new { @class="form-inline", Id = "TrackActionForm" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.HiddenFor(m => m.Request.LocalFrom, new { Id = "TrackFrom", Name = "From" })     

    <div class="input-group"> 

     @Html.TextBoxFor(m => m.Request.LocalFrom, new { Value = Model.Request.LocalFrom.ToString("MM/dd/yyyy"), @class = "form-control small", Id = "TrackLocalFrom", Name = "LocalFrom" }) 
     @Html.ValidationMessage("LocalFrom") 

     <span class="input-group-btn"> 
      <button class="btn btn-info" type="button" id="TrackSubmit">View</button> 
     </span> 

    </div> 

} 

這是我演講的樣子

public class DefaultViewPresenter 
{ 
    public RequestFormViewModel Request { get; set; } 
    .... // some other propertied that I need for the view that are not related to my form 
    .... 
    .... 
} 

問題

當我提交表單，表單沒有得到提交！我不會收到任何錯誤。它就像提交按鈕在點擊事件上有return;函數。

如何讓腳本正確驗證以及何時表單有效處理了發佈請求？

我在這裏錯過了什麼？我該如何糾正這個問題？

運行我的應用程序後，這是HTML標記是剃刀產生

<form novalidate="novalidate" id="TrackActionForm" action="/Track" class="form-inline" method="post"> 
    <input name="__RequestVerificationToken" value="thmJX-Mlj5WjM3e7WMbgtb8KiEf4vuUKGzon4zO18fHDDY3cWpm2M1Lks8HbZDxX2qz7UxpRsoYvz2njNwYS_D8zclTvu9pdsJlSO0ckNLQ1" type="hidden"> 
    <input id="TrackFrom" name="From" data-val="true" data-val-date="The field Day Of must be a date." data-val-required="The Day Of field is required." value="9/14/2016 12:00:00 AM" type="hidden">      
    <div class="input-group"> 

     <input id="TrackLocalFrom" name="LocalFrom" value="09/14/2016" class="form-control small" type="text"> 
     <span class="field-validation-valid" data-valmsg-for="LocalFrom" data-valmsg-replace="true"></span> 

     <span class="input-group-btn"> 
      <button class="btn btn-info" type="button" id="TrackSubmit">View</button> 
     </span> 

    </div> 
</form> 

Answer 1

您的實施有幾個問題。

生成表單控件的所有HtmlHelper方法都會生成正確的用於雙向模型綁定的屬性name和value屬性。您正在重寫這些值，以便控件現在與您的模型沒有任何關係。

您還在文本框之前爲Request.LocalFrom屬性提供了一個隱藏輸入，以便在提交時只綁定隱藏輸入的值（屬性的原始值），並將文本框中的編輯值被忽略。另外，由於隱藏輸入，爲客戶端驗證生成的data-val-*屬性已應用於隱藏輸入，而不是文本框。

它不清楚爲什麼需要2個視圖模型，最好你DefaultViewPresenter視圖模型應該包含LocalFrom和From性質，但與當前的車型，您認爲需要將

@model Proj.Presenters.DefaultViewPresenter 

@using (Html.BeginForm("Index", "Track", FormMethod.Post, new { @class="form-inline", Id = "TrackActionForm" })) 
{ 
    @Html.AntiForgeryToken() 
    <div class="input-group">   
     @Html.TextBoxFor(m => m.Request.LocalFrom, "{0:MM/dd/yyyy}", new { @class = "form-control small" }) 
     @Html.ValidationMessageFor(m => m.Request.LocalFrom) 

     <span class="input-group-btn"> 
      <button class="btn btn-info" type="submit" id="TrackSubmit">View</button> // change to a submit button 
     </span> 
    </div> 
} 

注意第二個參數在TextBoxFor()是格式字符串，但可以省略，如果您使用[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]適用於該屬性。另請注意，HtmlHelper方法根據屬性名稱生成id屬性，通常應該沒有理由覆蓋它。作爲便箋，建議您在視圖模型中使用[Required]屬性的值類型屬性nullable來防止發佈不足的攻擊（其中惡意用戶發佈後退並省略名稱/值對屬性，在這種情況下，它會被初始化爲它的默認值（DateTime.MinValue）。

[Required(ErrorMessage = "Please enter ...")] 
[Display(Name = "Day Of")] 
public DateTime? LocalFrom { get; set; } 

Answer 2

默認情況下，jQuery驗證忽略了客戶端驗證隱藏字段。在您的視圖或_layout.cshtml的腳本塊中嘗試以下操作：

$(document).ready(function(){ 
$.validator.setDefaults({ ignore: [] }); 
}); 

希望這有助於您！